@elastic/eui 106.0.0 → 106.1.0-amsterdam.0

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)));
 };

package/test-env/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/test-env/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/test-env/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/test-env/components/provider/component_defaults/component_defaults.js

@@ -66,7 +66,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() {
@@ -116,5 +121,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/test-env/components/provider/provider.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiProvider = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _euiThemeBorealis = require("@elastic/eui-theme-borealis");
+var _themes = require("../../themes");
 var _services = require("../../services");
 var _warning = require("../../services/theme/warning");
 var _css = require("../../services/emotion/css");
@@ -33,7 +33,7 @@ var EuiProvider = exports.EuiProvider = function EuiProvider(_ref) {
   var _ref$cache = _ref.cache,
     cache = _ref$cache === void 0 ? _css.cache : _ref$cache,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? _euiThemeBorealis.EuiThemeBorealis : _ref$theme,
+    theme = _ref$theme === void 0 ? _themes.EuiThemeAmsterdam : _ref$theme,
     _ref$globalStyles = _ref.globalStyles,
     Globals = _ref$globalStyles === void 0 ? _global_styles.EuiGlobalStyles : _ref$globalStyles,
     _ref$utilityClasses = _ref.utilityClasses,

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

@@ -229,6 +229,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);
           },
@@ -296,6 +297,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/test-env/services/color/vis_color_store.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EUI_VIS_COLOR_STORE = void 0;
 var _euiThemeCommon = require("@elastic/eui-theme-common");
-var _euiThemeBorealis = require("@elastic/eui-theme-borealis");
+var _colors_vis_light = require("../../themes/amsterdam/global_styling/variables/_colors_vis_light");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -15,4 +15,4 @@ var _euiThemeBorealis = require("@elastic/eui-theme-borealis");
  */
 
 // initialsetup of Vis color storage with default colors
-var EUI_VIS_COLOR_STORE = exports.EUI_VIS_COLOR_STORE = _euiThemeCommon.EuiVisColorStore.getInstance(_euiThemeBorealis.colorVis, false);
+var EUI_VIS_COLOR_STORE = exports.EUI_VIS_COLOR_STORE = _euiThemeCommon.EuiVisColorStore.getInstance(_colors_vis_light.colorVisLight, false);

package/test-env/services/theme/context.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultComputedTheme = exports.EuiThemeContext = exports.EuiSystemContext = exports.EuiNestedThemeContext = exports.EuiModificationsContext = exports.EuiHighContrastModeContext = exports.EuiColorModeContext = exports.DEFAULTS = void 0;
 var _react = require("react");
-var _euiThemeBorealis = require("@elastic/eui-theme-borealis");
+var _theme = require("../../themes/amsterdam/theme");
 var _utils = require("./utils");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -16,7 +16,7 @@ var _utils = require("./utils");
  */
 
 var DEFAULTS = exports.DEFAULTS = {
-  system: _euiThemeBorealis.EuiThemeBorealis,
+  system: _theme.EuiThemeAmsterdam,
   modifications: {},
   colorMode: _utils.DEFAULT_COLOR_MODE,
   highContrastMode: false

package/test-env/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 () {