@elastic/eui 110.0.0 → 111.1.0

package/optimize/es/components/button/split_button/split_button_actions.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "isIconOnly", "tooltipProps"],
+  _excluded2 = ["fill", "isDisabled", "isLoading"],
+  _excluded3 = ["className", "popoverProps", "tooltipProps"],
+  _excluded4 = ["fill", "isDisabled", "isLoading"];
+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; }
+/*
+ * 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 } from 'react';
+import classNames from 'classnames';
+import { EuiPopover } from '../../popover';
+import { EuiToolTip } from '../../tool_tip';
+import { EuiButton } from '../button';
+import { isButtonDisabled } from '../button_display/_button_display';
+import { EuiButtonIcon } from '../button_icon';
+import { euiSplitButtonActionStyles } from './split_button.styles';
+import { EuiSplitButtonContext } from './split_button_context';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiSplitButtonActionPrimary = function EuiSplitButtonActionPrimary(_ref) {
+  var className = _ref.className,
+    isIconOnly = _ref.isIconOnly,
+    tooltipProps = _ref.tooltipProps,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(EuiSplitButtonContext),
+    fill = _useContext.fill,
+    isDisabled = _useContext.isDisabled,
+    isLoading = _useContext.isLoading,
+    sharedRest = _objectWithoutProperties(_useContext, _excluded2);
+  var _isDisabled = !!isDisabled || isButtonDisabled(rest);
+  var _isLoading = !!isLoading || !!rest.isLoading;
+  var display = fill ? 'fill' : 'base';
+  var classes = classNames('euiSplitButtonActionPrimary', className);
+  var styles = euiSplitButtonActionStyles;
+  var actionProps = _objectSpread(_objectSpread(_objectSpread({}, rest), sharedRest), {}, {
+    isDisabled: _isDisabled,
+    isLoading: _isLoading,
+    css: [styles.euiSplitButtonActionPrimary],
+    className: classes
+  });
+  var actionButtonProps = _objectSpread(_objectSpread({}, actionProps), {}, {
+    fill: fill
+  });
+  var actionIconProps = _objectSpread(_objectSpread({}, actionProps), {}, {
+    display: display
+  });
+  var button = isIconOnly ? ___EmotionJSX(EuiButtonIcon, actionIconProps) : ___EmotionJSX(EuiButton, actionButtonProps);
+  return tooltipProps ? ___EmotionJSX(EuiToolTip, tooltipProps, button) : button;
+};
+export var EuiSplitButtonActionSecondary = function EuiSplitButtonActionSecondary(_ref2) {
+  var className = _ref2.className,
+    popoverProps = _ref2.popoverProps,
+    tooltipProps = _ref2.tooltipProps,
+    rest = _objectWithoutProperties(_ref2, _excluded3);
+  var _useContext2 = useContext(EuiSplitButtonContext),
+    fill = _useContext2.fill,
+    isDisabled = _useContext2.isDisabled,
+    isLoading = _useContext2.isLoading,
+    sharedRest = _objectWithoutProperties(_useContext2, _excluded4);
+  var _isDisabled = !!isDisabled || isButtonDisabled(rest);
+  var _isLoading = !!isLoading || !!rest.isLoading;
+  var display = fill ? 'fill' : 'base';
+  var classes = classNames('euiSplitButtonActionSecondary', className);
+  var styles = euiSplitButtonActionStyles;
+  var actionProps = _objectSpread(_objectSpread(_objectSpread({}, rest), sharedRest), {}, {
+    display: display,
+    // enforce arrowDown icon when a popover is rendered
+    iconType: popoverProps != null ? 'arrowDown' : rest.iconType,
+    isDisabled: _isDisabled,
+    isLoading: _isLoading,
+    css: [styles.euiSplitButtonActionSecondary],
+    className: classes
+  });
+  var button = ___EmotionJSX(EuiButtonIcon, actionProps);
+  var action = tooltipProps ? ___EmotionJSX(EuiToolTip, tooltipProps, button) : button;
+  return popoverProps ? ___EmotionJSX(EuiPopover, _extends({
+    anchorPosition: "downCenter"
+  }, popoverProps, {
+    button: action
+  })) : action;
+};

package/optimize/es/components/button/split_button/split_button_context.js

@@ -0,0 +1,14 @@
+/*
+ * 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 { createContext } from 'react';
+export var EuiSplitButtonContext = /*#__PURE__*/createContext({
+  size: 'm',
+  color: 'primary',
+  fill: false
+});

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

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

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

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

package/optimize/es/components/datagrid/controls/fullscreen_selector.styles.js

@@ -10,7 +10,7 @@ import { css } from '@emotion/css';
 import { logicalCSS } from '../../../global_styling';
 export var euiDataGridFullScreenStyles = function euiDataGridFullScreenStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var fullScreenZIndex = Number(euiTheme.levels.header) - 1;
+  var fullScreenZIndex = Number(euiTheme.levels.header) - 2;
   return {
     'euiDataGrid--fullScreen': /*#__PURE__*/css("z-index:", fullScreenZIndex, ";position:fixed;inset:0;background-color:", euiTheme.colors.emptyShade, ";;label:euiDataGrid--fullScreen;"),
     // This is a vanilla className applied to the <body> when fullscreen is enabled.

package/optimize/es/components/empty_prompt/empty_prompt.js

@@ -107,7 +107,7 @@ export var EuiEmptyPrompt = function EuiEmptyPrompt(_ref) {
   }, title && ___EmotionJSX(EuiTitle, {
     size: titleSize
   }, title), title && body && ___EmotionJSX(EuiSpacer, {
-    size: "m"
+    size: "s"
   }), body && ___EmotionJSX(EuiText, {
     color: "subdued"
   }, body), actionsNode && (body || title) && ___EmotionJSX(EuiSpacer, {

package/optimize/es/components/flex/flex_group.js

@@ -23,7 +23,7 @@ var EuiFlexGroupInternal = function EuiFlexGroupInternal(_ref, ref) {
     _ref$component = _ref.component,
     component = _ref$component === void 0 ? 'div' : _ref$component,
     _ref$gutterSize = _ref.gutterSize,
-    gutterSize = _ref$gutterSize === void 0 ? 'l' : _ref$gutterSize,
+    gutterSize = _ref$gutterSize === void 0 ? 'm' : _ref$gutterSize,
     _ref$alignItems = _ref.alignItems,
     alignItems = _ref$alignItems === void 0 ? 'stretch' : _ref$alignItems,
     _ref$responsive = _ref.responsive,

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

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

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

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

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

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

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

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