@elastic/eui 104.1.0 → 105.0.0

package/optimize/es/components/flyout/sessions/use_eui_flyout.js

@@ -0,0 +1,94 @@
+/*
+ * 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 { useEuiFlyoutSessionContext } from './flyout_provider';
+
+/**
+ * Options that control a main flyout in a session
+ */
+
+/**
+ * Options that control a child flyout in a session
+ */
+
+/**
+ * Options for opening both a main flyout and child flyout simultaneously
+ */
+
+/**
+ * Hook for accessing the flyout API
+ */
+export function useEuiFlyoutSession() {
+  var _state$activeFlyoutGr, _state$activeFlyoutGr2;
+  var _useEuiFlyoutSessionC = useEuiFlyoutSessionContext(),
+    state = _useEuiFlyoutSessionC.state,
+    dispatch = _useEuiFlyoutSessionC.dispatch;
+  var openFlyout = function openFlyout(options) {
+    dispatch({
+      type: 'OPEN_MAIN_FLYOUT',
+      payload: options
+    });
+  };
+  var openChildFlyout = function openChildFlyout(options) {
+    if (!state.activeFlyoutGroup || !state.activeFlyoutGroup.isMainOpen) {
+      console.warn('useEuiFlyoutApi: Cannot open child flyout when main flyout is not open.');
+      return;
+    }
+    dispatch({
+      type: 'OPEN_CHILD_FLYOUT',
+      payload: options
+    });
+  };
+  var openFlyoutGroup = function openFlyoutGroup(options) {
+    dispatch({
+      type: 'OPEN_FLYOUT_GROUP',
+      payload: {
+        main: {
+          size: options.main.size,
+          flyoutProps: options.main.flyoutProps,
+          onUnmount: options.main.onUnmount
+        },
+        child: {
+          size: options.child.size,
+          flyoutProps: options.child.flyoutProps,
+          onUnmount: options.child.onUnmount
+        },
+        meta: options.meta
+      }
+    });
+  };
+  var closeChildFlyout = function closeChildFlyout() {
+    dispatch({
+      type: 'CLOSE_CHILD_FLYOUT'
+    });
+  };
+  var goBack = function goBack() {
+    dispatch({
+      type: 'GO_BACK'
+    });
+  };
+  var canGoBack = !!state.activeFlyoutGroup;
+  var isFlyoutOpen = !!((_state$activeFlyoutGr = state.activeFlyoutGroup) !== null && _state$activeFlyoutGr !== void 0 && _state$activeFlyoutGr.isMainOpen);
+  var isChildFlyoutOpen = !!((_state$activeFlyoutGr2 = state.activeFlyoutGroup) !== null && _state$activeFlyoutGr2 !== void 0 && _state$activeFlyoutGr2.isChildOpen);
+  var clearHistory = function clearHistory() {
+    dispatch({
+      type: 'CLEAR_HISTORY'
+    });
+  };
+  return {
+    openFlyout: openFlyout,
+    openChildFlyout: openChildFlyout,
+    openFlyoutGroup: openFlyoutGroup,
+    closeChildFlyout: closeChildFlyout,
+    goBack: goBack,
+    canGoBack: canGoBack,
+    isFlyoutOpen: isFlyoutOpen,
+    isChildFlyoutOpen: isChildFlyoutOpen,
+    clearHistory: clearHistory
+  };
+}

package/optimize/es/components/icon/icon_map.js

@@ -199,9 +199,8 @@ export var typeToPathMap = {
   heartbeatApp: 'app_heartbeat',
   heatmap: 'heatmap',
   help: 'help',
+  // NOTE: Might be deprecated later (not recommended in Kibana)
   home: 'home',
-  iInCircle: 'info',
-  // NOTE: To be deprecated in favor of `info`
   info: 'info',
   image: 'image',
   importAction: 'import',
@@ -369,8 +368,6 @@ export var typeToPathMap = {
   plusInSquare: 'plus_in_square',
   popout: 'popout',
   push: 'push',
-  questionInCircle: 'question',
-  // NOTE: To be deprecated in favor of `question`
   question: 'question',
   quote: 'quote',
   readOnly: 'readOnly',

package/optimize/es/components/progress/progress.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "color", "size", "position", "max", "valueText", "label", "value", "labelProps"];
 /*
@@ -9,12 +10,13 @@ var _excluded = ["className", "color", "size", "position", "max", "valueText", "
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import { EuiI18n } from '../i18n';
 import { EuiInnerText } from '../inner_text';
 import { isNil } from '../../services/predicate';
 import { useEuiTheme, makeHighContrastColor } from '../../services';
+import { EuiScreenReaderOnly } from '../accessibility';
 import { euiProgressStyles, euiProgressDataStyles, euiProgressLabelStyles, euiProgressValueTextStyles } from './progress.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = ['xs', 's', 'm', 'l'];
@@ -35,6 +37,16 @@ export var EuiProgress = function EuiProgress(_ref) {
     value = _ref.value,
     labelProps = _ref.labelProps,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var valueTextRef = useRef(null);
+  var labelRef = useRef(null);
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerValueText = _useState2[0],
+    setInnerValueText = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    labelText = _useState4[0],
+    setLabelText = _useState4[1];
   var determinate = !isNil(max);
   var isNamedColor = COLORS.includes(color);
   var euiTheme = useEuiTheme();
@@ -67,6 +79,11 @@ export var EuiProgress = function EuiProgress(_ref) {
     // valueText exists
     valueRender = valueText;
   }
+  useEffect(function () {
+    var _valueTextRef$current, _valueTextRef$current2, _labelRef$current$tex, _labelRef$current;
+    setInnerValueText((_valueTextRef$current = (_valueTextRef$current2 = valueTextRef.current) === null || _valueTextRef$current2 === void 0 ? void 0 : _valueTextRef$current2.textContent) !== null && _valueTextRef$current !== void 0 ? _valueTextRef$current : '');
+    setLabelText((_labelRef$current$tex = (_labelRef$current = labelRef.current) === null || _labelRef$current === void 0 ? void 0 : _labelRef$current.textContent) !== null && _labelRef$current$tex !== void 0 ? _labelRef$current$tex : '');
+  }, [label, valueRender, value]);
 
   // Because of a Firefox animation issue, indeterminate progress needs to not use <progress />.
   // See https://css-tricks.com/html5-progress-element/
@@ -75,29 +92,41 @@ export var EuiProgress = function EuiProgress(_ref) {
     return ___EmotionJSX(React.Fragment, null, label || valueText ? ___EmotionJSX("div", {
       css: dataCssStyles,
       className: "euiProgress__data"
-    }, label && ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
+    }, label && ___EmotionJSX(EuiInnerText, null, function (_ref2, innerText) {
       return ___EmotionJSX("span", _extends({
         title: innerText,
-        ref: ref
+        ref: function ref(node) {
+          labelRef.current = node;
+          _ref2 === null || _ref2 === void 0 || _ref2(node);
+        }
       }, labelProps, {
         className: labelClasses,
-        css: labelCssStyles
+        css: labelCssStyles,
+        "aria-hidden": "true"
       }), label);
-    }), valueRender && ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
+    }), valueRender && ___EmotionJSX(EuiInnerText, null, function (_ref3, innerText) {
       return ___EmotionJSX("span", {
         title: innerText,
-        ref: ref,
+        ref: function ref(node) {
+          valueTextRef.current = node;
+          _ref3 === null || _ref3 === void 0 || _ref3(node);
+        },
         style: customTextColorStyles,
         css: valueTextCssStyles,
-        className: "euiProgress__valueText"
+        className: "euiProgress__valueText",
+        "aria-hidden": "true"
       }, valueRender);
-    })) : undefined, ___EmotionJSX("progress", _extends({
+    })) : undefined, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("div", {
+      "aria-live": "polite",
+      "aria-atomic": "true"
+    }, ___EmotionJSX("span", null, label && "".concat(label, " "), valueRender || value))), ___EmotionJSX("progress", _extends({
       css: cssStyles,
       className: classes,
       style: customColorStyles,
       max: max,
       value: value,
-      "aria-hidden": label && valueText ? true : false
+      "aria-valuetext": innerValueText || undefined,
+      "aria-label": labelText || undefined
     }, rest)));
   } else {
     return ___EmotionJSX("div", _extends({

package/optimize/es/components/table/table_row.styles.js

@@ -21,13 +21,14 @@ export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
     cellContentPadding = _euiTableVariables.cellContentPadding,
     mobileSizes = _euiTableVariables.mobileSizes,
     checkboxSize = _euiTableVariables.checkboxSize;
+  var markedStyles = "\n    :where(&.euiTableRow--marked):hover {\n      background-color: ".concat(rowColors.marked.hover, ";\n    }\n  ");
   return {
-    euiTableRow: /*#__PURE__*/css(";label:euiTableRow;"),
+    euiTableRow: /*#__PURE__*/css(":where(&.euiTableRow--marked){background-color:", rowColors.marked.background, ";};label:euiTableRow;"),
     desktop: {
-      desktop: /*#__PURE__*/css("&:hover{background-color:", rowColors.hover, ";};label:desktop;"),
+      desktop: /*#__PURE__*/css("&:hover{background-color:", rowColors.hover, ";}", markedStyles, ";;label:desktop;"),
       expanded: /*#__PURE__*/css("background-color:", rowColors.hover, ";", expandedAnimationCss, ";;label:expanded;"),
-      clickable: /*#__PURE__*/css("&:hover{background-color:", rowColors.clickable.hover, ";cursor:pointer;}&:focus{background-color:", rowColors.clickable.focus, ";};label:clickable;"),
-      selected: /*#__PURE__*/css("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.color, ";}&:hover,&:hover+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.hover, ";};label:selected;"),
+      clickable: /*#__PURE__*/css("&:hover{background-color:", rowColors.clickable.hover, ";cursor:pointer;}", markedStyles, " &:focus{background-color:", rowColors.clickable.focus, ";};label:clickable;"),
+      selected: /*#__PURE__*/css("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.background, ";}&:hover,&:hover+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.hover, ";};label:selected;"),
       // Offset expanded & selectable rows by the checkbox width to line up content with the 2nd column
       // Set on the `<td>` because padding can't be applied to `<tr>` elements directly
       checkboxOffset: /*#__PURE__*/css("&>.euiTableRowCell:first-child{", logicalCSS('padding-left', checkboxSize), ";};label:checkboxOffset;")
@@ -36,7 +37,7 @@ export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
       mobile: /*#__PURE__*/css("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", logicalCSS('margin-bottom', cellContentPadding), euiShadow(euiThemeContext, 's', {
         borderAllInHighContrastMode: true
       }), " background-color:", euiTheme.colors.backgroundBasePlain, ";border-radius:", euiTheme.border.radius.medium, ";", cssSupportsHasWithNextSibling("\n            &:has(+ .euiTableRow-isExpandedRow) {\n              ".concat(logicalCSS('border-bottom-left-radius', 0), "\n              ").concat(logicalCSS('border-bottom-right-radius', 0), "\n            }\n          ")), ";;label:mobile;"),
-      selected: /*#__PURE__*/css("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.color, ";};label:selected;"),
+      selected: /*#__PURE__*/css("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.background, ";};label:selected;"),
       /**
        * Left column offset (no border)
        * Used for selection checkbox, which will be absolutely positioned
@@ -73,12 +74,16 @@ var _rowColorVariables = function _rowColorVariables(_ref2) {
   return {
     hover: euiTheme.components.tableRowBackgroundHover,
     selected: {
-      color: euiTheme.components.tableRowBackgroundSelected,
+      background: euiTheme.components.tableRowBackgroundSelected,
       hover: euiTheme.components.tableRowBackgroundSelectedHover
     },
     clickable: {
       hover: euiTheme.components.tableRowInteractiveBackgroundHover,
       focus: euiTheme.components.tableRowInteractiveBackgroundFocus
+    },
+    marked: {
+      background: euiTheme.components.tableRowBackgroundMarked,
+      hover: euiTheme.components.tableRowBackgroundMarkedHover
     }
   };
 };