@elastic/eui 110.0.0 → 111.0.0

package/test-env/components/flyout/flyout_menu.js

@@ -0,0 +1,241 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiFlyoutMenu = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../services");
+var _button = require("../button");
+var _flex = require("../flex");
+var _list_group = require("../list_group");
+var _popover = require("../popover");
+var _title = require("../title");
+var _flyout_close_button = require("./_flyout_close_button");
+var _flyout_menu = require("./flyout_menu.styles");
+var _flyout_menu_context = require("./flyout_menu_context");
+var _i18n = require("../i18n");
+var _react2 = require("@emotion/react");
+var _excluded = ["className", "title", "titleId", "hideTitle", "hideCloseButton", "historyItems", "showBackButton", "backButtonProps", "customActions"];
+/*
+ * 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.
+ */
+/**
+ * History item for the flyout menu history popover
+ */
+/**
+ * Custom action item for the flyout menu component
+ */
+/**
+ * Props for EuiFlyoutMenu
+ */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var BackButton = function BackButton(props) {
+  return (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
+    size: "xs",
+    color: "text",
+    iconType: "editorUndo"
+  }, props), (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiFlyoutMenu.back",
+    default: "Back"
+  }));
+};
+var HistoryPopover = function HistoryPopover(_ref) {
+  var items = _ref.items;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isPopoverOpen = _useState2[0],
+    setIsPopoverOpen = _useState2[1];
+  var handlePopoverButtonClick = function handlePopoverButtonClick() {
+    setIsPopoverOpen(!isPopoverOpen);
+  };
+  return (0, _react2.jsx)(_popover.EuiPopover, {
+    button: (0, _react2.jsx)(_button.EuiButtonIcon, {
+      iconType: "arrowDown",
+      color: "text",
+      "aria-label": (0, _i18n.useEuiI18n)('euiFlyoutMenu.history', 'History')
+    }),
+    isOpen: isPopoverOpen,
+    onClick: handlePopoverButtonClick,
+    closePopover: function closePopover() {
+      return setIsPopoverOpen(false);
+    },
+    panelPaddingSize: "xs",
+    anchorPosition: "downLeft"
+  }, (0, _react2.jsx)(_list_group.EuiListGroup, {
+    gutterSize: "none"
+  }, items.map(function (item, index) {
+    return (0, _react2.jsx)(_list_group.EuiListGroupItem, {
+      key: "history-item-".concat(index),
+      label: item.title,
+      size: "s",
+      onClick: function onClick() {
+        item.onClick();
+        setIsPopoverOpen(false);
+      }
+    }, item.title);
+  })));
+};
+
+/**
+ * The component for the top menu bar inside a flyout. Since this is a private
+ * component, rendering is controlled using the `flyoutMenuProps` prop on
+ * `EuiFlyout`. In managed session flyouts, the Flyout Manager controls a back
+ * button and history popover for navigating to different flyout sessions
+ * within the managed context.
+ *
+ * @private
+ */
+var EuiFlyoutMenu = exports.EuiFlyoutMenu = function EuiFlyoutMenu(_ref2) {
+  var className = _ref2.className,
+    title = _ref2.title,
+    titleId = _ref2.titleId,
+    hideTitle = _ref2.hideTitle,
+    hideCloseButton = _ref2.hideCloseButton,
+    _ref2$historyItems = _ref2.historyItems,
+    historyItems = _ref2$historyItems === void 0 ? [] : _ref2$historyItems,
+    showBackButton = _ref2.showBackButton,
+    backButtonProps = _ref2.backButtonProps,
+    customActions = _ref2.customActions,
+    rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var _useContext = (0, _react.useContext)(_flyout_menu_context.EuiFlyoutMenuContext),
+    onClose = _useContext.onClose;
+  var styles = (0, _services.useEuiMemoizedStyles)(_flyout_menu.euiFlyoutMenuStyles);
+  var classes = (0, _classnames.default)('euiFlyoutMenu', className);
+  var titleNode;
+  if (title) {
+    titleNode = (0, _react2.jsx)(_title.EuiTitle, {
+      size: "xxs",
+      id: titleId
+    }, (0, _react2.jsx)("h3", {
+      css: hideTitle && styles.euiFlyoutMenu__hiddenTitle
+    }, title));
+  }
+  var handleClose = function handleClose(event) {
+    onClose === null || onClose === void 0 || onClose(event);
+  };
+  var closeButton = (0, _react2.jsx)(_flyout_close_button.EuiFlyoutCloseButton, {
+    onClose: handleClose,
+    side: "right",
+    closeButtonPosition: "inside"
+  });
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    className: classes,
+    css: styles.euiFlyoutMenu__container
+  }, rest), (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    alignItems: "center",
+    justifyContent: "spaceBetween",
+    gutterSize: "none",
+    responsive: false
+  }, showBackButton && (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, (0, _react2.jsx)(BackButton, backButtonProps)), historyItems.length > 0 && (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, (0, _react2.jsx)(HistoryPopover, {
+    items: historyItems
+  })), titleNode && (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, titleNode), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: true
+  }), customActions && customActions.map(function (action, actionIndex) {
+    return (0, _react2.jsx)(_flex.EuiFlexItem, {
+      grow: false,
+      key: "action-index-flex-item-".concat(actionIndex),
+      css: styles.euiFlyoutMenu__actions
+    }, (0, _react2.jsx)(_button.EuiButtonIcon, {
+      key: "action-index-icon-".concat(actionIndex),
+      "aria-label": action['aria-label'],
+      iconType: action.iconType,
+      onClick: action.onClick,
+      color: "text",
+      size: "s"
+    }));
+  }), !hideCloseButton && (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false,
+    css: styles.euiFlyoutMenu__spacer
+  })), !hideCloseButton && closeButton);
+};
+EuiFlyoutMenu.propTypes = {
+  className: _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
+  /**
+       * An id to use for the title element. Useful for setting aria-labelledby on the flyout.
+       * Example:
+       * ```jsx
+       * <EuiFlyout
+       *   aria-labelledby="myMenuTitleId"
+       *   flyoutMenuProps={{ title: 'Menu title', titleId: 'myMenuTitleId' }
+       * >
+       *  ...
+       * </EuiFlyout>
+       * ```
+       */
+  titleId: _propTypes.default.string,
+  /**
+       * Title for the menu component. In a managed flyout context, the title is used to indicate the flyout session for history navigation.
+       */
+  title: _propTypes.default.node,
+  /**
+       * Hides the title in the `EuiFlyoutMenu`. This is useful when the title is already shown in an `EuiFlyoutHeader`.
+       * @default true for main flyout in a managed flyout session; false otherwise
+       */
+  hideTitle: _propTypes.default.bool,
+  /**
+       * Hides the close button in the menu component
+       * @default false
+       */
+  hideCloseButton: _propTypes.default.bool,
+  /**
+       * Shows a back button in the menu component
+       * @default false
+       */
+  showBackButton: _propTypes.default.bool,
+  /**
+       * Props to pass to the back button, such as `onClick` handler
+       */
+  backButtonProps: _propTypes.default.any,
+  /**
+       * List of history items for the history popover
+       */
+  historyItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+       * Title for the history item
+       */
+    title: _propTypes.default.string.isRequired,
+    /**
+       * onClick handler for the history item
+       */
+    onClick: _propTypes.default.func.isRequired
+  }).isRequired),
+  /**
+       * List of custom action items for the menu component
+       */
+  customActions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+       * Icon type for the action button
+       */
+    iconType: _propTypes.default.string.isRequired,
+    /**
+       * onClick handler for the action button
+       */
+    onClick: _propTypes.default.func.isRequired,
+    /**
+       * Aria label for the action button
+       */
+    "aria-label": _propTypes.default.string.isRequired
+  }).isRequired)
+};

package/test-env/components/flyout/flyout_menu.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFlyoutMenuStyles = void 0;
+var _react = require("@emotion/react");
+var _accessibility = require("../accessibility");
+/*
+ * 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 euiFlyoutMenuStyles = exports.euiFlyoutMenuStyles = function euiFlyoutMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFlyoutMenu__container: /*#__PURE__*/(0, _react.css)("block-size:calc(", euiTheme.size.m, " * 3.5);flex-shrink:0;padding-block:", euiTheme.size.s, ";padding-inline:", euiTheme.size.s, ";border-block-end:", euiTheme.border.width.thin, " solid ", euiTheme.border.color, ";padding-block-start:calc(", euiTheme.size.m, " * 0.8);.euiTitle{padding-inline:", euiTheme.size.s, ";};label:euiFlyoutMenu__container;"),
+    euiFlyoutMenu__spacer: /*#__PURE__*/(0, _react.css)("padding-inline:", euiTheme.size.m, ";;label:euiFlyoutMenu__spacer;"),
+    euiFlyoutMenu__actions: /*#__PURE__*/(0, _react.css)("block-size:calc(", euiTheme.size.m, " * 1.8);;label:euiFlyoutMenu__actions;"),
+    euiFlyoutMenu__hiddenTitle: /*#__PURE__*/(0, _react.css)((0, _accessibility.euiScreenReaderOnly)(), ";;label:euiFlyoutMenu__hiddenTitle;")
+  };
+};

package/test-env/components/flyout/{flyout_context.js → flyout_menu_context.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiFlyoutContext = void 0;
+exports.EuiFlyoutMenuContext = void 0;
 var _react = require("react");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -13,9 +13,4 @@ var _react = require("react");
  * Side Public License, v 1.
  */
 
-/**
- * Context shared between the main and child flyouts
- * @internal
- */
-
-var EuiFlyoutContext = exports.EuiFlyoutContext = /*#__PURE__*/(0, _react.createContext)(null);
+var EuiFlyoutMenuContext = exports.EuiFlyoutMenuContext = /*#__PURE__*/(0, _react.createContext)({});

package/test-env/components/flyout/flyout_parent_context.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsInsideParentFlyout = exports.EuiFlyoutParentProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/*
+ * 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.
+ */
+
+/**
+ * Context to track if we're inside a parent flyout's children.
+ * This allows nested flyouts to automatically inherit the session
+ * without requiring explicit `session="inherit"` prop.
+ */var EuiFlyoutParentContext = /*#__PURE__*/(0, _react.createContext)(false);
+
+/**
+ * Provider that wraps a flyout's children to indicate they're inside a parent flyout.
+ * Nested flyouts can use this to automatically default to session inheritance.
+ */
+var EuiFlyoutParentProvider = exports.EuiFlyoutParentProvider = function EuiFlyoutParentProvider(_ref) {
+  var children = _ref.children;
+  return (0, _react2.jsx)(EuiFlyoutParentContext.Provider, {
+    value: true
+  }, children);
+};
+
+/**
+ * Hook that returns `true` when called within a parent flyout's children.
+ * Used to automatically determine if a nested flyout should inherit the session.
+ */
+var useIsInsideParentFlyout = exports.useIsInsideParentFlyout = function useIsInsideParentFlyout() {
+  return (0, _react.useContext)(EuiFlyoutParentContext);
+};

package/test-env/components/flyout/flyout_resizable.js

@@ -7,16 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiFlyoutResizable = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _services = require("../../services");
-var _resizable_container = require("../resizable_container");
-var _helpers = require("../resizable_container/helpers");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _flyout = require("./flyout");
-var _flyout_resizable = require("./flyout_resizable.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "ownFocus", "children"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -24,139 +20,39 @@ var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "ow
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-// If not omitted, the correct props don't show up in the docs prop table
-
-var EuiFlyoutResizable = exports.EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var size = _ref.size,
-    maxWidth = _ref.maxWidth,
-    _ref$minWidth = _ref.minWidth,
-    minWidth = _ref$minWidth === void 0 ? 200 : _ref$minWidth,
-    onResize = _ref.onResize,
-    _ref$side = _ref.side,
-    side = _ref$side === void 0 ? 'right' : _ref$side,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'overlay' : _ref$type,
-    _ref$ownFocus = _ref.ownFocus,
-    ownFocus = _ref$ownFocus === void 0 ? true : _ref$ownFocus,
-    children = _ref.children,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var hasOverlay = type === 'overlay' && ownFocus;
-  var styles = (0, _services.useEuiMemoizedStyles)(_flyout_resizable.euiFlyoutResizableButtonStyles);
-  var cssStyles = [styles.euiFlyoutResizableButton, styles[type][side], !hasOverlay && styles.noOverlay.noOverlay, !hasOverlay && styles.noOverlay[side]];
-  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 = (0, _slicedToArray2.default)(_useState, 2),
-    flyoutWidth = _useState2[0],
-    setFlyoutWidth = _useState2[1];
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_useState5, 2),
-    flyoutRef = _useState6[0],
-    setFlyoutRef = _useState6[1];
-  var setRefs = (0, _services.useCombinedRefs)([setFlyoutRef, ref]);
-  (0, _react.useEffect)(function () {
-    if (!flyoutWidth && flyoutRef) {
-      setCallOnResize(false); // Don't call `onResize` for non-user width changes
-      setFlyoutWidth(getFlyoutMinMaxWidth(flyoutRef.offsetWidth));
-    }
-  }, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth]);
-
-  // Update flyout width when consumers pass in a new `size`
-  (0, _react.useEffect)(function () {
-    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]);
-
-  // 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) {
-    var mouseOffset = (0, _helpers.getPosition)(e, true) - initialMouseX.current;
-    var changedFlyoutWidth = initialWidth.current + mouseOffset * direction;
-    setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
-  }, [getFlyoutMinMaxWidth, direction]);
-  var onMouseUp = (0, _react.useCallback)(function () {
-    setCallOnResize(true);
-    initialMouseX.current = 0;
-    window.removeEventListener('mousemove', onMouseMove);
-    window.removeEventListener('mouseup', onMouseUp);
-    window.removeEventListener('touchmove', onMouseMove);
-    window.removeEventListener('touchend', onMouseUp);
-  }, [onMouseMove]);
-  var onMouseDown = (0, _react.useCallback)(function (e) {
-    var _flyoutRef$offsetWidt;
-    setCallOnResize(false);
-    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]);
-  var onKeyDown = (0, _react.useCallback)(function (e) {
-    setCallOnResize(true);
-    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]);
+// If not omitted, the correct props don't show up in the docs prop table
 
-  // 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) {
-      onResize === null || onResize === void 0 || onResize(flyoutWidth);
-    }
-  }, [onResize, callOnResize, flyoutWidth]);
-  return (0, _react2.jsx)(_flyout.EuiFlyout, (0, _extends2.default)({}, rest, {
-    size: flyoutWidth || size,
-    maxWidth: maxWidth,
-    side: side,
-    type: type,
-    ownFocus: ownFocus,
-    ref: setRefs
-  }), (0, _react2.jsx)(_resizable_container.EuiResizableButton, {
-    isHorizontal: true,
-    indicator: "border",
-    css: cssStyles,
-    onMouseDown: onMouseDown,
-    onTouchStart: onMouseDown,
-    onKeyDown: onKeyDown
-  }), children);
+var EuiFlyoutResizable = exports.EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return (0, _react2.jsx)(_flyout.EuiFlyout, (0, _extends2.default)({
+    ref: ref
+  }, props, {
+    resizable: true
+  }));
 });
+EuiFlyoutResizable.propTypes = {
+  maxWidth: _propTypes.default.number,
+  /**
+     * Controls the way the session is managed for this flyout.
+     * - `start`: Creates a new flyout session. Use this for the main flyout.
+     * - `inherit`: Inherits an existing session if one is active, otherwise functions as a standard flyout.
+     * - `never`: Disregards session management and always functions as a standard flyout.
+     *
+     * When the `session` prop is undefined (not set), the flyout will automatically inherit from
+     * a parent flyout if it's nested inside one. Otherwise, it defaults to `never`.
+     *
+     * Check out [EuiFlyout session management](https://eui.elastic.co/docs/components/containers/flyout/session-management)
+     * documentation to learn more.
+     * @default undefined (auto-inherit when nested, otherwise 'never')
+     */
+  session: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.any.isRequired, _propTypes.default.any.isRequired]),
+  /**
+     * Callback fired when the flyout becomes active/visible, which may happen programmatically from history navigation.
+     */
+  onActive: _propTypes.default.func,
+  /**
+     * The HTML element to render as the flyout container.
+     */
+  as: _propTypes.default.any
+};
 EuiFlyoutResizable.displayName = 'EuiFlyoutResizable';

package/test-env/components/flyout/hooks.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsPushed = void 0;
+var _services = require("../../services");
+var _component_defaults = require("../provider/component_defaults");
+var _const = require("./const");
+/*
+ * 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.
+ */
+
+/**
+ * Determines if a flyout should be rendered in a "pushed" state based on its
+ * configuration and the current window size.
+ */
+var useIsPushed = exports.useIsPushed = function useIsPushed(props) {
+  var _usePropsWithComponen = (0, _component_defaults.usePropsWithComponentDefaults)('EuiFlyout', props),
+    _usePropsWithComponen2 = _usePropsWithComponen.type,
+    type = _usePropsWithComponen2 === void 0 ? _const.DEFAULT_TYPE : _usePropsWithComponen2,
+    _usePropsWithComponen3 = _usePropsWithComponen.pushMinBreakpoint,
+    pushMinBreakpoint = _usePropsWithComponen3 === void 0 ? _const.DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen3;
+  var windowIsLargeEnoughToPush = (0, _services.useIsWithinMinBreakpoint)(pushMinBreakpoint);
+  return type === 'push' && windowIsLargeEnoughToPush;
+};

package/test-env/components/flyout/index.js

@@ -15,12 +15,6 @@ Object.defineProperty(exports, "EuiFlyoutBody", {
     return _flyout_body.EuiFlyoutBody;
   }
 });
-Object.defineProperty(exports, "EuiFlyoutChild", {
-  enumerable: true,
-  get: function get() {
-    return _flyout_child.EuiFlyoutChild;
-  }
-});
 Object.defineProperty(exports, "EuiFlyoutFooter", {
   enumerable: true,
   get: function get() {
@@ -33,16 +27,16 @@ Object.defineProperty(exports, "EuiFlyoutHeader", {
     return _flyout_header.EuiFlyoutHeader;
   }
 });
-Object.defineProperty(exports, "EuiFlyoutResizable", {
+Object.defineProperty(exports, "EuiFlyoutMenu", {
   enumerable: true,
   get: function get() {
-    return _flyout_resizable.EuiFlyoutResizable;
+    return _flyout_menu.EuiFlyoutMenu;
   }
 });
-Object.defineProperty(exports, "EuiFlyoutSessionProvider", {
+Object.defineProperty(exports, "EuiFlyoutResizable", {
   enumerable: true,
   get: function get() {
-    return _sessions.EuiFlyoutSessionProvider;
+    return _flyout_resizable.EuiFlyoutResizable;
   }
 });
 Object.defineProperty(exports, "euiFlyoutSlideInLeft", {
@@ -57,10 +51,22 @@ Object.defineProperty(exports, "euiFlyoutSlideInRight", {
     return _flyout2.euiFlyoutSlideInRight;
   }
 });
-Object.defineProperty(exports, "useEuiFlyoutSession", {
+Object.defineProperty(exports, "useHasActiveSession", {
+  enumerable: true,
+  get: function get() {
+    return _manager.useHasActiveSession;
+  }
+});
+Object.defineProperty(exports, "useIsInManagedFlyout", {
+  enumerable: true,
+  get: function get() {
+    return _manager.useIsInManagedFlyout;
+  }
+});
+Object.defineProperty(exports, "useIsInsideParentFlyout", {
   enumerable: true,
   get: function get() {
-    return _sessions.useEuiFlyoutSession;
+    return _flyout_parent_context.useIsInsideParentFlyout;
   }
 });
 var _flyout = require("./flyout");
@@ -69,5 +75,6 @@ var _flyout_footer = require("./flyout_footer");
 var _flyout_header = require("./flyout_header");
 var _flyout2 = require("./flyout.styles");
 var _flyout_resizable = require("./flyout_resizable");
-var _flyout_child = require("./flyout_child");
-var _sessions = require("./sessions");
+var _flyout_menu = require("./flyout_menu");
+var _manager = require("./manager");
+var _flyout_parent_context = require("./flyout_parent_context");