@elastic/eui 71.1.0 → 72.0.0

package/es/components/selectable/selectable_list/selectable_list.js

@@ -227,6 +227,9 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
           onOptionClick = _this$props4.onOptionClick,
           options = _this$props4.options,
           singleSelection = _this$props4.singleSelection;
+
+      var changedOption = _objectSpread({}, addedOption);
+
       var updatedOptions = options.map(function (option) {
         // if singleSelection is enabled, uncheck any selected option(s)
         var updatedOption = _objectSpread({}, option);
@@ -238,11 +241,12 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
 
         if (option === addedOption) {
           updatedOption.checked = 'on';
+          changedOption = updatedOption;
         }
 
         return updatedOption;
       });
-      onOptionClick(updatedOptions, event);
+      onOptionClick(updatedOptions, event, changedOption);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onRemoveOption", function (removedOption, event) {
@@ -250,33 +254,40 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
           onOptionClick = _this$props5.onOptionClick,
           singleSelection = _this$props5.singleSelection,
           options = _this$props5.options;
+
+      var changedOption = _objectSpread({}, removedOption);
+
       var updatedOptions = options.map(function (option) {
         var updatedOption = _objectSpread({}, option);
 
         if (option === removedOption && singleSelection !== 'always') {
           delete updatedOption.checked;
+          changedOption = updatedOption;
         }
 
         return updatedOption;
       });
-      onOptionClick(updatedOptions, event);
+      onOptionClick(updatedOptions, event, changedOption);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onExcludeOption", function (excludedOption, event) {
       var _this$props6 = _this.props,
           onOptionClick = _this$props6.onOptionClick,
           options = _this$props6.options;
-      excludedOption.checked = 'off';
+
+      var changedOption = _objectSpread({}, excludedOption);
+
       var updatedOptions = options.map(function (option) {
         var updatedOption = _objectSpread({}, option);
 
         if (option === excludedOption) {
           updatedOption.checked = 'off';
+          changedOption = updatedOption;
         }
 
         return updatedOption;
       });
-      onOptionClick(updatedOptions, event);
+      onOptionClick(updatedOptions, event, changedOption);
     });
 
     return _this;
@@ -590,7 +601,8 @@ EuiSelectableList.propTypes = {
   searchValue: PropTypes.string.isRequired,
 
   /**
-     * Returns the array of options with altered checked state
+     * Returns the array of options with altered checked state, the click/keyboard event,
+     * and the option that triggered the click/keyboard event
      */
   onOptionClick: PropTypes.func.isRequired,
 

package/es/components/tabs/tab.js

@@ -1,4 +1,4 @@
-var _excluded = ["isSelected", "children", "className", "disabled", "href", "target", "rel", "prepend", "append", "size", "expand"];
+var _excluded = ["isSelected", "children", "className", "disabled", "href", "target", "rel", "prepend", "append"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -13,12 +13,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { getSecureRelForTarget, useEuiTheme } from '../../services';
 import { validateHref } from '../../services/security/href_validator';
 import { euiTabStyles, euiTabContentStyles } from './tab.styles';
+import { EuiTabsContext } from './tabs_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiTab = function EuiTab(_ref) {
   var isSelected = _ref.isSelected,
@@ -30,11 +31,12 @@ export var EuiTab = function EuiTab(_ref) {
       rel = _ref.rel,
       prepend = _ref.prepend,
       append = _ref.append,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'm' : _ref$size,
-      expand = _ref.expand,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var _useContext = useContext(EuiTabsContext),
+      size = _useContext.size,
+      expand = _useContext.expand;
+
   var euiTheme = useEuiTheme();
   var isHrefValid = !href || validateHref(href);
   var disabled = _disabled || !isHrefValid; // Keep CSS classnames for reference
@@ -114,18 +116,6 @@ EuiTab.propTypes = {
      * Will be excluded from interactive effects.
      */
   append: PropTypes.node,
-
-  /**
-     * Evenly stretches each tab to fill the
-     * horizontal space
-     */
-  expand: PropTypes.bool,
-
-  /**
-     * Sizes affect both font size and overall size.
-     * Only use the `xl` size when displayed as page titles.
-     */
-  size: PropTypes.any,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,

package/es/components/tabs/tabbed_content/tabbed_content.js

@@ -239,18 +239,6 @@ EuiTabbedContent.propTypes = {
        * Will be excluded from interactive effects.
        */
     append: PropTypes.node,
-
-    /**
-       * Evenly stretches each tab to fill the
-       * horizontal space
-       */
-    expand: PropTypes.bool,
-
-    /**
-       * Sizes affect both font size and overall size.
-       * Only use the `xl` size when displayed as page titles.
-       */
-    size: PropTypes.any,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
@@ -269,8 +257,6 @@ EuiTabbedContent.propTypes = {
     disabled: PropTypes.bool,
     prepend: PropTypes.node,
     append: PropTypes.node,
-    expand: PropTypes.bool,
-    size: PropTypes.any,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
@@ -290,8 +276,6 @@ EuiTabbedContent.propTypes = {
     disabled: PropTypes.bool,
     prepend: PropTypes.node,
     append: PropTypes.node,
-    expand: PropTypes.bool,
-    size: PropTypes.any,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,

package/es/components/tabs/tabs.js

@@ -16,8 +16,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import { useEuiTheme } from '../../services';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
 import { euiTabsStyles } from './tabs.styles';
+import { EuiTabsContext } from './tabs_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = ['s', 'm', 'l', 'xl'];
 export var EuiTabs = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -35,21 +35,17 @@ export var EuiTabs = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var classes = classNames('euiTabs', className);
   var styles = euiTabsStyles(euiTheme);
   var cssStyles = [styles.euiTabs, styles[size], bottomBorder && styles.bottomBorder];
-  var tabItems = React.Children.map(children, function (child) {
-    if ( /*#__PURE__*/React.isValidElement(child)) {
-      return cloneElementWithCss(child, {
-        // we're passing the parent `size` and `expand` down to the children
-        size: size,
-        expand: expand
-      });
-    }
-  });
   return ___EmotionJSX("div", _extends({
     ref: ref,
     className: classes,
     css: cssStyles
   }, children && {
     role: 'tablist'
-  }, rest), tabItems);
+  }, rest), ___EmotionJSX(EuiTabsContext.Provider, {
+    value: {
+      expand: expand,
+      size: size
+    }
+  }, children));
 });
 EuiTabs.displayName = 'EuiTabs';

package/es/components/tabs/tabs_context.js

@@ -0,0 +1,13 @@
+/*
+ * 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 contextDefaults = {
+  expand: false,
+  size: 'm'
+};
+export var EuiTabsContext = /*#__PURE__*/createContext(contextDefaults);

package/eui.d.ts

@@ -13479,11 +13479,18 @@ declare module '@elastic/eui/src/components/tabs/tabs' {
 	    children?: React.ReactNode;
 	} & React.RefAttributes<HTMLDivElement>>;
 
+}
+declare module '@elastic/eui/src/components/tabs/tabs_context' {
+	
+	import { EuiTabsProps } from '@elastic/eui/src/components/tabs/tabs';
+	export type EuiTabsContextValues = Required<Pick<EuiTabsProps, 'expand' | 'size'>>;
+	export const contextDefaults: EuiTabsContextValues;
+	export const EuiTabsContext: import("react").Context<Required<Pick<EuiTabsProps, "size" | "expand">>>;
+
 }
 declare module '@elastic/eui/src/components/tabs/tab' {
 	import { MouseEventHandler, AnchorHTMLAttributes, ButtonHTMLAttributes, FunctionComponent, ReactNode } from 'react';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
-	import { EuiTabsProps, EuiTabsSizes } from '@elastic/eui/src/components/tabs/tabs';
 	export interface EuiTabProps extends CommonProps {
 	    isSelected?: boolean;
 	    disabled?: boolean;
@@ -13497,16 +13504,6 @@ declare module '@elastic/eui/src/components/tabs/tab' {
 	     * Will be excluded from interactive effects.
 	     */
 	    append?: ReactNode;
-	    /**
-	     * Evenly stretches each tab to fill the
-	     * horizontal space
-	     */
-	    expand?: EuiTabsProps['expand'];
-	    /**
-	     * Sizes affect both font size and overall size.
-	     * Only use the `xl` size when displayed as page titles.
-	     */
-	    size?: EuiTabsSizes;
 	} type EuiTabPropsForAnchor = EuiTabProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'href'> & {
 	    href?: string;
 	    onClick?: MouseEventHandler<HTMLAnchorElement>;
@@ -13950,14 +13947,26 @@ declare module '@elastic/eui/src/components/date_picker/auto_refresh/refresh_int
 
 }
 declare module '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover' {
-	import { Component } from 'react';
+	import { FunctionComponent, ReactNode, ReactElement } from 'react';
+	import { EuiQuickSelect } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select';
+	import { EuiCommonlyUsedTimeRanges } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges';
+	import { EuiRecentlyUsed } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/recently_used';
+	import { EuiRefreshInterval } from '@elastic/eui/src/components/date_picker/auto_refresh/refresh_interval';
 	import { TimeOptions } from '@elastic/eui/src/components/date_picker/super_date_picker/time_options';
 	import { DurationRange, ApplyRefreshInterval, ApplyTime, QuickSelect, QuickSelectPanel } from '@elastic/eui/src/components/date_picker/types';
+	export type CustomQuickSelectRenderOptions = {
+	    quickSelect: ReactElement<typeof EuiQuickSelect>;
+	    commonlyUsedRanges: ReactElement<typeof EuiCommonlyUsedTimeRanges>;
+	    recentlyUsedRanges: ReactElement<typeof EuiRecentlyUsed>;
+	    refreshInterval?: ReactElement<typeof EuiRefreshInterval>;
+	    customQuickSelectPanels?: ReactNode;
+	};
 	export interface EuiQuickSelectPopoverProps {
 	    applyRefreshInterval?: ApplyRefreshInterval;
 	    applyTime: ApplyTime;
 	    commonlyUsedRanges: DurationRange[];
 	    customQuickSelectPanels?: QuickSelectPanel[];
+	    customQuickSelectRender?: (options: CustomQuickSelectRenderOptions) => ReactNode;
 	    dateFormat: string;
 	    end: string;
 	    isDisabled: boolean;
@@ -13967,20 +13976,10 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/quick_
 	    start: string;
 	    timeOptions: TimeOptions;
 	}
-	interface EuiQuickSelectPopoverState {
-	    isOpen: boolean;
+	export const EuiQuickSelectPopover: FunctionComponent<EuiQuickSelectPopoverProps>;
+	export const EuiQuickSelectPanels: FunctionComponent<Omit<EuiQuickSelectPopoverProps, 'isDisabled'> & {
 	    prevQuickSelect?: QuickSelect;
-	}
-	export class EuiQuickSelectPopover extends Component<EuiQuickSelectPopoverProps, EuiQuickSelectPopoverState> {
-	    state: EuiQuickSelectPopoverState;
-	    closePopover: () => void;
-	    togglePopover: () => void;
-	    applyTime: ApplyTime;
-	    renderDateTimeSections: () => JSX.Element;
-	    renderCustomQuickSelectPanels: () => JSX.Element[] | null;
-	    render(): JSX.Element;
-	}
-	export {};
+	}>;
 
 }
 declare module '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover' {
@@ -14182,13 +14181,14 @@ declare module '@elastic/eui/src/components/date_picker/auto_refresh/auto_refres
 
 }
 declare module '@elastic/eui/src/components/date_picker/super_date_picker/super_date_picker' {
-	import { Component, FocusEventHandler, FunctionComponent } from 'react';
+	import { Component, FocusEventHandler, FunctionComponent, ReactNode } from 'react';
 	import { LocaleSpecifier } from 'moment';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { ShortDate, Milliseconds, DurationRange, ApplyTime, ApplyRefreshInterval, QuickSelectPanel } from '@elastic/eui/src/components/date_picker/types';
 	import { TimeOptions } from '@elastic/eui/src/components/date_picker/super_date_picker/time_options';
 	import { AsyncInterval } from '@elastic/eui/src/components/date_picker/super_date_picker/async_interval';
 	import { EuiSuperUpdateButtonProps } from '@elastic/eui/src/components/date_picker/super_date_picker/super_update_button';
+	import { CustomQuickSelectRenderOptions } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover';
 	import { EuiDatePopoverContentProps } from '@elastic/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_content';
 	export interface OnTimeChangeProps extends DurationRange {
 	    isInvalid: boolean;
@@ -14200,6 +14200,12 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/super_
 	export type EuiSuperDatePickerProps = CommonProps & {
 	    commonlyUsedRanges?: DurationRange[];
 	    customQuickSelectPanels?: QuickSelectPanel[];
+	    /**
+	     * An optional render prop function that allows customizing the display of the Quick Select menu.
+	     * This function passes all default quick select panels within an object, allowing you to
+	     * re-order panels, omit certain panels entirely, or pass in your own fully custom content.
+	     */
+	    customQuickSelectRender?: (options: CustomQuickSelectRenderOptions) => ReactNode;
 	    /**
 	     * Specifies the formatted used when displaying dates and/or datetimes
 	     */
@@ -15331,7 +15337,7 @@ declare module '@elastic/eui/src/components/markdown_editor/markdown_types' {
 	import { ComponentType, ReactNode } from 'react';
 	import { VFile } from 'vfile';
 	import { Node as UnistNode, Position as UnistPosition } from 'unist';
-	import { Parser } from 'remark-parse';
+	import { Parser } from 'remark-parse-no-trim';
 	import { VFileMessage } from 'vfile-message';
 	import { IconType } from '@elastic/eui/src/components/icon';
 	export interface RemarkParser {
@@ -17946,9 +17952,10 @@ declare module '@elastic/eui/src/components/selectable/selectable_list/selectabl
 	     */
 	    searchValue: string;
 	    /**
-	     * Returns the array of options with altered checked state
+	     * Returns the array of options with altered checked state, the click/keyboard event,
+	     * and the option that triggered the click/keyboard event
 	     */
-	    onOptionClick: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent) => void;
+	    onOptionClick: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent, clickedOption: EuiSelectableOption<T>) => void;
 	    /**
 	     * Custom render for the label portion of the option;
 	     * Takes (option, searchValue), returns ReactNode
@@ -18037,9 +18044,10 @@ declare module '@elastic/eui/src/components/selectable/selectable' {
 	    options: Array<EuiSelectableOption<T>>;
 	    /**
 	     * Passes back the altered `options` array with selected options having `checked: 'on'`.
-	     * Also passes back the React click/keyboard event as a second argument.
+	     * Also passes back the React click/keyboard event as a second argument,
+	     * and the option that triggered the onChange event as a third argument.
 	     */
-	    onChange?: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent) => void;
+	    onChange?: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent, changedOption: EuiSelectableOption<T>) => void;
 	    /**
 	     * Passes back the current active option whenever the user changes the currently
 	     * highlighted option via keyboard navigation or searching.
@@ -18133,7 +18141,7 @@ declare module '@elastic/eui/src/components/selectable/selectable' {
 	    incrementActiveOptionIndex: (amount: number) => void;
 	    onSearchChange: (searchValue: string, visibleOptions: Array<EuiSelectableOption<T>>) => void;
 	    onContainerBlur: (e: React.FocusEvent) => void;
-	    onOptionClick: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent) => void;
+	    onOptionClick: (options: Array<EuiSelectableOption<T>>, event: EuiSelectableOnChangeEvent, clickedOption: EuiSelectableOption<T>) => void;
 	    scrollToItem: (index: number, align?: Align | undefined) => void;
 	    makeOptionId: (index?: number | undefined) => string;
 	    render(): JSX.Element;
@@ -25815,6 +25823,7 @@ declare module '@elastic/eui' {
 "euiPrettyInterval.daysShorthand": any;
 "euiPrettyInterval.off": any;
 "euiCommonlyUsedTimeRanges.legend": any;
+"euiQuickSelectPopover.buttonLabel": any;
 "euiQuickSelect.legendText": any;
 "euiQuickSelect.quickSelectTitle": any;
 "euiQuickSelect.previousLabel": any;

package/i18ntokens.json

@@ -3151,6 +3151,22 @@
     },
     "filepath": "src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx"
   },
+  {
+    "token": "euiQuickSelectPopover.buttonLabel",
+    "defString": "Date quick select",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 86,
+        "column": 22
+      },
+      "end": {
+        "line": 89,
+        "column": 3
+      }
+    },
+    "filepath": "src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx"
+  },
   {
     "token": "euiQuickSelect.legendText",
     "defString": "Quick select a time range",
@@ -5349,11 +5365,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 567,
+        "line": 570,
         "column": 16
       },
       "end": {
-        "line": 570,
+        "line": 573,
         "column": 18
       }
     },
@@ -5365,11 +5381,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 589,
+        "line": 592,
         "column": 14
       },
       "end": {
-        "line": 593,
+        "line": 596,
         "column": 16
       }
     },
@@ -5381,11 +5397,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 608,
+        "line": 611,
         "column": 14
       },
       "end": {
-        "line": 611,
+        "line": 614,
         "column": 16
       }
     },
@@ -5397,11 +5413,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 673,
+        "line": 676,
         "column": 6
       },
       "end": {
-        "line": 673,
+        "line": 676,
         "column": 78
       }
     },
@@ -5413,11 +5429,11 @@
     "highlighting": "code",
     "loc": {
       "start": {
-        "line": 700,
+        "line": 703,
         "column": 6
       },
       "end": {
-        "line": 706,
+        "line": 709,
         "column": 8
       }
     },
@@ -5429,11 +5445,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 718,
+        "line": 721,
         "column": 6
       },
       "end": {
-        "line": 727,
+        "line": 730,
         "column": 7
       }
     },
@@ -5445,11 +5461,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 718,
+        "line": 721,
         "column": 6
       },
       "end": {
-        "line": 727,
+        "line": 730,
         "column": 7
       }
     },

package/lib/components/date_picker/auto_refresh/refresh_interval.js

@@ -241,7 +241,9 @@ var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
           units = _this$state5.units;
       return (0, _react2.jsx)(_time_options.RenderI18nTimeOptions, null, function (_ref3) {
         var refreshUnitsOptions = _ref3.refreshUnitsOptions;
-        return (0, _react2.jsx)("fieldset", null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+        return (0, _react2.jsx)("fieldset", {
+          className: "euiQuickSelectPopover__panel"
+        }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
           alignItems: "center",
           gutterSize: "s",
           responsive: false,

package/lib/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js

@@ -56,10 +56,13 @@ var EuiCommonlyUsedTimeRanges = function EuiCommonlyUsedTimeRanges(_ref) {
       "data-test-subj": dataTestSubj
     }, label));
   });
-  return (0, _react2.jsx)("fieldset", null, (0, _react2.jsx)(_title.EuiTitle, {
+  return (0, _react2.jsx)("fieldset", {
+    className: "euiQuickSelectPopover__panel"
+  }, (0, _react2.jsx)(_title.EuiTitle, {
     size: "xxxs"
   }, (0, _react2.jsx)("legend", {
-    id: legendId
+    id: legendId,
+    className: "euiQuickSelectPopover__panelTitle"
   }, (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiCommonlyUsedTimeRanges.legend",
     default: "Commonly used"

package/lib/components/date_picker/super_date_picker/quick_select_popover/quick_select.js

@@ -209,7 +209,9 @@ var EuiQuickSelect = /*#__PURE__*/function (_Component) {
         return value === timeUnits;
       });
       var timeUnit = matchedTimeUnit ? matchedTimeUnit.text : '';
-      return (0, _react2.jsx)("fieldset", null, (0, _react2.jsx)(_i18n.EuiI18n, {
+      return (0, _react2.jsx)("fieldset", {
+        className: "euiQuickSelectPopover__panel"
+      }, (0, _react2.jsx)(_i18n.EuiI18n, {
         token: "euiQuickSelect.legendText",
         default: "Quick select a time range"
       }, function (legendText) {