@elastic/eui 106.1.0 → 106.2.0-snapshot.1757009122780

package/es/components/flyout/flyout.component.js

@@ -0,0 +1,378 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "pushAnimation", "focusTrapProps", "includeFixedHeadersInFocusTrap", "includeSelectorInFocusTrap", "aria-describedby", "id"];
+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); }
+import PropTypes from "prop-types";
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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
+ * 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.
+ */
+
+/* eslint-disable local/i18n */
+
+import React, { useEffect, useRef, useMemo, useCallback, useState, forwardRef } from 'react';
+import classnames from 'classnames';
+import { keys, EuiWindowEvent, useCombinedRefs, useEuiMemoizedStyles, useGeneratedHtmlId, useEuiThemeCSSVariables } from '../../services';
+import { useCurrentSession, useIsInManagedFlyout, useFlyoutLayoutMode, useFlyoutId, useFlyoutWidth } from './manager';
+import { EuiFocusTrap } from '../focus_trap';
+import { EuiOverlayMask } from '../overlay_mask';
+import { EuiI18n } from '../i18n';
+import { useResizeObserver } from '../observer/resize_observer';
+import { EuiPortal } from '../portal';
+import { EuiScreenReaderOnly } from '../accessibility';
+import { EuiFlyoutCloseButton } from './_flyout_close_button';
+import { euiFlyoutStyles, composeFlyoutInlineStyles } from './flyout.styles';
+import { usePropsWithComponentDefaults } from '../provider/component_defaults';
+import { DEFAULT_PADDING_SIZE, DEFAULT_PUSH_MIN_BREAKPOINT, DEFAULT_SIDE, DEFAULT_SIZE, DEFAULT_TYPE, isEuiFlyoutSizeNamed } from './const';
+import { useIsPushed } from './hooks';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var defaultElement = 'div';
+export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _usePropsWithComponen = usePropsWithComponentDefaults('EuiFlyout', props),
+    className = _usePropsWithComponen.className,
+    children = _usePropsWithComponen.children,
+    as = _usePropsWithComponen.as,
+    _usePropsWithComponen2 = _usePropsWithComponen.hideCloseButton,
+    hideCloseButton = _usePropsWithComponen2 === void 0 ? false : _usePropsWithComponen2,
+    closeButtonProps = _usePropsWithComponen.closeButtonProps,
+    _usePropsWithComponen3 = _usePropsWithComponen.closeButtonPosition,
+    closeButtonPosition = _usePropsWithComponen3 === void 0 ? 'inside' : _usePropsWithComponen3,
+    onClose = _usePropsWithComponen.onClose,
+    _usePropsWithComponen4 = _usePropsWithComponen.ownFocus,
+    ownFocus = _usePropsWithComponen4 === void 0 ? true : _usePropsWithComponen4,
+    _usePropsWithComponen5 = _usePropsWithComponen.side,
+    side = _usePropsWithComponen5 === void 0 ? DEFAULT_SIDE : _usePropsWithComponen5,
+    _usePropsWithComponen6 = _usePropsWithComponen.size,
+    size = _usePropsWithComponen6 === void 0 ? DEFAULT_SIZE : _usePropsWithComponen6,
+    _usePropsWithComponen7 = _usePropsWithComponen.paddingSize,
+    paddingSize = _usePropsWithComponen7 === void 0 ? DEFAULT_PADDING_SIZE : _usePropsWithComponen7,
+    _usePropsWithComponen8 = _usePropsWithComponen.maxWidth,
+    maxWidth = _usePropsWithComponen8 === void 0 ? false : _usePropsWithComponen8,
+    style = _usePropsWithComponen.style,
+    maskProps = _usePropsWithComponen.maskProps,
+    _usePropsWithComponen9 = _usePropsWithComponen.type,
+    type = _usePropsWithComponen9 === void 0 ? DEFAULT_TYPE : _usePropsWithComponen9,
+    outsideClickCloses = _usePropsWithComponen.outsideClickCloses,
+    _usePropsWithComponen10 = _usePropsWithComponen.pushMinBreakpoint,
+    pushMinBreakpoint = _usePropsWithComponen10 === void 0 ? DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen10,
+    _usePropsWithComponen11 = _usePropsWithComponen.pushAnimation,
+    pushAnimation = _usePropsWithComponen11 === void 0 ? false : _usePropsWithComponen11,
+    _focusTrapProps = _usePropsWithComponen.focusTrapProps,
+    _usePropsWithComponen12 = _usePropsWithComponen.includeFixedHeadersInFocusTrap,
+    includeFixedHeadersInFocusTrap = _usePropsWithComponen12 === void 0 ? true : _usePropsWithComponen12,
+    includeSelectorInFocusTrap = _usePropsWithComponen.includeSelectorInFocusTrap,
+    _ariaDescribedBy = _usePropsWithComponen['aria-describedby'],
+    id = _usePropsWithComponen.id,
+    rest = _objectWithoutProperties(_usePropsWithComponen, _excluded);
+  var _useEuiThemeCSSVariab = useEuiThemeCSSVariables(),
+    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
+  var Element = as || defaultElement;
+  var maskRef = useRef(null);
+
+  // Ref for the main flyout element to pass to context
+  var internalParentFlyoutRef = useRef(null);
+  var isPushed = useIsPushed({
+    type: type,
+    pushMinBreakpoint: pushMinBreakpoint
+  });
+
+  /**
+   * Setting up the refs on the actual flyout element in order to
+   * accommodate for the `isPushed` state by adding padding to the body equal to the width of the element
+   */
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    resizeRef = _useState2[0],
+    setResizeRef = _useState2[1];
+  var setRef = useCombinedRefs([setResizeRef, ref, internalParentFlyoutRef]);
+  var _useResizeObserver = useResizeObserver(isPushed ? resizeRef : null, 'width'),
+    width = _useResizeObserver.width;
+  useEffect(function () {
+    /**
+     * Accomodate for the `isPushed` state by adding padding to the body equal to the width of the element
+     */
+    if (isPushed) {
+      var paddingSide = side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
+      var cssVarName = "--euiPushFlyoutOffset".concat(side === 'left' ? 'InlineStart' : 'InlineEnd');
+      document.body.style[paddingSide] = "".concat(width, "px");
+
+      // EUI doesn't use this css variable, but it is useful for consumers
+      setGlobalCSSVariables(_defineProperty({}, cssVarName, "".concat(width, "px")));
+      return function () {
+        document.body.style[paddingSide] = '';
+        setGlobalCSSVariables(_defineProperty({}, cssVarName, null));
+      };
+    }
+  }, [isPushed, setGlobalCSSVariables, side, width]);
+
+  /**
+   * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
+   */
+  useEffect(function () {
+    document.body.classList.add('euiBody--hasFlyout');
+    return function () {
+      // Remove the hasFlyout class when the flyout is unmounted
+      document.body.classList.remove('euiBody--hasFlyout');
+    };
+  }, []);
+  var currentSession = useCurrentSession();
+  var isInManagedContext = useIsInManagedFlyout();
+
+  // Get flyout manager context for dynamic width calculation
+  var flyoutId = useFlyoutId(id);
+  var layoutMode = useFlyoutLayoutMode();
+
+  // Memoize flyout identification and relationships to prevent race conditions
+  var flyoutIdentity = useMemo(function () {
+    if (!flyoutId || !currentSession) {
+      return {
+        isMainFlyout: false,
+        siblingFlyoutId: null,
+        hasValidSession: false,
+        sessionForWidth: null
+      };
+    }
+    var siblingFlyoutId = currentSession.main === flyoutId ? currentSession.child : currentSession.main;
+    return {
+      siblingFlyoutId: siblingFlyoutId,
+      hasValidSession: true,
+      sessionForWidth: currentSession
+    };
+  }, [flyoutId, currentSession]);
+
+  // Destructure for easier use
+  var siblingFlyoutId = flyoutIdentity.siblingFlyoutId;
+  var hasChildFlyout = (currentSession === null || currentSession === void 0 ? void 0 : currentSession.child) != null;
+  var isChildFlyout = isInManagedContext && hasChildFlyout && (currentSession === null || currentSession === void 0 ? void 0 : currentSession.child) === id;
+  var shouldCloseOnEscape = useMemo(function () {
+    // Regular flyout - always close on ESC
+    if (!isInManagedContext) {
+      return true;
+    }
+
+    // Managed flyout with no child - close on ESC
+    if (!hasChildFlyout) {
+      return true;
+    }
+
+    // Child flyout - close on ESC
+    if (isChildFlyout) {
+      return true;
+    }
+
+    // Main flyout with child flyout - don't close on ESC
+    return false;
+  }, [isInManagedContext, hasChildFlyout, isChildFlyout]);
+
+  /**
+   * ESC key closes flyout based on flyout hierarchy rules
+   */
+  var onKeyDown = useCallback(function (event) {
+    if (!isPushed && event.key === keys.ESCAPE && shouldCloseOnEscape) {
+      event.preventDefault();
+      onClose(event);
+    }
+  }, [onClose, isPushed, shouldCloseOnEscape]);
+  var siblingFlyoutWidth = useFlyoutWidth(siblingFlyoutId);
+
+  /**
+   * Set inline styles
+   */
+  var inlineStyles = useMemo(function () {
+    var composedStyles = composeFlyoutInlineStyles(size, layoutMode, siblingFlyoutId, siblingFlyoutWidth || null, maxWidth);
+    return _objectSpread(_objectSpread({}, style), composedStyles);
+  }, [style, size, layoutMode, siblingFlyoutId, siblingFlyoutWidth, maxWidth]);
+  var styles = useEuiMemoizedStyles(euiFlyoutStyles);
+  var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], isEuiFlyoutSizeNamed(size) && styles[size], maxWidth === false && styles.noMaxWidth, isPushed ? styles.push.push : styles.overlay.overlay, isPushed ? styles.push[side] : styles.overlay[side], isPushed && !pushAnimation && styles.push.noAnimation, styles[side]];
+  var classes = classnames('euiFlyout', className);
+  var flyoutToggle = useRef(document.activeElement);
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    focusTrapShards = _useState4[0],
+    setFocusTrapShards = _useState4[1];
+  var focusTrapSelectors = useMemo(function () {
+    var selectors = [];
+    if (includeSelectorInFocusTrap) {
+      selectors = Array.isArray(includeSelectorInFocusTrap) ? includeSelectorInFocusTrap : [includeSelectorInFocusTrap];
+    }
+    if (includeFixedHeadersInFocusTrap) {
+      selectors.push('.euiHeader[data-fixed-header]');
+    }
+    return selectors;
+  }, [includeSelectorInFocusTrap, includeFixedHeadersInFocusTrap]);
+  useEffect(function () {
+    if (focusTrapSelectors.length > 0) {
+      var shardsEls = focusTrapSelectors.flatMap(function (selector) {
+        return Array.from(document.querySelectorAll(selector));
+      });
+      setFocusTrapShards(Array.from(shardsEls));
+
+      // Flyouts that are toggled from shards do not have working
+      // focus trap autoFocus, so we need to focus the flyout wrapper ourselves
+      shardsEls.forEach(function (shard) {
+        if (shard.contains(flyoutToggle.current)) {
+          resizeRef === null || resizeRef === void 0 || resizeRef.focus();
+        }
+      });
+    } else {
+      // Clear existing shards if necessary, e.g. switching to `false`
+      setFocusTrapShards(function (shards) {
+        return shards.length ? [] : shards;
+      });
+    }
+  }, [focusTrapSelectors, resizeRef]);
+  var focusTrapProps = useMemo(function () {
+    return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
+      shards: [].concat(_toConsumableArray(focusTrapShards), _toConsumableArray((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))
+    });
+  }, [_focusTrapProps, focusTrapShards]);
+
+  /*
+   * Provide meaningful screen reader instructions/details
+   */
+  var hasOverlayMask = ownFocus && !isPushed;
+  var descriptionId = useGeneratedHtmlId();
+  var ariaDescribedBy = classnames(descriptionId, _ariaDescribedBy);
+  var screenReaderDescription = useMemo(function () {
+    return ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
+      id: descriptionId
+    }, hasOverlayMask ? ___EmotionJSX(EuiI18n, {
+      token: "euiFlyout.screenReaderModalDialog",
+      default: "You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close."
+    }) : ___EmotionJSX(EuiI18n, {
+      token: "euiFlyout.screenReaderNonModalDialog",
+      default: "You are in a non-modal dialog. To close the dialog, press Escape."
+    }), ' ', focusTrapShards.length > 0 && ___EmotionJSX(EuiI18n, {
+      token: "euiFlyout.screenReaderFocusTrapShards",
+      default: "You can still continue tabbing through other global page landmarks."
+    })));
+  }, [hasOverlayMask, descriptionId, focusTrapShards.length]);
+
+  /*
+   * Trap focus even when `ownFocus={false}`, otherwise closing
+   * the flyout won't return focus to the originating button.
+   *
+   * Set `clickOutsideDisables={true}` when `ownFocus={false}`
+   * to allow non-keyboard users the ability to interact with
+   * elements outside the flyout.
+   *
+   * Set `onClickOutside={onClose}` when `ownFocus` and `type` are the defaults,
+   * or if `outsideClickCloses={true}` to close on clicks that target
+   * (both mousedown and mouseup) the overlay mask.
+   */
+  var onClickOutside = useCallback(function (event) {
+    // Do not close the flyout for any external click
+    if (outsideClickCloses === false) return undefined;
+    if (hasOverlayMask) {
+      // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
+      if (event.target === maskRef.current) return onClose(event);
+    } else {
+      // No overlay mask is present, so any outside clicks should close the flyout
+      if (outsideClickCloses === true) return onClose(event);
+    }
+    // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
+    return undefined;
+  }, [onClose, hasOverlayMask, outsideClickCloses]);
+  return ___EmotionJSX(EuiFlyoutComponentWrapper, {
+    hasOverlayMask: hasOverlayMask,
+    maskProps: _objectSpread(_objectSpread({}, maskProps), {}, {
+      maskRef: useCombinedRefs([maskProps === null || maskProps === void 0 ? void 0 : maskProps.maskRef, maskRef])
+    }),
+    isPortalled: !isPushed
+  }, ___EmotionJSX(EuiWindowEvent, {
+    event: "keydown",
+    handler: onKeyDown
+  }), ___EmotionJSX(EuiFocusTrap, _extends({
+    disabled: isPushed,
+    scrollLock: hasOverlayMask,
+    clickOutsideDisables: !ownFocus,
+    onClickOutside: onClickOutside
+  }, focusTrapProps), ___EmotionJSX(Element, _extends({
+    className: classes,
+    css: cssStyles,
+    style: inlineStyles,
+    ref: setRef,
+    id: id
+  }, rest, {
+    role: !isPushed ? 'dialog' : rest.role,
+    "aria-modal": !isPushed || undefined,
+    tabIndex: !isPushed ? 0 : rest.tabIndex,
+    "aria-describedby": !isPushed ? ariaDescribedBy : _ariaDescribedBy,
+    "data-autofocus": !isPushed || undefined
+  }), !isPushed && screenReaderDescription, !hideCloseButton && onClose && ___EmotionJSX(EuiFlyoutCloseButton, _extends({}, closeButtonProps, {
+    onClose: onClose,
+    closeButtonPosition: closeButtonPosition,
+    side: side
+  })), children)));
+}
+// React.forwardRef interferes with the inferred element type
+// Casting to ensure correct element prop type checking for `as`
+// e.g., `href` is not on a `div`
+);
+// Recast to allow `displayName`
+EuiFlyoutComponent.displayName = 'EuiFlyoutComponent';
+
+/**
+ * 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.
+ */
+var EuiFlyoutComponentWrapper = function EuiFlyoutComponentWrapper(_ref) {
+  var children = _ref.children,
+    hasOverlayMask = _ref.hasOverlayMask,
+    maskProps = _ref.maskProps,
+    isPortalled = _ref.isPortalled;
+  // TODO: @tkajtoch - this is causing all kinds of issues with animations if a
+  // main flyout is opened with ownFocus={true}.  Since the logic is to _change_
+  // ownFocus to false if a child is rendered, the component remounts, spinning all
+  // of the animations into a tailspin.  One option would be to flat-out _hide_ this
+  // mask. :shrug:
+  if (hasOverlayMask) {
+    return ___EmotionJSX(EuiOverlayMask, _extends({
+      headerZindexLocation: "below"
+    }, maskProps), children);
+  } else if (isPortalled) {
+    return ___EmotionJSX(EuiPortal, null, children);
+  } else {
+    return ___EmotionJSX(React.Fragment, null, children);
+  }
+};
+EuiFlyoutComponentWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+  hasOverlayMask: PropTypes.bool.isRequired,
+  maskProps: PropTypes.shape({
+    /**
+       * ReactNode to render as this component's content
+       */
+    children: PropTypes.node,
+    /**
+       * Should the mask visually sit above or below the EuiHeader (controlled by z-index)
+       */
+    headerZindexLocation: PropTypes.oneOf(["above", "below"]),
+    /**
+       * React ref to be passed to the wrapping container
+       */
+    maskRef: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.any.isRequired])
+  }).isRequired,
+  isPortalled: PropTypes.bool.isRequired
+};