@elastic/eui 109.2.0 → 110.0.0-snapshot.1764783610243

package/es/components/flyout/flyout_menu.js

@@ -0,0 +1,241 @@
+var _excluded = ["className", "title", "titleId", "hideTitle", "hideCloseButton", "historyItems", "showBackButton", "backButtonProps", "customActions"];
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+import PropTypes from "prop-types";
+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; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/*
+ * 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 classNames from 'classnames';
+import React, { useContext, useState } from 'react';
+import { useEuiMemoizedStyles } from '../../services';
+import { EuiButtonEmpty, EuiButtonIcon } from '../button';
+import { EuiFlexGroup, EuiFlexItem } from '../flex';
+import { EuiListGroup, EuiListGroupItem } from '../list_group';
+import { EuiPopover } from '../popover';
+import { EuiTitle } from '../title';
+import { EuiFlyoutCloseButton } from './_flyout_close_button';
+import { euiFlyoutMenuStyles } from './flyout_menu.styles';
+import { EuiFlyoutMenuContext } from './flyout_menu_context';
+import { EuiI18n, useEuiI18n } from '../i18n';
+
+/**
+ * History item for the flyout menu history popover
+ */
+
+/**
+ * Custom action item for the flyout menu component
+ */
+
+/**
+ * Props for EuiFlyoutMenu
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var BackButton = function BackButton(props) {
+  return ___EmotionJSX(EuiButtonEmpty, _extends({
+    size: "xs",
+    color: "text",
+    iconType: "editorUndo"
+  }, props), ___EmotionJSX(EuiI18n, {
+    token: "euiFlyoutMenu.back",
+    default: "Back"
+  }));
+};
+var HistoryPopover = function HistoryPopover(_ref) {
+  var items = _ref.items;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPopoverOpen = _useState2[0],
+    setIsPopoverOpen = _useState2[1];
+  var handlePopoverButtonClick = function handlePopoverButtonClick() {
+    setIsPopoverOpen(!isPopoverOpen);
+  };
+  return ___EmotionJSX(EuiPopover, {
+    button: ___EmotionJSX(EuiButtonIcon, {
+      iconType: "arrowDown",
+      color: "text",
+      "aria-label": useEuiI18n('euiFlyoutMenu.history', 'History')
+    }),
+    isOpen: isPopoverOpen,
+    onClick: handlePopoverButtonClick,
+    closePopover: function closePopover() {
+      return setIsPopoverOpen(false);
+    },
+    panelPaddingSize: "xs",
+    anchorPosition: "downLeft"
+  }, ___EmotionJSX(EuiListGroup, {
+    gutterSize: "none"
+  }, items.map(function (item, index) {
+    return ___EmotionJSX(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
+ */
+export var 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 = _objectWithoutProperties(_ref2, _excluded);
+  var _useContext = useContext(EuiFlyoutMenuContext),
+    onClose = _useContext.onClose;
+  var styles = useEuiMemoizedStyles(euiFlyoutMenuStyles);
+  var classes = classNames('euiFlyoutMenu', className);
+  var titleNode;
+  if (title) {
+    titleNode = ___EmotionJSX(EuiTitle, {
+      size: "xxs",
+      id: titleId
+    }, ___EmotionJSX("h3", {
+      css: hideTitle && styles.euiFlyoutMenu__hiddenTitle
+    }, title));
+  }
+  var handleClose = function handleClose(event) {
+    onClose === null || onClose === void 0 || onClose(event);
+  };
+  var closeButton = ___EmotionJSX(EuiFlyoutCloseButton, {
+    onClose: handleClose,
+    side: "right",
+    closeButtonPosition: "inside"
+  });
+  return ___EmotionJSX("div", _extends({
+    className: classes,
+    css: styles.euiFlyoutMenu__container
+  }, rest), ___EmotionJSX(EuiFlexGroup, {
+    alignItems: "center",
+    justifyContent: "spaceBetween",
+    gutterSize: "none",
+    responsive: false
+  }, showBackButton && ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, ___EmotionJSX(BackButton, backButtonProps)), historyItems.length > 0 && ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, ___EmotionJSX(HistoryPopover, {
+    items: historyItems
+  })), titleNode && ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, titleNode), ___EmotionJSX(EuiFlexItem, {
+    grow: true
+  }), customActions && customActions.map(function (action, actionIndex) {
+    return ___EmotionJSX(EuiFlexItem, {
+      grow: false,
+      key: "action-index-flex-item-".concat(actionIndex),
+      css: styles.euiFlyoutMenu__actions
+    }, ___EmotionJSX(EuiButtonIcon, {
+      key: "action-index-icon-".concat(actionIndex),
+      "aria-label": action['aria-label'],
+      iconType: action.iconType,
+      onClick: action.onClick,
+      color: "text",
+      size: "s"
+    }));
+  }), !hideCloseButton && ___EmotionJSX(EuiFlexItem, {
+    grow: false,
+    css: styles.euiFlyoutMenu__spacer
+  })), !hideCloseButton && closeButton);
+};
+EuiFlyoutMenu.propTypes = {
+  className: PropTypes.string,
+  "aria-label": PropTypes.string,
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.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.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.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.bool,
+  /**
+       * Hides the close button in the menu component
+       * @default false
+       */
+  hideCloseButton: PropTypes.bool,
+  /**
+       * Shows a back button in the menu component
+       * @default false
+       */
+  showBackButton: PropTypes.bool,
+  /**
+       * Props to pass to the back button, such as `onClick` handler
+       */
+  backButtonProps: PropTypes.any,
+  /**
+       * List of history items for the history popover
+       */
+  historyItems: PropTypes.arrayOf(PropTypes.shape({
+    /**
+       * Title for the history item
+       */
+    title: PropTypes.string.isRequired,
+    /**
+       * onClick handler for the history item
+       */
+    onClick: PropTypes.func.isRequired
+  }).isRequired),
+  /**
+       * List of custom action items for the menu component
+       */
+  customActions: PropTypes.arrayOf(PropTypes.shape({
+    /**
+       * Icon type for the action button
+       */
+    iconType: PropTypes.string.isRequired,
+    /**
+       * onClick handler for the action button
+       */
+    onClick: PropTypes.func.isRequired,
+    /**
+       * Aria label for the action button
+       */
+    "aria-label": PropTypes.string.isRequired
+  }).isRequired)
+};

package/es/components/flyout/flyout_menu.styles.js

@@ -0,0 +1,19 @@
+/*
+ * 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 { css } from '@emotion/react';
+import { euiScreenReaderOnly } from '../accessibility';
+export var euiFlyoutMenuStyles = function euiFlyoutMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFlyoutMenu__container: /*#__PURE__*/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__*/css("padding-inline:", euiTheme.size.m, ";;label:euiFlyoutMenu__spacer;"),
+    euiFlyoutMenu__actions: /*#__PURE__*/css("block-size:calc(", euiTheme.size.m, " * 1.8);;label:euiFlyoutMenu__actions;"),
+    euiFlyoutMenu__hiddenTitle: /*#__PURE__*/css(euiScreenReaderOnly(), ";;label:euiFlyoutMenu__hiddenTitle;")
+  };
+};

package/{optimize/es/components/flyout/flyout_context.js → es/components/flyout/flyout_menu_context.js}

@@ -7,10 +7,4 @@
  */
 
 import { createContext } from 'react';
-
-/**
- * Context shared between the main and child flyouts
- * @internal
- */
-
-export var EuiFlyoutContext = /*#__PURE__*/createContext(null);
+export var EuiFlyoutMenuContext = /*#__PURE__*/createContext({});

package/es/components/flyout/flyout_parent_context.js

@@ -0,0 +1,36 @@
+/*
+ * 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, { createContext, useContext } from 'react';
+
+/**
+ * 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.
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiFlyoutParentContext = /*#__PURE__*/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.
+ */
+export var EuiFlyoutParentProvider = function EuiFlyoutParentProvider(_ref) {
+  var children = _ref.children;
+  return ___EmotionJSX(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.
+ */
+export var useIsInsideParentFlyout = function useIsInsideParentFlyout() {
+  return useContext(EuiFlyoutParentContext);
+};

package/es/components/flyout/flyout_resizable.js

@@ -1,13 +1,4 @@
-var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "ownFocus", "children"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-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; }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -16,144 +7,42 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import React, { forwardRef, useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { keys, useCombinedRefs, useEuiMemoizedStyles } from '../../services';
-import { EuiResizableButton } from '../resizable_container';
-import { getPosition } from '../resizable_container/helpers';
+import React, { forwardRef } from 'react';
+import PropTypes from "prop-types";
 import { EuiFlyout } from './flyout';
-import { euiFlyoutResizableButtonStyles } from './flyout_resizable.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 // If not omitted, the correct props don't show up in the docs prop table
 
-export var EuiFlyoutResizable = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
-  var hasOverlay = type === 'overlay' && ownFocus;
-  var styles = useEuiMemoizedStyles(euiFlyoutResizableButtonStyles);
-  var cssStyles = [styles.euiFlyoutResizableButton, styles[type][side], !hasOverlay && styles.noOverlay.noOverlay, !hasOverlay && styles.noOverlay[side]];
-  var getFlyoutMinMaxWidth = useCallback(function (width) {
-    return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
-    );
-  }, [minWidth, maxWidth]);
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    flyoutWidth = _useState2[0],
-    setFlyoutWidth = _useState2[1];
-  var _useState3 = 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 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    flyoutRef = _useState6[0],
-    setFlyoutRef = _useState6[1];
-  var setRefs = useCombinedRefs([setFlyoutRef, ref]);
-  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`
-  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 = useRef(0);
-  var initialMouseX = useRef(0);
-
-  // Account for flyout side and logical property direction
-  var direction = 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 = useCallback(function (e) {
-    var mouseOffset = getPosition(e, true) - initialMouseX.current;
-    var changedFlyoutWidth = initialWidth.current + mouseOffset * direction;
-    setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
-  }, [getFlyoutMinMaxWidth, direction]);
-  var onMouseUp = 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 = useCallback(function (e) {
-    var _flyoutRef$offsetWidt;
-    setCallOnResize(false);
-    initialMouseX.current = 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 = useCallback(function (e) {
-    setCallOnResize(true);
-    var KEYBOARD_OFFSET = 10;
-    switch (e.key) {
-      case 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 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]);
-
-  // To reduce unnecessary calls, only fire onResize callback:
-  // 1. After initial mount / on user width change events only
-  // 2. If not currently mouse dragging
-  useEffect(function () {
-    if (callOnResize) {
-      onResize === null || onResize === void 0 || onResize(flyoutWidth);
-    }
-  }, [onResize, callOnResize, flyoutWidth]);
-  return ___EmotionJSX(EuiFlyout, _extends({}, rest, {
-    size: flyoutWidth || size,
-    maxWidth: maxWidth,
-    side: side,
-    type: type,
-    ownFocus: ownFocus,
-    ref: setRefs
-  }), ___EmotionJSX(EuiResizableButton, {
-    isHorizontal: true,
-    indicator: "border",
-    css: cssStyles,
-    onMouseDown: onMouseDown,
-    onTouchStart: onMouseDown,
-    onKeyDown: onKeyDown
-  }), children);
+export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (props, ref) {
+  return ___EmotionJSX(EuiFlyout, _extends({
+    ref: ref
+  }, props, {
+    resizable: true
+  }));
 });
+EuiFlyoutResizable.propTypes = {
+  maxWidth: PropTypes.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.oneOfType([PropTypes.any.isRequired, PropTypes.any.isRequired, PropTypes.any.isRequired]),
+  /**
+     * Callback fired when the flyout becomes active/visible, which may happen programmatically from history navigation.
+     */
+  onActive: PropTypes.func,
+  /**
+     * The HTML element to render as the flyout container.
+     */
+  as: PropTypes.any
+};
 EuiFlyoutResizable.displayName = 'EuiFlyoutResizable';

package/es/components/flyout/hooks.js

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

package/es/components/flyout/index.js

@@ -12,5 +12,8 @@ export { EuiFlyoutFooter } from './flyout_footer';
 export { EuiFlyoutHeader } from './flyout_header';
 export { euiFlyoutSlideInRight, euiFlyoutSlideInLeft } from './flyout.styles';
 export { EuiFlyoutResizable } from './flyout_resizable';
-export { EuiFlyoutChild } from './flyout_child';
-export { EuiFlyoutSessionProvider, useEuiFlyoutSession } from './sessions';
+export { EuiFlyoutMenu } from './flyout_menu';
+
+// Hooks for using Manager-based flyouts
+export { useIsInManagedFlyout, useHasActiveSession } from './manager';
+export { useIsInsideParentFlyout } from './flyout_parent_context';