@elastic/eui 72.2.0 → 74.0.0

package/es/components/page/page_header/page_header.a11y.js

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+/// <reference types="../../../../cypress/support"/>
+import React from 'react';
+import { EuiButton } from '../../button';
+import { EuiPageHeader } from './page_header';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+describe('EuiPageHeader', function () {
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount(___EmotionJSX(EuiPageHeader, {
+      pageTitle: "Page title",
+      iconType: "logoKibana",
+      description: "This description should be describing the current page as depicted by the page title. It will never extend beneath the right side content.",
+      rightSideItems: [___EmotionJSX(EuiButton, {
+        fill: true
+      }, "Add something"), ___EmotionJSX(EuiButton, null, "Do something")]
+    }));
+    cy.get('h1.euiTitle').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+  });
+});

package/es/components/portal/portal.a11y.js

@@ -0,0 +1,70 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/*
+ * 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.
+ */
+/// <reference types="../../../cypress/support"/>
+import React, { useState } from 'react';
+import { EuiButton } from '../button';
+import { EuiPortal } from './portal';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var Portal = function Portal() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isPortalVisible = _useState2[0],
+      setIsPortalVisible = _useState2[1];
+
+  var togglePortal = function togglePortal() {
+    setIsPortalVisible(!isPortalVisible);
+  };
+
+  var closePortal = function closePortal() {
+    setIsPortalVisible(false);
+  };
+
+  var customPortal;
+
+  if (isPortalVisible) {
+    customPortal = ___EmotionJSX(EuiPortal, null, ___EmotionJSX("div", null, "This is the portal. Click anywhere to close."), ___EmotionJSX(EuiButton, {
+      onClick: closePortal
+    }, "Close portal"));
+  }
+
+  return ___EmotionJSX("div", null, ___EmotionJSX(EuiButton, {
+    onClick: togglePortal
+  }, "View guide"), customPortal);
+};
+
+describe('EuiPortal', function () {
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount(___EmotionJSX(Portal, null));
+    cy.get('div[data-relative-to-header="above"]').should('not.exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations after the portal is activated', function () {
+      cy.get('button[type="button"]').contains('View guide').realClick();
+      cy.get('div[data-euiportal="true"]').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

package/es/components/resizable_container/resizable_panel.js

@@ -303,6 +303,11 @@ EuiResizablePanel.propTypes = {
      */
   style: PropTypes.any,
 
+  /**
+     * tabIndex={0} provides full keyboard access when content overflows `<EuiResizablePanel />`
+     */
+  tabIndex: PropTypes.number,
+
   /**
      * Props to add to the wrapping `.euiResizablePanel` div
      */

package/es/components/tool_tip/tool_tip.js

@@ -41,13 +41,14 @@ import React, { Component } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { keysOf } from '../common';
+import { findPopoverPosition, htmlIdGenerator } from '../../services';
+import { enqueueStateChange } from '../../services/react';
+import { EuiResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
+import { EuiToolTipPopover } from './tool_tip_popover';
 import { EuiToolTipAnchor } from './tool_tip_anchor';
 import { EuiToolTipArrow } from './tool_tip_arrow';
-import { EuiToolTipPopover } from './tool_tip_popover';
-import { enqueueStateChange } from '../../services/react';
-import { findPopoverPosition, htmlIdGenerator } from '../../services';
-import { EuiResizeObserver } from '../observer/resize_observer';
+import { toolTipManager } from './tool_tip_manager';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var positionsToClassNameMap = {
   top: 'euiToolTip--top',
@@ -142,9 +143,11 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
       if (!_this.timeoutId) {
         _this.timeoutId = setTimeout(function () {
           enqueueStateChange(function () {
-            return _this.setState({
+            _this.setState({
               visible: true
             });
+
+            toolTipManager.registerTooltip(_this.hideToolTip);
           });
         }, delayToMsMap[_this.props.delay]);
       }
@@ -205,6 +208,8 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
             toolTipStyles: DEFAULT_TOOLTIP_STYLES,
             arrowStyles: undefined
           });
+
+          toolTipManager.deregisterToolTip(_this.hideToolTip);
         }
       });
     });

package/es/components/tool_tip/tool_tip_manager.js

@@ -0,0 +1,42 @@
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/*
+ * 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.
+ */
+
+/**
+ * Manager utility that ensures only one tooltip is visible at a time
+ *
+ * UX rationale (primarily for mouse-only users):
+ * @see https://github.com/elastic/kibana/issues/144482
+ * @see https://github.com/elastic/eui/issues/5883
+ */
+var ToolTipManager = function ToolTipManager() {
+  var _this = this;
+
+  _classCallCheck(this, ToolTipManager);
+
+  _defineProperty(this, "toolTipsToHide", new Set());
+
+  _defineProperty(this, "registerTooltip", function (hideCallback) {
+    _this.toolTipsToHide.forEach(function (hide) {
+      return hide();
+    });
+
+    _this.toolTipsToHide.clear();
+
+    _this.toolTipsToHide.add(hideCallback);
+  });
+
+  _defineProperty(this, "deregisterToolTip", function (hideCallback) {
+    _this.toolTipsToHide.delete(hideCallback);
+  });
+};
+
+export var toolTipManager = new ToolTipManager();

package/es/services/security/get_secure_rel_for_target.js

@@ -10,20 +10,14 @@
  * Secures outbound links. For more info:
  * https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
  */
-import { isDomainSecure } from '../url';
 export var getSecureRelForTarget = function getSecureRelForTarget(_ref) {
-  var href = _ref.href,
-      _ref$target = _ref.target,
+  var _ref$target = _ref.target,
       target = _ref$target === void 0 ? '' : _ref$target,
       rel = _ref.rel;
-  var isElasticHref = !!href && isDomainSecure(href);
   var relParts = !!rel ? rel.split(' ').filter(function (part) {
     return !!part.length && part !== 'noreferrer';
   }) : [];
-
-  if (!isElasticHref) {
-    relParts.push('noreferrer');
-  }
+  relParts.push('noreferrer');
 
   if (target.includes('_blank') && relParts.indexOf('noopener') === -1) {
     relParts.push('noopener');

package/es/services/theme/hooks.js

@@ -12,6 +12,10 @@ import { EuiThemeContext, EuiModificationsContext, EuiColorModeContext, defaultC
 import { getEuiDevProviderWarning } from './provider';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var providerMessage = "`EuiProvider` is missing which can result in negative effects.\nWrap your component in `EuiProvider`: https://ela.st/euiprovider.";
+/**
+ * Hook for function components
+ */
+
 export var useEuiTheme = function useEuiTheme() {
   var theme = useContext(EuiThemeContext);
   var colorMode = useContext(EuiColorModeContext);
@@ -46,6 +50,10 @@ export var useEuiTheme = function useEuiTheme() {
   }, [theme, colorMode, modifications]);
   return assembledTheme;
 };
+/**
+ * HOC for class components
+ */
+
 // Provide the component props interface as the generic to allow the docs props table to populate.
 // e.g., `const EuiComponent = withEuiTheme<EuiComponentProps>(_EuiComponent)`
 export var withEuiTheme = function withEuiTheme(Component) {
@@ -62,4 +70,14 @@ export var withEuiTheme = function withEuiTheme(Component) {
   var WithEuiTheme = /*#__PURE__*/forwardRef(Render);
   WithEuiTheme.displayName = componentName;
   return WithEuiTheme;
+};
+/**
+ * Render prop alternative for complex class components
+ * Most useful for scenarios where a HOC may interfere with typing
+ */
+
+export var RenderWithEuiTheme = function RenderWithEuiTheme(_ref) {
+  var children = _ref.children;
+  var theme = useEuiTheme();
+  return children(theme);
 };

package/es/services/theme/index.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 export { EuiSystemContext, EuiThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
-export { useEuiTheme, withEuiTheme } from './hooks';
+export { useEuiTheme, withEuiTheme, RenderWithEuiTheme } from './hooks';
 export { EuiThemeProvider, getEuiDevProviderWarning, setEuiDevProviderWarning } from './provider';
 export { buildTheme, computed, isInverseColorMode, getColorMode, getComputed, getOn, mergeDeep, setOn, Computed } from './utils';
 export { COLOR_MODES_STANDARD } from './types';

package/eui.d.ts

@@ -5695,6 +5695,16 @@ declare module '@elastic/eui/src/components/tool_tip/tool_tip_arrow' {
 	    position: ToolTipPositions;
 	} & HTMLAttributes<HTMLDivElement>>;
 
+}
+declare module '@elastic/eui/src/components/tool_tip/tool_tip_manager' {
+	 class ToolTipManager {
+	    toolTipsToHide: Set<Function>;
+	    registerTooltip: (hideCallback: Function) => void;
+	    deregisterToolTip: (hideCallback: Function) => void;
+	}
+	export const toolTipManager: ToolTipManager;
+	export {};
+
 }
 declare module '@elastic/eui/src/components/tool_tip/tool_tip' {
 	import { Component, ReactElement, ReactNode, MouseEvent as ReactMouseEvent, HTMLAttributes } from 'react';
@@ -6936,7 +6946,7 @@ declare module '@elastic/eui/src/global_styling/functions/size' {
 declare module '@elastic/eui/src/services/theme/provider' {
 	import React, { PropsWithChildren } from 'react';
 	import { EuiThemeColorMode, EuiThemeSystem, EuiThemeModifications } from '@elastic/eui/src/services/theme/types'; type LEVELS = 'log' | 'warn' | 'error';
-	export const setEuiDevProviderWarning: (level: LEVELS) => LEVELS;
+	export const setEuiDevProviderWarning: (level: LEVELS | undefined) => LEVELS | undefined;
 	export const getEuiDevProviderWarning: () => LEVELS | undefined;
 	export interface EuiThemeProviderProps<T> {
 	    theme?: EuiThemeSystem<T>;
@@ -6951,16 +6961,29 @@ declare module '@elastic/eui/src/services/theme/provider' {
 declare module '@elastic/eui/src/services/theme/hooks' {
 	import React from 'react';
 	import { EuiThemeColorModeStandard, EuiThemeModifications, EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+	/**
+	 * Hook for function components
+	 */
 	export interface UseEuiTheme<T extends {} = {}> {
 	    euiTheme: EuiThemeComputed<T>;
 	    colorMode: EuiThemeColorModeStandard;
 	    modifications: EuiThemeModifications<T>;
 	}
 	export const useEuiTheme: <T extends {} = {}>() => UseEuiTheme<T>;
+	/**
+	 * HOC for class components
+	 */
 	export interface WithEuiThemeProps<P extends {} = {}> {
 	    theme: UseEuiTheme<P>;
 	}
 	export const withEuiTheme: <T extends {} = {}, U extends {} = {}>(Component: React.ComponentType<T & WithEuiThemeProps<U>>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<T, "theme">> & React.RefAttributes<Omit<T, "theme">>>;
+	/**
+	 * Render prop alternative for complex class components
+	 * Most useful for scenarios where a HOC may interfere with typing
+	 */
+	export const RenderWithEuiTheme: <T extends {} = {}>({ children, }: {
+	    children: (theme: UseEuiTheme) => React.ReactElement;
+	}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 
 }
 declare module '@elastic/eui/src/global_styling/functions/typography' {
@@ -7069,7 +7092,7 @@ declare module '@elastic/eui/src/services/theme/context' {
 declare module '@elastic/eui/src/services/theme' {
 	export { EuiSystemContext, EuiThemeContext, EuiModificationsContext, EuiColorModeContext, } from '@elastic/eui/src/services/theme/context';
 	export type { UseEuiTheme, WithEuiThemeProps } from '@elastic/eui/src/services/theme/hooks';
-	export { useEuiTheme, withEuiTheme } from '@elastic/eui/src/services/theme/hooks';
+	export { useEuiTheme, withEuiTheme, RenderWithEuiTheme } from '@elastic/eui/src/services/theme/hooks';
 	export type { EuiThemeProviderProps } from '@elastic/eui/src/services/theme/provider';
 	export { EuiThemeProvider, getEuiDevProviderWarning, setEuiDevProviderWarning, } from '@elastic/eui/src/services/theme/provider';
 	export { buildTheme, computed, isInverseColorMode, getColorMode, getComputed, getOn, mergeDeep, setOn, Computed, } from '@elastic/eui/src/services/theme/utils';
@@ -7373,13 +7396,13 @@ declare module '@elastic/eui/src/services/random' {
 	    }) => moment.Moment;
 	}
 
-}
-declare module '@elastic/eui/src/services/url' {
-	export const isDomainSecure: (url?: string) => boolean;
-
 }
 declare module '@elastic/eui/src/services/security/get_secure_rel_for_target' {
-	export const getSecureRelForTarget: ({ href, target, rel, }: {
+	/**
+	 * Secures outbound links. For more info:
+	 * https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
+	 */
+	export const getSecureRelForTarget: ({ target, rel, }: {
 	    href?: string | undefined;
 	    target?: string | undefined;
 	    rel?: string | undefined;
@@ -15854,9 +15877,16 @@ declare module '@elastic/eui/src/components/modal/modal_header' {
 
 }
 declare module '@elastic/eui/src/components/modal/modal_header_title' {
-	import { FunctionComponent, HTMLAttributes } from 'react';
+	import { FunctionComponent, HTMLAttributes, ElementType } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	export type EuiModalHeaderTitleProps = FunctionComponent<HTMLAttributes<HTMLDivElement> & CommonProps>;
+	export type EuiModalHeaderTitleProps = FunctionComponent<HTMLAttributes<HTMLHeadingElement> & CommonProps & {
+	    /**
+	     * The tag to render. Can be changed to a lower heading
+	     * level like `h2` or a container `div`.
+	     * @default h1
+	     */
+	    component?: ElementType;
+	}>;
 	export const EuiModalHeaderTitle: EuiModalHeaderTitleProps;
 
 }
@@ -15876,8 +15906,9 @@ declare module '@elastic/eui/src/components/modal/modal_body' {
 
 }
 declare module '@elastic/eui/src/components/modal/confirm_modal' {
-	import React, { FunctionComponent, ReactNode } from 'react';
+	import React, { FunctionComponent, ComponentProps, ReactNode } from 'react';
 	import { EuiModalProps } from '@elastic/eui/src/components/modal/modal';
+	import { EuiModalHeaderTitleProps } from '@elastic/eui/src/components/modal/modal_header_title';
 	import { EuiButtonColor } from '@elastic/eui/src/components/button';
 	export interface EuiConfirmModalProps extends Omit<EuiModalProps, 'children' | 'onClose' | 'title'> {
 	    /**
@@ -15885,6 +15916,7 @@ declare module '@elastic/eui/src/components/modal/confirm_modal' {
 	     */
 	    children?: ReactNode;
 	    title?: ReactNode;
+	    titleProps?: ComponentProps<EuiModalHeaderTitleProps>;
 	    cancelButtonText?: ReactNode;
 	    confirmButtonText?: ReactNode;
 	    onCancel: (event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement>) => void;
@@ -19996,6 +20028,13 @@ declare module '@elastic/eui/src/components/basic_table/expanded_item_actions' {
 	}
 	export const ExpandedItemActions: <T extends {}>({ actions, itemId, item, actionEnabled, className, }: ExpandedItemActionsProps<T>) => ReactElement;
 
+}
+declare module '@elastic/eui/src/components/basic_table/basic_table.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiBasicTableBodyLoading: ({ euiTheme }: UseEuiTheme) => import("@emotion/utils").SerializedStyles;
+	export const safariLoadingWorkaround: () => import("@emotion/utils").SerializedStyles;
+	export const euiBasicTableActionsWrapper: import("@emotion/utils").SerializedStyles;
+
 }
 declare module '@elastic/eui/src/components/basic_table/basic_table' {
 	import { Component, HTMLAttributes, ReactNode } from 'react';
@@ -20130,17 +20169,11 @@ declare module '@elastic/eui/src/components/basic_table/basic_table' {
 	    static getDerivedStateFromProps<T>(nextProps: EuiBasicTableProps<T>, prevState: State<T>): {
 	        selection: T[];
 	    } | null;
-	    private cleanups;
-	    private tbody;
 	    constructor(props: EuiBasicTableProps<T>);
 	    componentDidMount(): void;
-	    componentDidUpdate(prevProps: EuiBasicTableProps<T>): void;
-	    componentWillUnmount(): void;
+	    componentDidUpdate(): void;
 	    getInitialSelection(): void;
 	    setSelection(newSelection: T[]): void;
-	    private setTbody;
-	    private addLoadingListeners;
-	    private removeLoadingListeners;
 	    buildCriteria(props: EuiBasicTableProps<T>): Criteria<T>;
 	    changeSelection(selection: T[]): void;
 	    clearSelection(): void;
@@ -20157,8 +20190,8 @@ declare module '@elastic/eui/src/components/basic_table/basic_table' {
 	    renderTableHead(): JSX.Element;
 	    renderTableFooter(): JSX.Element | null;
 	    renderTableBody(): JSX.Element;
-	    renderErrorBody(error: string): JSX.Element;
-	    renderEmptyBody(): JSX.Element;
+	    renderErrorMessage(error: string): JSX.Element;
+	    renderEmptyMessage(): JSX.Element;
 	    renderItemRow(item: T, rowIndex: number): JSX.Element;
 	    renderItemSelectionCell(itemId: ItemId<T>, item: T, selected: boolean): JSX.Element;
 	    renderItemActionsCell(itemId: ItemIdResolved, item: T, column: EuiTableActionsColumnType<T>, columnIndex: number): JSX.Element;
@@ -20767,6 +20800,10 @@ declare module '@elastic/eui/src/components/resizable_container/resizable_panel'
 	     * Custom CSS properties applied to the wrapping `.euiResizablePanel` div
 	     */
 	    style?: CSSProperties;
+	    /**
+	     * tabIndex={0} provides full keyboard access when content overflows `<EuiResizablePanel />`
+	     */
+	    tabIndex?: number;
 	    /**
 	     * Props to add to the wrapping `.euiResizablePanel` div
 	     */
@@ -25755,6 +25792,7 @@ declare module '@elastic/eui' {
 "euiDataGridHeaderCell.sortedByAscendingMultiple": any;
 "euiDataGridHeaderCell.sortedByDescendingMultiple": any;
 "euiDataGridHeaderCell.actionsPopoverScreenReaderText": any;
+"euiColumnSelector.dragHandleAriaLabel": any;
 "euiColumnSelector.button": any;
 "euiColumnSelector.buttonActiveSingular": any;
 "euiColumnSelector.buttonActivePlural": any;