@elastic/eui 110.0.0 → 111.0.0

package/lib/components/flyout/use_flyout_resizable.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEuiFlyoutResizable = void 0;
+var _react = require("react");
+var _services = require("../../services");
+var _helpers = require("../resizable_container/helpers");
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+/**
+ * @internal
+ */
+var useEuiFlyoutResizable = exports.useEuiFlyoutResizable = function useEuiFlyoutResizable(_ref) {
+  var enabled = _ref.enabled,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 0 : _ref$minWidth,
+    maxWidth = _ref.maxWidth,
+    onResize = _ref.onResize,
+    side = _ref.side,
+    _size = _ref.size;
+  var getFlyoutMinMaxWidth = (0, _react.useCallback)(function (width) {
+    return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
+    );
+  }, [minWidth, maxWidth]);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    flyoutWidth = _useState2[0],
+    setFlyoutWidth = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    callOnResize = _useState4[0],
+    setCallOnResize = _useState4[1];
+
+  // Must use state for the flyout ref in order for the useEffect to be correctly called after render
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    flyoutRef = _useState6[0],
+    setFlyoutRef = _useState6[1];
+  (0, _react.useEffect)(function () {
+    if (!enabled) return; // Don't measure when resizing is disabled
+    if (!flyoutWidth && flyoutRef) {
+      setCallOnResize(false); // Don't call `onResize` for non-user width changes
+      setFlyoutWidth(getFlyoutMinMaxWidth(flyoutRef.offsetWidth));
+    }
+  }, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth, enabled]);
+
+  // Update flyout width when consumers pass in a new `size`
+  (0, _react.useEffect)(function () {
+    if (!enabled) return; // Don't update width when resizing is disabled
+    setCallOnResize(false);
+    // For string `size`s, resetting flyoutWidth to 0 will trigger the above useEffect's recalculation
+    setFlyoutWidth(typeof _size === 'number' ? getFlyoutMinMaxWidth(_size) : 0);
+  }, [_size, getFlyoutMinMaxWidth, enabled]);
+
+  // Initial numbers to calculate from, on resize drag start
+  var initialWidth = (0, _react.useRef)(0);
+  var initialMouseX = (0, _react.useRef)(0);
+
+  // Account for flyout side and logical property direction
+  var direction = (0, _react.useMemo)(function () {
+    var modifier = side === 'right' ? -1 : 1;
+    if (flyoutRef) {
+      var languageDirection = window.getComputedStyle(flyoutRef).direction;
+      if (languageDirection === 'rtl') modifier *= -1;
+    }
+    return modifier;
+  }, [side, flyoutRef]);
+  var onMouseMove = (0, _react.useCallback)(function (e) {
+    if (!enabled) {
+      return;
+    }
+    var mouseOffset = (0, _helpers.getPosition)(e, true) - initialMouseX.current;
+    var changedFlyoutWidth = initialWidth.current + mouseOffset * direction;
+    setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
+  }, [getFlyoutMinMaxWidth, direction, enabled]);
+  var onMouseUp = (0, _react.useCallback)(function () {
+    setCallOnResize(true);
+    if (!enabled) {
+      return;
+    }
+    initialMouseX.current = 0;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+    window.removeEventListener('touchmove', onMouseMove);
+    window.removeEventListener('touchend', onMouseUp);
+  }, [onMouseMove, enabled]);
+  var onMouseDown = (0, _react.useCallback)(function (e) {
+    var _flyoutRef$offsetWidt;
+    setCallOnResize(false);
+    if (!enabled) {
+      return;
+    }
+    initialMouseX.current = (0, _helpers.getPosition)(e, true);
+    initialWidth.current = (_flyoutRef$offsetWidt = flyoutRef === null || flyoutRef === void 0 ? void 0 : flyoutRef.offsetWidth) !== null && _flyoutRef$offsetWidt !== void 0 ? _flyoutRef$offsetWidt : 0;
+
+    // Window event listeners instead of React events are used
+    // in case the user's mouse leaves the component
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+    window.addEventListener('touchmove', onMouseMove);
+    window.addEventListener('touchend', onMouseUp);
+  }, [flyoutRef, onMouseMove, onMouseUp, enabled]);
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    setCallOnResize(true);
+    if (!enabled) {
+      return;
+    }
+    var KEYBOARD_OFFSET = 10;
+    switch (e.key) {
+      case _services.keys.ARROW_RIGHT:
+        e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
+        setFlyoutWidth(function (flyoutWidth) {
+          return getFlyoutMinMaxWidth(flyoutWidth + KEYBOARD_OFFSET * direction);
+        });
+        break;
+      case _services.keys.ARROW_LEFT:
+        e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
+        setFlyoutWidth(function (flyoutWidth) {
+          return getFlyoutMinMaxWidth(flyoutWidth - KEYBOARD_OFFSET * direction);
+        });
+    }
+  }, [getFlyoutMinMaxWidth, direction, enabled]);
+
+  // To reduce unnecessary calls, only fire onResize callback:
+  // 1. After initial mount / on user width change events only
+  // 2. If not currently mouse dragging
+  (0, _react.useEffect)(function () {
+    if (callOnResize && enabled) {
+      onResize === null || onResize === void 0 || onResize(flyoutWidth);
+    }
+  }, [onResize, callOnResize, flyoutWidth, enabled]);
+  var size = (0, _react.useMemo)(function () {
+    return enabled ? flyoutWidth || _size : _size;
+  }, [enabled, flyoutWidth, _size]);
+  return {
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    setFlyoutRef: setFlyoutRef,
+    size: size
+  };
+};

package/lib/components/flyout/use_flyout_z_index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEuiFlyoutZIndex = void 0;
+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
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * @internal
+ */
+
+var calculateZIndex = function calculateZIndex(baseLevel, isChildFlyout) {
+  var level = Number(baseLevel);
+  return {
+    // Child flyouts slide in from below and need to have a lower z-index
+    flyoutZIndex: isChildFlyout ? level - 1 : level,
+    maskZIndex: level - 2
+  };
+};
+
+/**
+ * @internal
+ */
+var useEuiFlyoutZIndex = exports.useEuiFlyoutZIndex = function useEuiFlyoutZIndex(_ref) {
+  var maskProps = _ref.maskProps,
+    isPushed = _ref.isPushed,
+    managedFlyoutIndex = _ref.managedFlyoutIndex,
+    isChildFlyout = _ref.isChildFlyout;
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var baseLevel = Number(euiTheme.levels.flyout);
+
+  // The default headerZindexLocation for EuiFlyout is "below"
+  // which is different from what EuiOverlayMask fallbacks to - see
+  // _flyout_overlay.tsx.
+  // We set z-index to mask level only when explicitly overridden
+  // via the maskProps prop
+  if (!isPushed && (maskProps === null || maskProps === void 0 ? void 0 : maskProps.headerZindexLocation) === 'above') {
+    baseLevel = Number(euiTheme.levels.mask);
+  }
+  baseLevel += managedFlyoutIndex;
+  return calculateZIndex(baseLevel, isChildFlyout);
+};

package/lib/components/overlay_mask/overlay_mask.js

@@ -44,13 +44,17 @@ var EuiOverlayMask = exports.EuiOverlayMask = function EuiOverlayMask(_ref) {
     headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'above' : _ref$headerZindexLoca,
     maskRef = _ref.maskRef,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var hasRendered = (0, _react.useRef)(false);
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     overlayMaskNode = _useState2[0],
     setOverlayMaskNode = _useState2[1];
   var combinedMaskRef = (0, _services.useCombinedRefs)([setOverlayMaskNode, maskRef]);
+  var handleAnimationEnd = (0, _react.useCallback)(function () {
+    hasRendered.current = true;
+  }, []);
   var styles = (0, _services.useEuiMemoizedStyles)(_overlay_mask.euiOverlayMaskStyles);
-  var cssStyles = (0, _css.cx)([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")]]);
+  var cssStyles = (0, _css.cx)([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")], hasRendered.current && styles.noAnimation]);
   (0, _react.useEffect)(function () {
     if (!overlayMaskNode) return;
     (0, _common.keysOf)(rest).forEach(function (key) {
@@ -61,7 +65,13 @@ var EuiOverlayMask = exports.EuiOverlayMask = function EuiOverlayMask(_ref) {
         overlayMaskNode.setAttribute(key, rest[key]);
       }
     });
-  }, [overlayMaskNode]); // eslint-disable-line react-hooks/exhaustive-deps
+    overlayMaskNode.addEventListener('animationend', handleAnimationEnd, {
+      once: true
+    });
+    return function () {
+      overlayMaskNode.removeEventListener('animationend', handleAnimationEnd);
+    };
+  }, [overlayMaskNode, handleAnimationEnd]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Note: Use `classList.add/remove` instead of setting the entire `className`
   // so as not to override any existing classes set by `EuiPortal`

package/lib/components/overlay_mask/overlay_mask.styles.js

@@ -6,20 +6,27 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiOverlayMaskStyles = void 0;
 var _css = require("@emotion/css");
 var _global_styling = require("../../global_styling");
-/*
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
  * 2.0 and the Server Side Public License, v 1; you may not use this file except
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
 var euiOverlayMaskStyles = exports.euiOverlayMaskStyles = function euiOverlayMaskStyles(_ref) {
   var euiTheme = _ref.euiTheme,
     highContrastMode = _ref.highContrastMode;
   return {
-    euiOverlayMask: /*#__PURE__*/(0, _css.css)("position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " display:flex;align-items:center;justify-content:center;animation:", _global_styling.euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", highContrastMode ? euiTheme.components.overlayMaskBackgroundHighContrast : euiTheme.components.overlayMaskBackground, ";;label:euiOverlayMask;"),
+    euiOverlayMask: /*#__PURE__*/(0, _css.css)("position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " display:flex;align-items:center;justify-content:center;animation:", _global_styling.euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in forwards;animation-iteration-count:1;background:", highContrastMode ? euiTheme.components.overlayMaskBackgroundHighContrast : euiTheme.components.overlayMaskBackground, ";;label:euiOverlayMask;"),
     aboveHeader: /*#__PURE__*/(0, _css.css)("z-index:", euiTheme.levels.mask, ";;label:aboveHeader;"),
-    belowHeader: /*#__PURE__*/(0, _css.css)("z-index:", euiTheme.levels.maskBelowHeader, ";", (0, _global_styling.logicalCSS)('top', 'var(--euiFixedHeadersOffset, 0)'), ";;label:belowHeader;")
+    belowHeader: /*#__PURE__*/(0, _css.css)("z-index:", euiTheme.levels.maskBelowHeader, ";", (0, _global_styling.logicalCSS)('top', 'var(--euiFixedHeadersOffset, 0)'), ";;label:belowHeader;"),
+    noAnimation: /*#__PURE__*/(0, _css.css)(process.env.NODE_ENV === "production" ? {
+      name: "lqr4xc-noAnimation",
+      styles: "animation:none;label:noAnimation;"
+    } : {
+      name: "lqr4xc-noAnimation",
+      styles: "animation:none;label:noAnimation;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    })
   };
 };

package/lib/components/provider/provider.js

@@ -15,6 +15,7 @@ var _cache = require("./cache");
 var _system_defaults = require("./system_defaults");
 var _nested = require("./nested");
 var _component_defaults = require("./component_defaults");
+var _manager = require("../flyout/manager");
 var _react2 = require("@emotion/react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*
@@ -86,5 +87,5 @@ var EuiProvider = exports.EuiProvider = function EuiProvider(_ref) {
     children: Utilities && (0, _react2.jsx)(Utilities, null)
   })), (0, _react2.jsx)(_component_defaults.EuiComponentDefaultsProvider, {
     componentDefaults: componentDefaults
-  }, children)))));
+  }, (0, _react2.jsx)(_manager.EuiFlyoutManager, null, children))))));
 };

package/optimize/es/components/collapsible_nav/collapsible_nav.js

@@ -84,6 +84,7 @@ export var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
   });
   var flyout = ___EmotionJSX(EuiFlyout, _extends({
     id: flyoutID,
+    session: "never",
     css: cssStyles,
     className: classes
     // Flyout props we set different defaults for

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -144,6 +144,7 @@ var _EuiCollapsibleNavBeta = function _EuiCollapsibleNavBeta(_ref) {
   }, rest, {
     // EuiCollapsibleNav is significantly less permissive than EuiFlyout
     id: flyoutID,
+    session: "never",
     css: cssStyles,
     className: classes,
     size: width,

package/optimize/es/components/flyout/_flyout_overlay.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/extends";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useMemo } from 'react';
+import { css, cx } from '@emotion/css';
+import { EuiOverlayMask } from '../overlay_mask';
+import { EuiPortal } from '../portal';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var getEuiFlyoutOverlayStyles = function getEuiFlyoutOverlayStyles(zIndex) {
+  /*
+  This needs to have !important to override the default EuiOverlayMask
+  z-index based on the headerZindexLocation prop. Using the style attribute
+  doesn't work since EuiOverlayMask requires a string style prop that
+  causes React errors in the test environment.
+  */
+  return /*#__PURE__*/css("z-index:", zIndex, "!important;;label:getEuiFlyoutOverlayStyles;");
+};
+
+/**
+ * Light wrapper for conditionally rendering portals or overlay masks:
+ *  - If ownFocus is set, wrap with an overlay and allow the user to click it to close it.
+ *  - Otherwise still wrap within an EuiPortal so it appends to the bottom of the window.
+ * Push flyouts have no overlay OR portal behavior.
+ *
+ * @internal
+ */
+export var EuiFlyoutOverlay = function EuiFlyoutOverlay(_ref) {
+  var children = _ref.children,
+    isPushed = _ref.isPushed,
+    maskProps = _ref.maskProps,
+    hasOverlayMask = _ref.hasOverlayMask,
+    maskZIndex = _ref.maskZIndex;
+  var styles = useMemo(function () {
+    return getEuiFlyoutOverlayStyles(maskZIndex);
+  }, [maskZIndex]);
+  var content = children;
+  if (!isPushed || hasOverlayMask) {
+    content = ___EmotionJSX(EuiPortal, null, content);
+  }
+  var classes = cx(maskProps === null || maskProps === void 0 ? void 0 : maskProps.className, styles);
+  return ___EmotionJSX(React.Fragment, null, hasOverlayMask && ___EmotionJSX(EuiOverlayMask, _extends({
+    headerZindexLocation: "below"
+  }, maskProps, {
+    className: classes
+  })), content);
+};

package/optimize/es/components/flyout/_flyout_resize_button.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["type", "side", "ownFocus", "isPushed"];
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { useEuiMemoizedStyles } from '../../services';
+import { EuiResizableButton } from '../resizable_container';
+import { euiFlyoutResizeButtonStyles } from './_flyout_resize_button.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiFlyoutResizeButton = function EuiFlyoutResizeButton(_ref) {
+  var type = _ref.type,
+    side = _ref.side,
+    ownFocus = _ref.ownFocus,
+    isPushed = _ref.isPushed,
+    resizableButtonProps = _objectWithoutProperties(_ref, _excluded);
+  var hasOverlay = ownFocus && type === 'overlay';
+  var styles = useEuiMemoizedStyles(euiFlyoutResizeButtonStyles);
+  var cssStyles = [styles.root, styles[type][side], !hasOverlay && styles.noOverlay.root, !hasOverlay && styles.noOverlay[side]];
+  return ___EmotionJSX(EuiResizableButton, _extends({
+    isHorizontal: true,
+    indicator: "border",
+    css: cssStyles
+  }, resizableButtonProps));
+};

package/optimize/es/components/flyout/{flyout_resizable.styles.js → _flyout_resize_button.styles.js}

@@ -26,25 +26,25 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "1cw850z-noOverlay",
-  styles: "margin-inline:0;label:noOverlay;"
+  name: "10l1ho9-root",
+  styles: "margin-inline:0;label:root;"
 } : {
-  name: "1cw850z-noOverlay",
-  styles: "margin-inline:0;label:noOverlay;",
+  name: "10l1ho9-root",
+  styles: "margin-inline:0;label:root;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref4 = process.env.NODE_ENV === "production" ? {
-  name: "1gfwqnd-euiFlyoutResizableButton",
-  styles: "position:absolute;label:euiFlyoutResizableButton;"
+  name: "1yicr0l-root",
+  styles: "position:absolute;label:root;"
 } : {
-  name: "1gfwqnd-euiFlyoutResizableButton",
-  styles: "position:absolute;label:euiFlyoutResizableButton;",
+  name: "1yicr0l-root",
+  styles: "position:absolute;label:root;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref5) {
+export var euiFlyoutResizeButtonStyles = function euiFlyoutResizeButtonStyles(_ref5) {
   var euiTheme = _ref5.euiTheme;
   return {
-    euiFlyoutResizableButton: _ref4,
+    root: _ref4,
     overlay: {
       left: /*#__PURE__*/css(logicalCSS('right', 0), ";;label:left;"),
       right: /*#__PURE__*/css(logicalCSS('left', 0), ";;label:right;")
@@ -54,7 +54,7 @@ export var euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonSty
       right: /*#__PURE__*/css(logicalCSS('left', "-".concat(euiTheme.border.width.thick)), ";;label:right;")
     },
     noOverlay: {
-      noOverlay: _ref3,
+      root: _ref3,
       left: _ref2,
       right: _ref
     }

package/optimize/es/components/flyout/const.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/** Allowed flyout render types. */
+export var FLYOUT_TYPES = ['push', 'overlay'];
+/** Type representing a supported flyout render type. */
+
+/** Allowed flyout attachment sides. */
+export var FLYOUT_SIDES = ['left', 'right'];
+/** Type representing a supported flyout side. */
+
+/** Allowed named flyout sizes used by the manager. */
+export var FLYOUT_SIZES = ['s', 'm', 'l', 'fill'];
+/** Type representing a supported named flyout size. */
+
+/** Allowed padding sizes for flyout content. */
+export var FLYOUT_PADDING_SIZES = ['none', 's', 'm', 'l'];
+/** Type representing a supported flyout padding size. */
+
+/** Default minimum breakpoint at which push-type flyouts begin to push content. */
+export var DEFAULT_PUSH_MIN_BREAKPOINT = 'l';
+/** Default flyout type when none is provided. */
+export var DEFAULT_TYPE = 'overlay';
+/** Default side where flyouts anchor when none is provided. */
+export var DEFAULT_SIDE = 'right';
+/** Default named flyout size. */
+export var DEFAULT_SIZE = 'm';
+/** Default padding size inside flyouts. */
+export var DEFAULT_PADDING_SIZE = 'l';
+
+/**
+ * Custom type checker for named flyout sizes since the prop
+ * `size` can also be CSSProperties['width'] (string | number)
+ */
+export function isEuiFlyoutSizeNamed(value) {
+  return FLYOUT_SIZES.includes(value);
+}