@elastic/eui 106.0.0 → 106.1.0

package/optimize/lib/components/flyout/flyout.js

@@ -25,8 +25,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
@@ -50,40 +51,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 = (0, _objectWithoutProperties2.default)(_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 = (0, _objectWithoutProperties2.default)(_usePropsWithComponen, _excluded);
+  var _useEuiThemeCSSVariab = (0, _services.useEuiThemeCSSVariables)(),
+    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
   var Element = as || defaultElement;
   var maskRef = (0, _react.useRef)(null);
 
@@ -142,12 +147,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((0, _defineProperty2.default)({}, cssVarName, "".concat(width, "px")));
       return function () {
         document.body.style[paddingSide] = '';
+        setGlobalCSSVariables((0, _defineProperty2.default)({}, 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)
@@ -164,11 +174,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
@@ -197,32 +207,44 @@ var EuiFlyout = exports.EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function
   var flyoutToggle = (0, _react.useRef)(document.activeElement);
   var _useState7 = (0, _react.useState)([]),
     _useState8 = (0, _slicedToArray2.default)(_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((0, _toConsumableArray2.default)(fixedHeaders), (0, _toConsumableArray2.default)((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))
+      shards: [].concat((0, _toConsumableArray2.default)(focusTrapShards), (0, _toConsumableArray2.default)((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))
     });
-  }, [_focusTrapProps, fixedHeaders]);
+  }, [_focusTrapProps, focusTrapShards]);
 
   /*
    * Provide meaningful screen reader instructions/details
@@ -239,11 +261,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
@@ -301,14 +323,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, (0, _extends2.default)({
     className: classes,
     css: cssStyles,
@@ -335,11 +350,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, (0, _extends2.default)({
       headerZindexLocation: "below"

package/optimize/lib/components/flyout/flyout_child.js

@@ -52,7 +52,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);
@@ -131,6 +132,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) {
@@ -151,7 +159,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/optimize/lib/components/flyout/flyout_child_manager.js

@@ -57,8 +57,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/optimize/lib/components/flyout/sessions/flyout_provider.js

@@ -58,7 +58,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() {
@@ -91,10 +91,10 @@ var EuiFlyoutSessionProvider = exports.EuiFlyoutSessionProvider = function EuiFl
     }
   }, children, (activeFlyoutGroup === null || activeFlyoutGroup === void 0 ? void 0 : activeFlyoutGroup.isMainOpen) && (0, _react2.jsx)(_index.EuiFlyout, (0, _extends2.default)({
     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, (0, _extends2.default)({
     onClose: handleCloseChild,
-    size: activeFlyoutGroup.config.childSize
+    size: config === null || config === void 0 ? void 0 : config.childSize
   }, flyoutPropsChild), childFlyoutContentNode)));
 };

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

@@ -62,10 +62,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 = (0, _toConsumableArray2.default)(state.history);
         if (state.activeFlyoutGroup) {
           newHistory.push(state.activeFlyoutGroup);
@@ -75,11 +75,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),
@@ -94,14 +92,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,
@@ -113,7 +112,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 = (0, _toConsumableArray2.default)(state.history);
         if (state.activeFlyoutGroup) {
           _newHistory.push(state.activeFlyoutGroup);
@@ -129,7 +128,7 @@ function flyoutReducer(state, action) {
             mainFlyoutProps: main.flyoutProps,
             childFlyoutProps: child.flyoutProps
           },
-          meta: meta
+          meta: _meta2
         };
         return {
           activeFlyoutGroup: applySizeConstraints(_newActiveGroup),
@@ -184,8 +183,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/optimize/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/optimize/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/optimize/lib/components/tree_view/tree_view.js

@@ -228,6 +228,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);
           },

package/optimize/lib/services/theme/provider.js

@@ -182,7 +182,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 () {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "106.0.0",
+  "version": "106.1.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -49,10 +49,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/elastic/eui.git"
+    "url": "https://github.com/elastic/eui.git",
+    "directory": "packages/eui"
   },
   "dependencies": {
-    "@elastic/eui-theme-common": "3.0.0",
+    "@elastic/eui-theme-common": "3.1.0",
     "@elastic/prismjs-esql": "^1.1.0",
     "@hello-pangea/dnd": "^16.6.0",
     "@types/lodash": "^4.14.202",
@@ -133,7 +134,7 @@
     "@svgr/plugin-svgo": "^8.0.1",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/react-16-17": "npm:@testing-library/react@^12.1.5",
+    "@testing-library/react-17": "npm:@testing-library/react@^12.1.5",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/cheerio": "^0.22.31",
@@ -181,7 +182,6 @@
     "dedent": "^0.7.0",
     "dts-generator": "^3.0.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.7",
     "enzyme-to-json": "^3.5.0",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
@@ -222,11 +222,9 @@
     "process": "^0.11.10",
     "raw-loader": "^4.0.1",
     "react": "^18.2.0",
-    "react-16": "npm:react@^16.14.0",
     "react-17": "npm:react@^17.0.2",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.2.0",
-    "react-dom-16": "npm:react-dom@^16.14.0",
     "react-dom-17": "npm:react-dom@^17.0.2",
     "react-helmet": "^6.1.0",
     "react-redux": "^7.2.1",
@@ -262,11 +260,11 @@
     "@elastic/eui-theme-borealis": "3.3.0",
     "@emotion/css": "11.x",
     "@emotion/react": "11.x",
-    "@types/react": "^16.9 || ^17.0 || ^18.0",
-    "@types/react-dom": "^16.9 || ^17.0 || ^18.0",
+    "@types/react": "^17.0 || ^18.0",
+    "@types/react-dom": "^17.0 || ^18.0",
     "moment": "^2.13.0",
-    "react": "^16.12 || ^17.0 || ^18.0",
-    "react-dom": "^16.12 || ^17.0 || ^18.0",
+    "react": "^17.0 || ^18.0",
+    "react-dom": "^17.0 || ^18.0",
     "typescript": "~4.5.3 || ^5"
   },
   "files": [

package/test-env/components/collapsible_nav/collapsible_nav.js

@@ -217,6 +217,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/test-env/components/flyout/flyout_child.js

@@ -53,7 +53,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);
@@ -132,6 +133,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) {
@@ -152,7 +160,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/test-env/components/flyout/flyout_child_manager.js

@@ -58,8 +58,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/test-env/components/flyout/sessions/flyout_provider.js

@@ -58,7 +58,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() {
@@ -91,10 +91,10 @@ var EuiFlyoutSessionProvider = exports.EuiFlyoutSessionProvider = function EuiFl
     }
   }, children, (activeFlyoutGroup === null || activeFlyoutGroup === void 0 ? void 0 : activeFlyoutGroup.isMainOpen) && (0, _react2.jsx)(_index.EuiFlyout, (0, _extends2.default)({
     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, (0, _extends2.default)({
     onClose: handleCloseChild,
-    size: activeFlyoutGroup.config.childSize
+    size: config === null || config === void 0 ? void 0 : config.childSize
   }, flyoutPropsChild), childFlyoutContentNode)));
 };