@elastic/eui 109.2.0 → 110.0.0-snapshot.1764783610243

package/test-env/components/page_template/outer/page_outer.styles.js

@@ -13,39 +13,33 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "15mvjmo-row",
-  styles: "flex-direction:row;label:row;"
-} : {
-  name: "15mvjmo-row",
-  styles: "flex-direction:row;label:row;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "ll8kmq-column",
-  styles: "flex-direction:column;label:column;"
-} : {
-  name: "ll8kmq-column",
-  styles: "flex-direction:column;label:column;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "122lw0e-grow",
-  styles: "flex-grow:1;label:grow;"
-} : {
-  name: "122lw0e-grow",
-  styles: "flex-grow:1;label:grow;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiPageOuterStyles = exports.euiPageOuterStyles = function euiPageOuterStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
-  return {
-    euiPageOuter: /*#__PURE__*/(0, _react.css)("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", (0, _global_styling.logicalCSS)('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
-    ), ";;label:euiPageOuter;"),
-    // Grow
-    grow: _ref3,
-    // Direction
-    column: _ref2,
-    row: _ref
-  };
+var euiPageOuterStyles = exports.euiPageOuterStyles = {
+  euiPageOuter: /*#__PURE__*/(0, _react.css)("display:flex;flex-shrink:0;", (0, _global_styling.logicalCSS)('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
+  ), ";;label:euiPageOuter;"),
+  // Grow
+  grow: process.env.NODE_ENV === "production" ? {
+    name: "122lw0e-grow",
+    styles: "flex-grow:1;label:grow;"
+  } : {
+    name: "122lw0e-grow",
+    styles: "flex-grow:1;label:grow;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  // Direction
+  column: process.env.NODE_ENV === "production" ? {
+    name: "ll8kmq-column",
+    styles: "flex-direction:column;label:column;"
+  } : {
+    name: "ll8kmq-column",
+    styles: "flex-direction:column;label:column;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  row: process.env.NODE_ENV === "production" ? {
+    name: "15mvjmo-row",
+    styles: "flex-direction:row;label:row;"
+  } : {
+    name: "15mvjmo-row",
+    styles: "flex-direction:row;label:row;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
 };

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

@@ -108,7 +108,8 @@ var _EuiPageTemplate = exports._EuiPageTemplate = function _EuiPageTemplate(_ref
       header: {
         restrictWidth: restrictWidth,
         paddingSize: paddingSize,
-        bottomBorder: headerBottomBorder
+        bottomBorder: headerBottomBorder,
+        color: panelled === false ? 'transparent' : 'plain'
       },
       section: {
         restrictWidth: restrictWidth,
@@ -165,7 +166,7 @@ _EuiPageTemplate.propTypes = {
   "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
   css: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any]),
   /**
-         * Adds a white background and shadow to define the area.
+         * Adds a background and shadow to define the area.
          */
   panelled: _propTypes.default.bool,
   /**
@@ -313,6 +314,11 @@ _EuiPageHeader.propTypes = {
      * Adjust the overall padding.
      */
   paddingSize: _propTypes.default.any,
+  /**
+     * Define the header background color
+     * @default 'transparent'
+     */
+  color: _propTypes.default.oneOf(["plain", "transparent"]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

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

@@ -16,6 +16,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");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -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/test-env/components/search_bar/search_bar.js

@@ -50,6 +50,11 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+/**
+ * When `searchFormat` is 'text', `query` is null and the search is performed
+ * on the `queryText` directly without EQL parsing
+ */
+
 var parseQuery = function parseQuery(query, props) {
   var _props$box, _props$box2;
   var schema = undefined;
@@ -255,15 +260,15 @@ var EuiSearchBar = exports.EuiSearchBar = /*#__PURE__*/function (_Component) {
 EuiSearchBar.propTypes = {
   onChange: _propTypes.default.func,
   /**
-     The initial query the bar will hold when first mounted
+     * The initial query the bar will hold when first mounted
      */
   defaultQuery: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]),
   /**
-     If you wish to use the search bar as a controlled component, continuously pass the query via this prop.
+     * If you wish to use the search bar as a controlled component, continuously pass the query via this prop.
      */
   query: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]),
   /**
-     Configures the search box. Set `placeholder` to change the placeholder text in the box and `incremental` to support incremental (as you type) search.
+     * Configures the search box. Set `placeholder` to change the placeholder text in the box and `incremental` to support incremental (as you type) search.
      */
   box: _propTypes.default.shape({
     name: _propTypes.default.string,
@@ -323,7 +328,7 @@ EuiSearchBar.propTypes = {
     }).isRequired, _propTypes.default.bool.isRequired])
   }),
   /**
-     An array of search filters. See {@link SearchFilterConfig}.
+     * An array of search filters. See {@link SearchFilterConfig}.
      */
   filters: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     type: _propTypes.default.oneOf(["is"]).isRequired,

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

@@ -85,6 +85,12 @@ var EuiSelectable = exports.EuiSelectable = /*#__PURE__*/function (_Component) {
         _this.preventOnFocus = false;
         return;
       }
+      if (event && _this.props.searchable && event.target === _this.inputRef) {
+        _this.setState({
+          isFocused: true
+        });
+        return;
+      }
       if (!_this.state.visibleOptions.length || _this.state.activeOptionIndex != null) {
         return;
       }
@@ -460,8 +466,7 @@ var EuiSelectable = exports.EuiSelectable = /*#__PURE__*/function (_Component) {
           onChange: _this2.onSearchChange,
           listId: _this2.optionsListRef.current ? _this2.listId : undefined // Only pass the listId if it exists on the page
           ,
-          "aria-activedescendant": _this2.makeOptionId(activeOptionIndex) // the current faux-focused option
-          ,
+          "aria-activedescendant": activeOptionIndex != null ? _this2.makeOptionId(activeOptionIndex) : undefined,
           placeholder: placeholderName,
           isPreFiltered: !!isPreFiltered,
           optionMatcher: optionMatcher,

package/test-env/services/string/to_initials.js

@@ -13,6 +13,8 @@ exports.toInitials = toInitials;
  * Side Public License, v 1.
  */
 
+var MAX_INITIALS = exports.MAX_INITIALS = 2;
+
 /**
  * This function calculates the initials/acronym for a given name.
  * It defaults to only 2 characters and will take the first character (of each word).
@@ -24,11 +26,20 @@ exports.toInitials = toInitials;
  * @param {string} name The full name of the item to turn into initials
  * @param {number} initialsLength (Optional) How many characters to show (max 2 allowed)
  * @param {string} initials (Optional) Custom initials (max 2 characters)
- * @returns {string} True if the color is dark, false otherwise.
  */
-
-var MAX_INITIALS = exports.MAX_INITIALS = 2;
 function toInitials(name, initialsLength, initials) {
+  // If `initials` provided, check if it's a single emoji
+  // in order to support complex, "multi-character" ones
+  if (initials && typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+    var segmenter = new Intl.Segmenter('en', {
+      granularity: 'grapheme'
+    });
+    var segments = Array.from(segmenter.segment(initials));
+    if (segments.length === 1 && isEmoji(segments[0].segment)) {
+      return segments[0].segment;
+    }
+  }
+
   // Calculate the number of initials to show, maxing out at MAX_INITIALS
   var calculatedInitialsLength = initials ? initials.split('').length : name.split(' ').length;
   calculatedInitialsLength = calculatedInitialsLength > MAX_INITIALS ? MAX_INITIALS : calculatedInitialsLength;
@@ -51,5 +62,16 @@ function toInitials(name, initialsLength, initials) {
       calculatedInitials = name.substring(0, calculatedInitialsLength);
     }
   }
-  return calculatedInitials;
+  return calculatedInitials || '';
+}
+function isEmoji(str) {
+  /**
+   * The \p escape sequence allows matching a character based on its Unicode properties
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape
+   * @see https://www.unicode.org/Public/UCD/latest/ucd/emoji/emoji-data.txt
+   * @see https://www.unicode.org/reports/tr51/#Definitions
+   * @see https://util.unicode.org/UnicodeJsps/character.jsp?a=1F440&B1=Show
+   */
+  var emojiRegex = /(?:[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u2388\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2605\u2607-\u2612\u2614-\u2685\u2690-\u2705\u2708-\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2767\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC00-\uDCFF\uDD0D-\uDD0F\uDD2F\uDD6C-\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDDAD-\uDDFF\uDE01-\uDE0F\uDE1A\uDE2F\uDE32-\uDE3A\uDE3C-\uDE3F\uDE49-\uDFFF]|\uD83D[\uDC00-\uDD3D\uDD46-\uDE4F\uDE80-\uDEFF\uDF74-\uDF7F\uDFD5-\uDFFF]|\uD83E[\uDC0C-\uDC0F\uDC48-\uDC4F\uDC5A-\uDC5F\uDC88-\uDC8F\uDCAE-\uDCFF\uDD0C-\uDD3A\uDD3C-\uDD45\uDD47-\uDEFF]|\uD83F[\uDC00-\uDFFD])/;
+  return emojiRegex.test(str);
 }

package/es/components/flyout/flyout_child.js

@@ -1,223 +0,0 @@
-var _excluded = ["children", "backgroundStyle", "className", "banner", "hideCloseButton", "onClose", "scrollableTabIndex", "size"];
-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 _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.
- */
-
-import React, { useContext, Children, useEffect, useMemo, useRef, useCallback } from 'react';
-import PropTypes from "prop-types";
-import classNames from 'classnames';
-import { keys, useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
-import { euiFlyoutChildStyles } from './flyout_child.styles';
-import { EuiFlyoutCloseButton } from './_flyout_close_button';
-import { EuiFlyoutContext } from './flyout_context';
-import { EuiFlyoutBody } from './flyout_body';
-import { EuiFocusTrap } from '../focus_trap';
-
-/**
- * Props used to render and configure the child flyout panel
- */
-import { jsx as ___EmotionJSX } from "@emotion/react";
-/**
- * The child flyout is a panel that appears to the left of the parent flyout.
- * It is only visible when the parent flyout is open.
- */
-export var EuiFlyoutChild = function EuiFlyoutChild(_ref) {
-  var children = _ref.children,
-    _ref$backgroundStyle = _ref.backgroundStyle,
-    backgroundStyle = _ref$backgroundStyle === void 0 ? 'default' : _ref$backgroundStyle,
-    className = _ref.className,
-    banner = _ref.banner,
-    _ref$hideCloseButton = _ref.hideCloseButton,
-    hideCloseButton = _ref$hideCloseButton === void 0 ? false : _ref$hideCloseButton,
-    onClose = _ref.onClose,
-    _ref$scrollableTabInd = _ref.scrollableTabIndex,
-    scrollableTabIndex = _ref$scrollableTabInd === void 0 ? 0 : _ref$scrollableTabInd,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 's' : _ref$size,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var flyoutContext = useContext(EuiFlyoutContext);
-  if (!flyoutContext) {
-    throw new Error('EuiFlyoutChild must be used as a child of EuiFlyout.');
-  }
-  var isChildFlyoutOpen = flyoutContext.isChildFlyoutOpen,
-    setIsChildFlyoutOpen = flyoutContext.setIsChildFlyoutOpen,
-    parentSize = flyoutContext.parentSize;
-  useEffect(function () {
-    setIsChildFlyoutOpen === null || setIsChildFlyoutOpen === void 0 || setIsChildFlyoutOpen(true);
-    return function () {
-      setIsChildFlyoutOpen === null || setIsChildFlyoutOpen === void 0 || setIsChildFlyoutOpen(false);
-    };
-  }, [setIsChildFlyoutOpen]);
-  if (React.Children.count(children) === 0) {
-    console.warn('EuiFlyoutChild was rendered with no children!');
-  }
-  if (parentSize === 'm' && size === 'm') {
-    throw new Error('When the parent EuiFlyout size is "m", the EuiFlyoutChild size cannot be "m". Please use size "s" for the EuiFlyoutChild.');
-  }
-  var handleClose = function handleClose(event) {
-    setIsChildFlyoutOpen === null || setIsChildFlyoutOpen === void 0 || setIsChildFlyoutOpen(false);
-    onClose(event);
-  };
-  var flyoutTitleText;
-  var hasDescribedByBody = false;
-  Children.forEach(children, function (child) {
-    if ( /*#__PURE__*/React.isValidElement(child)) {
-      var _child$type;
-      if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'EuiFlyoutHeader') {
-        // Attempt to extract string content from header for ARIA
-        var headerChildren = child.props.children;
-        if (typeof headerChildren === 'string') {
-          flyoutTitleText = headerChildren;
-        } else if ( /*#__PURE__*/React.isValidElement(headerChildren) &&
-        // Check if props exist and children is a string
-        typeof headerChildren.props.children === 'string') {
-          flyoutTitleText = headerChildren.props.children;
-        } else if (Array.isArray(headerChildren)) {
-          // Find the first string child if headerChildren is an array
-          flyoutTitleText = headerChildren.find(function (cNode) {
-            return typeof cNode === 'string';
-          });
-        }
-      }
-      if (child.type === EuiFlyoutBody) {
-        hasDescribedByBody = true;
-      }
-    }
-  });
-  var titleIdGenerated = useGeneratedHtmlId({
-    prefix: 'euiFlyoutChildTitle'
-  });
-  var bodyIdGenerated = useGeneratedHtmlId({
-    prefix: 'euiFlyoutChildBody'
-  });
-  var ariaLabelledBy = flyoutTitleText ? titleIdGenerated : undefined;
-  var ariaDescribedBy = hasDescribedByBody ? bodyIdGenerated : undefined;
-  // Use existing aria-label if provided, otherwise fallback if no labelledby can be derived
-  var ariaLabel = rest['aria-label'] || (!ariaLabelledBy && !flyoutTitleText ? 'Flyout panel' : undefined);
-  var processedChildren = useMemo(function () {
-    return Children.map(children, function (child) {
-      if ( /*#__PURE__*/React.isValidElement(child)) {
-        var _child$type2, _child$type3;
-        if ((child.type === EuiFlyoutBody || ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === 'EuiFlyoutBody') && hasDescribedByBody) {
-          return /*#__PURE__*/React.cloneElement(child, {
-            id: bodyIdGenerated
-          });
-        }
-        // If EuiFlyoutHeader is found and we derived flyoutTitleText, set its ID
-        if (((_child$type3 = child.type) === null || _child$type3 === void 0 ? void 0 : _child$type3.displayName) === 'EuiFlyoutHeader' && flyoutTitleText && ariaLabelledBy) {
-          return /*#__PURE__*/React.cloneElement(child, {
-            id: titleIdGenerated
-          });
-        }
-      }
-      return child;
-    });
-  }, [children, bodyIdGenerated, titleIdGenerated, hasDescribedByBody, flyoutTitleText, ariaLabelledBy]);
-  var flyoutWrapperRef = useRef(null);
-  var classes = classNames('euiFlyoutChild', className);
-  var styles = useEuiMemoizedStyles(euiFlyoutChildStyles);
-  var childLayoutMode = flyoutContext.childLayoutMode,
-    parentFlyoutRef = flyoutContext.parentFlyoutRef;
-  var flyoutChildCss = [styles.euiFlyoutChild, backgroundStyle === 'shaded' ? styles.backgroundShaded : styles.backgroundDefault, size === 's' ? styles.s : styles.m, childLayoutMode === 'side-by-side' ? styles.sidePosition : styles.stackedPosition];
-  var onKeyDown = useCallback(function (event) {
-    if (isChildFlyoutOpen && event.key === keys.ESCAPE) {
-      event.preventDefault();
-      setIsChildFlyoutOpen === null || setIsChildFlyoutOpen === void 0 || setIsChildFlyoutOpen(false);
-      onClose(event.nativeEvent);
-    }
-  }, [isChildFlyoutOpen, onClose, setIsChildFlyoutOpen]);
-  return ___EmotionJSX(EuiFocusTrap, {
-    returnFocus: function returnFocus() {
-      if (parentFlyoutRef !== null && parentFlyoutRef !== void 0 && parentFlyoutRef.current) {
-        parentFlyoutRef.current.focus();
-        return false; // We've handled focus
-      }
-      return true;
-    },
-    shards: [],
-    disabled: false
-  }, ___EmotionJSX("div", _extends({
-    ref: flyoutWrapperRef,
-    className: classes,
-    css: flyoutChildCss,
-    "data-test-subj": "euiFlyoutChild",
-    role: "dialog",
-    "aria-modal": "true",
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
-    tabIndex: -1,
-    onKeyDown: onKeyDown // used as generic container event handler
-  }, rest), flyoutTitleText && !ariaLabelledBy && ___EmotionJSX("h2", {
-    id: titleIdGenerated,
-    className: "euiScreenReaderOnly"
-  }, flyoutTitleText), !hideCloseButton && ___EmotionJSX(EuiFlyoutCloseButton, {
-    className: "euiFlyoutChild__closeButton",
-    onClose: handleClose,
-    side: "right",
-    closeButtonPosition: "inside",
-    "data-test-subj": "euiFlyoutChildCloseButton"
-  }), ___EmotionJSX("div", {
-    tabIndex: scrollableTabIndex,
-    className: "euiFlyoutChild__overflow",
-    css: styles.overflow.overflow
-  }, banner && ___EmotionJSX("div", {
-    className: "euiFlyoutChild__banner",
-    css: styles.banner,
-    "data-test-subj": "euiFlyoutChildBanner"
-  }, banner), ___EmotionJSX("div", {
-    className: "euiFlyoutChild__overflowContent",
-    css: styles.overflow.wrapper
-  }, processedChildren))));
-};
-EuiFlyoutChild.propTypes = {
-  /**
-     * Called when the child panel's close button is clicked
-     */
-  onClose: PropTypes.func.isRequired,
-  /**
-     * Use to display a banner at the top of the child. It is suggested to use `EuiCallOut` for it.
-     */
-  banner: PropTypes.node,
-  /**
-     * Hides the default close button. You must provide another close button somewhere within the child flyout.
-     * @default false
-     */
-  hideCloseButton: PropTypes.bool,
-  /**
-     * [Scrollable regions (or their children) should be focusable](https://dequeuniversity.com/rules/axe/4.0/scrollable-region-focusable)
-     * to allow keyboard users to scroll the region via arrow keys.
-     *
-     * By default, EuiFlyoutChild's scroll overflow wrapper sets a `tabIndex` of `0`.
-     * If you know your flyout child content already contains focusable children
-     * that satisfy keyboard accessibility requirements, you can use this prop
-     * to override this default.
-     */
-  scrollableTabIndex: PropTypes.number,
-  /**
-     * Size of the child flyout panel.
-     * When the parent flyout is 'm', child is limited to 's'.
-     * @default 's'
-     */
-  size: PropTypes.oneOf(["s", "m"]),
-  /*
-     * The background of the child flyout can be optionally shaded. Use `shaded` to add the shading.
-     */
-  backgroundStyle: PropTypes.oneOf(["shaded", "default"]),
-  /**
-     * Children are implicitly part of FunctionComponent, but good to have if props type is standalone.
-     */
-  children: PropTypes.node,
-  className: PropTypes.string,
-  "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string,
-  css: PropTypes.any
-};
-EuiFlyoutChild.displayName = 'EuiFlyoutChild';

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

@@ -1,32 +0,0 @@
-/*
- * 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 { logicalCSS, logicalCSSWithFallback, highContrastModeStyles, euiYScroll } from '../../global_styling';
-import { composeFlyoutSizing, maxedFlyoutWidth } from './flyout.styles';
-export var euiFlyoutChildStyles = function euiFlyoutChildStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  return {
-    // Base styles for the child flyout
-    euiFlyoutChild: /*#__PURE__*/css("position:absolute;inset-block-start:0;inset-inline-start:0;block-size:100%;display:flex;flex-direction:column;", logicalCSSWithFallback('overflow-y', 'hidden'), " ", logicalCSS('height', '100%'), " z-index:", Number(euiTheme.levels.flyout) + 1, ";border-inline-start:", euiTheme.border.thin, ";", maxedFlyoutWidth(euiThemeContext), ";;label:euiFlyoutChild;"),
-    backgroundDefault: /*#__PURE__*/css("background:", euiTheme.colors.backgroundBasePlain, ";;label:backgroundDefault;"),
-    backgroundShaded: /*#__PURE__*/css("background:", euiTheme.colors.backgroundBaseSubdued, ";;label:backgroundShaded;"),
-    // Position variants based on screen size
-    sidePosition: /*#__PURE__*/css("transform:translateX(-100%);border-inline-end:", euiTheme.border.thin, ";;label:sidePosition;"),
-    stackedPosition: /*#__PURE__*/css("inset-inline-end:0;inline-size:100%;border-block-end:", euiTheme.border.thin, ";;label:stackedPosition;"),
-    s: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 's'), ";;label:s;"),
-    m: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 'm'), ";;label:m;"),
-    overflow: {
-      overflow: /*#__PURE__*/css("flex-grow:1;display:flex;flex-direction:column;", euiYScroll(euiThemeContext), ";;label:overflow;"),
-      wrapper: /*#__PURE__*/css("display:flex;flex-direction:column;flex-grow:1;", logicalCSS('overflow-x', 'auto'), ";;label:wrapper;")
-    },
-    banner: /*#__PURE__*/css(logicalCSSWithFallback('overflow-x', 'hidden'), " ", highContrastModeStyles(euiThemeContext, {
-      preferred: logicalCSS('border-bottom', euiTheme.border.thin)
-    }), ";;label:banner;")
-  };
-};

package/es/components/flyout/flyout_child_manager.js

@@ -1,114 +0,0 @@
-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.
- */
-
-import React, { useEffect, useMemo, useState } from 'react';
-import PropTypes from "prop-types";
-import { useEuiTheme } from '../../services';
-import { EuiFlyoutContext } from './flyout_context';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-/**
- * An intermediate component between EuiFlyout and EuiFlyoutChild.
- * It is responsible for managing the state of the child flyout, and passing it to EuiFlyoutContext.
- * It removes the responsibility of managing child flyout state from EuiFlyout, which is especially important there might not be a child flyout.
- */
-export var EuiFlyoutChildProvider = function EuiFlyoutChildProvider(_ref) {
-  var parentSize = _ref.parentSize,
-    parentFlyoutRef = _ref.parentFlyoutRef,
-    childElement = _ref.childElement,
-    childrenToRender = _ref.childrenToRender,
-    reportIsChildOpen = _ref.reportIsChildOpen,
-    reportChildLayoutMode = _ref.reportChildLayoutMode;
-  var _useEuiTheme = useEuiTheme(),
-    euiTheme = _useEuiTheme.euiTheme;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isChildFlyoutOpen = _useState2[0],
-    setIsChildFlyoutOpen = _useState2[1];
-  var _useState3 = useState(typeof window !== 'undefined' ? window.innerWidth : Infinity),
-    _useState4 = _slicedToArray(_useState3, 2),
-    windowWidth = _useState4[0],
-    setWindowWidth = _useState4[1];
-  var _useState5 = useState('side-by-side'),
-    _useState6 = _slicedToArray(_useState5, 2),
-    childLayoutMode = _useState6[0],
-    setChildLayoutMode = _useState6[1];
-
-  // update windowWidth on resize
-  useEffect(function () {
-    if (typeof window === 'undefined') return;
-    var handleResize = function handleResize() {
-      setWindowWidth(window.innerWidth);
-    };
-    window.addEventListener('resize', handleResize);
-    handleResize();
-    return function () {
-      window.removeEventListener('resize', handleResize);
-      reportIsChildOpen === null || reportIsChildOpen === void 0 || reportIsChildOpen(false);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Calculate stacking breakpoint value for child flyout.
-  // Stacking breakpoint value is a sum of parent breakpoint value and child breakpoint value.
-  var stackingBreakpointValue = useMemo(function () {
-    var parentSizeName = parentSize;
-    var childSizeName = childElement.props.size || 's';
-    var parentNumericValue = 0;
-    if (parentSizeName === 's') parentNumericValue = euiTheme.breakpoint.s;else if (parentSizeName === 'm') parentNumericValue = euiTheme.breakpoint.m;
-    // Parent 'l' size is not allowed when child is present, so no need to check here
-
-    var childNumericValue = 0;
-    if (childSizeName === 's') childNumericValue = euiTheme.breakpoint.s;else if (childSizeName === 'm') childNumericValue = euiTheme.breakpoint.m;
-    return parentNumericValue + childNumericValue;
-  }, [parentSize, childElement.props.size, euiTheme.breakpoint]);
-
-  // update childLayoutMode based on windowWidth and the calculated stackingBreakpoint
-  useEffect(function () {
-    if (windowWidth >= stackingBreakpointValue) {
-      setChildLayoutMode('side-by-side');
-    } else {
-      setChildLayoutMode('stacked');
-    }
-  }, [windowWidth, stackingBreakpointValue]);
-
-  // report isChildFlyoutOpen changes to the parent EuiFlyout
-  useEffect(function () {
-    reportIsChildOpen(isChildFlyoutOpen);
-  }, [isChildFlyoutOpen, reportIsChildOpen]);
-
-  // report childLayoutMode changes to the parent EuiFlyout
-  useEffect(function () {
-    reportChildLayoutMode(childLayoutMode);
-  }, [childLayoutMode, reportChildLayoutMode]);
-  var contextValue = useMemo(function () {
-    return {
-      parentSize: parentSize,
-      parentFlyoutRef: parentFlyoutRef,
-      isChildFlyoutOpen: isChildFlyoutOpen,
-      setIsChildFlyoutOpen: setIsChildFlyoutOpen,
-      childLayoutMode: childLayoutMode
-    };
-  }, [parentSize, parentFlyoutRef, isChildFlyoutOpen, setIsChildFlyoutOpen, childLayoutMode]);
-  return ___EmotionJSX(EuiFlyoutContext.Provider, {
-    value: contextValue
-  }, childrenToRender);
-};
-EuiFlyoutChildProvider.propTypes = {
-  parentSize: PropTypes.oneOf(["s", "m"]).isRequired,
-  parentFlyoutRef: PropTypes.any.isRequired,
-  childElement: PropTypes.element.isRequired,
-  childrenToRender: PropTypes.node.isRequired,
-  reportIsChildOpen: PropTypes.func.isRequired,
-  reportChildLayoutMode: PropTypes.func.isRequired
-};