@elastic/eui 104.1.0 → 105.0.0

package/optimize/lib/components/flyout/sessions/flyout_reducer.js

@@ -0,0 +1,217 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.flyoutReducer = flyoutReducer;
+exports.initialFlyoutState = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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) { (0, _defineProperty2.default)(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.
+ */
+
+/**
+ * Initial state for the flyout session
+ * @internal
+ */
+var initialFlyoutState = exports.initialFlyoutState = {
+  activeFlyoutGroup: null,
+  history: []
+};
+
+// Helper to apply size constraints for flyout groups
+var applySizeConstraints = function applySizeConstraints(group) {
+  var originalMainSize = group.config.mainSize;
+  var originalChildSize = group.config.childSize;
+  var newMainSize = originalMainSize;
+  var newChildSize = originalChildSize;
+  if (group.isChildOpen) {
+    if (originalMainSize === 'l') {
+      newMainSize = 'm'; // If main is 'l' with child, it must be converted to 'm'
+      newChildSize = 's'; // And child must be 's'
+    } else if (originalMainSize === 'm' && originalChildSize !== 's') {
+      newChildSize = 's'; // If main is 'm' with child, child must be 's'
+    }
+  }
+
+  // If sizes haven't changed, return the original group to preserve references
+  if (newMainSize === originalMainSize && newChildSize === originalChildSize) {
+    return group;
+  }
+  return _objectSpread(_objectSpread({}, group), {}, {
+    config: _objectSpread(_objectSpread({}, group.config), {}, {
+      mainSize: newMainSize,
+      childSize: newChildSize
+    })
+  });
+};
+
+/**
+ * Flyout reducer
+ * Controls state changes for flyout groups
+ */
+function flyoutReducer(state, action) {
+  switch (action.type) {
+    case 'OPEN_MAIN_FLYOUT':
+      {
+        var _state$activeFlyoutGr, _state$activeFlyoutGr2;
+        var _action$payload = action.payload,
+          size = _action$payload.size,
+          flyoutProps = _action$payload.flyoutProps,
+          onUnmount = _action$payload.onUnmount;
+        var newHistory = (0, _toConsumableArray2.default)(state.history);
+        if (state.activeFlyoutGroup) {
+          newHistory.push(state.activeFlyoutGroup);
+        }
+        var newActiveGroup = {
+          isMainOpen: true,
+          isChildOpen: false,
+          config: {
+            mainSize: size,
+            childSize: 's',
+            mainFlyoutProps: flyoutProps,
+            childFlyoutProps: {}
+          },
+          mainOnUnmount: onUnmount,
+          childOnUnmount: undefined,
+          meta: action.payload.meta !== undefined ? ((_state$activeFlyoutGr = state.activeFlyoutGroup) === null || _state$activeFlyoutGr === void 0 ? void 0 : _state$activeFlyoutGr.meta) !== undefined ? _objectSpread(_objectSpread({}, state.activeFlyoutGroup.meta), action.payload.meta) : action.payload.meta : (_state$activeFlyoutGr2 = state.activeFlyoutGroup) === null || _state$activeFlyoutGr2 === void 0 ? void 0 : _state$activeFlyoutGr2.meta
+        };
+        return {
+          activeFlyoutGroup: applySizeConstraints(newActiveGroup),
+          history: newHistory
+        };
+      }
+    case 'OPEN_CHILD_FLYOUT':
+      {
+        if (!state.activeFlyoutGroup || !state.activeFlyoutGroup.isMainOpen) {
+          console.warn('Cannot open child flyout: main flyout is not open or no active group.');
+          return state;
+        }
+        var _action$payload2 = action.payload,
+          _size = _action$payload2.size,
+          _flyoutProps = _action$payload2.flyoutProps,
+          _onUnmount = _action$payload2.onUnmount;
+        var updatedActiveGroup = _objectSpread(_objectSpread({}, state.activeFlyoutGroup), {}, {
+          isChildOpen: true,
+          config: _objectSpread(_objectSpread({}, state.activeFlyoutGroup.config), {}, {
+            childSize: _size,
+            childFlyoutProps: _flyoutProps
+          }),
+          childOnUnmount: _onUnmount,
+          meta: action.payload.meta !== undefined ? state.activeFlyoutGroup.meta !== undefined ? _objectSpread(_objectSpread({}, state.activeFlyoutGroup.meta), action.payload.meta) : action.payload.meta : state.activeFlyoutGroup.meta
+        });
+        return {
+          history: state.history,
+          activeFlyoutGroup: applySizeConstraints(updatedActiveGroup)
+        };
+      }
+    case 'OPEN_FLYOUT_GROUP':
+      {
+        var _action$payload3 = action.payload,
+          main = _action$payload3.main,
+          child = _action$payload3.child,
+          meta = _action$payload3.meta;
+        var _newHistory = (0, _toConsumableArray2.default)(state.history);
+        if (state.activeFlyoutGroup) {
+          _newHistory.push(state.activeFlyoutGroup);
+        }
+
+        // Create the new active group with both main and child flyouts open
+        var _newActiveGroup = {
+          isMainOpen: true,
+          isChildOpen: true,
+          config: {
+            mainSize: main.size,
+            childSize: child.size,
+            mainFlyoutProps: main.flyoutProps,
+            childFlyoutProps: child.flyoutProps
+          },
+          mainOnUnmount: main.onUnmount,
+          childOnUnmount: child.onUnmount,
+          meta: meta
+        };
+        return {
+          activeFlyoutGroup: applySizeConstraints(_newActiveGroup),
+          history: _newHistory
+        };
+      }
+    case 'CLOSE_CHILD_FLYOUT':
+      {
+        var _state$activeFlyoutGr3, _state$activeFlyoutGr4;
+        if (!state.activeFlyoutGroup || !state.activeFlyoutGroup.isChildOpen) {
+          console.warn('Cannot close child flyout: no child is open or no active group.');
+          return state;
+        }
+        (_state$activeFlyoutGr3 = (_state$activeFlyoutGr4 = state.activeFlyoutGroup).childOnUnmount) === null || _state$activeFlyoutGr3 === void 0 || _state$activeFlyoutGr3.call(_state$activeFlyoutGr4);
+        var _updatedActiveGroup = _objectSpread(_objectSpread({}, state.activeFlyoutGroup), {}, {
+          isChildOpen: false,
+          config: _objectSpread(_objectSpread({}, state.activeFlyoutGroup.config), {}, {
+            childFlyoutProps: {}
+          }),
+          childOnUnmount: undefined
+        });
+        return {
+          history: state.history,
+          activeFlyoutGroup: applySizeConstraints(_updatedActiveGroup)
+        };
+      }
+    case 'GO_BACK':
+      {
+        var _state$activeFlyoutGr7, _state$activeFlyoutGr8;
+        if (!state.activeFlyoutGroup) return initialFlyoutState;
+        if (state.activeFlyoutGroup.isChildOpen) {
+          var _state$activeFlyoutGr5, _state$activeFlyoutGr6;
+          (_state$activeFlyoutGr5 = (_state$activeFlyoutGr6 = state.activeFlyoutGroup).childOnUnmount) === null || _state$activeFlyoutGr5 === void 0 || _state$activeFlyoutGr5.call(_state$activeFlyoutGr6);
+        }
+        (_state$activeFlyoutGr7 = (_state$activeFlyoutGr8 = state.activeFlyoutGroup).mainOnUnmount) === null || _state$activeFlyoutGr7 === void 0 || _state$activeFlyoutGr7.call(_state$activeFlyoutGr8);
+
+        // Restore from history or return to initial state
+        if (state.history.length > 0) {
+          var _newHistory2 = (0, _toConsumableArray2.default)(state.history);
+          var previousGroup = _newHistory2.pop();
+          return {
+            activeFlyoutGroup: previousGroup ? applySizeConstraints(previousGroup) : null,
+            history: _newHistory2
+          };
+        } else {
+          return initialFlyoutState;
+        }
+      }
+    case 'UPDATE_ACTIVE_FLYOUT_CONFIG':
+      {
+        if (!state.activeFlyoutGroup) {
+          console.warn('Cannot update config: no active flyout group.');
+          return state;
+        }
+        var _action$payload4 = action.payload,
+          configChanges = _action$payload4.configChanges,
+          newMainOnUnmount = _action$payload4.newMainOnUnmount,
+          newChildOnUnmount = _action$payload4.newChildOnUnmount;
+        var _updatedActiveGroup2 = _objectSpread(_objectSpread({}, state.activeFlyoutGroup), {}, {
+          config: _objectSpread(_objectSpread({}, state.activeFlyoutGroup.config), configChanges),
+          mainOnUnmount: newMainOnUnmount !== undefined ? newMainOnUnmount : state.activeFlyoutGroup.mainOnUnmount,
+          childOnUnmount: newChildOnUnmount !== undefined ? newChildOnUnmount : state.activeFlyoutGroup.childOnUnmount
+        });
+        var finalUpdatedActiveGroup = applySizeConstraints(_updatedActiveGroup2);
+        return _objectSpread(_objectSpread({}, state), {}, {
+          activeFlyoutGroup: finalUpdatedActiveGroup
+        });
+      }
+    case 'CLEAR_HISTORY':
+      // Clear the history and remove the active group
+      return {
+        activeFlyoutGroup: null,
+        history: []
+      };
+    default:
+      return state;
+  }
+}

package/optimize/lib/components/flyout/sessions/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiFlyoutSessionProvider", {
+  enumerable: true,
+  get: function get() {
+    return _flyout_provider.EuiFlyoutSessionProvider;
+  }
+});
+Object.defineProperty(exports, "useEuiFlyoutSession", {
+  enumerable: true,
+  get: function get() {
+    return _use_eui_flyout.useEuiFlyoutSession;
+  }
+});
+Object.defineProperty(exports, "useEuiFlyoutSessionContext", {
+  enumerable: true,
+  get: function get() {
+    return _flyout_provider.useEuiFlyoutSessionContext;
+  }
+});
+var _flyout_provider = require("./flyout_provider");
+var _use_eui_flyout = require("./use_eui_flyout");

package/optimize/lib/components/flyout/sessions/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEuiFlyoutSession = useEuiFlyoutSession;
+var _flyout_provider = require("./flyout_provider");
+/*
+ * 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.
+ */
+
+/**
+ * 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
+ */
+function useEuiFlyoutSession() {
+  var _state$activeFlyoutGr, _state$activeFlyoutGr2;
+  var _useEuiFlyoutSessionC = (0, _flyout_provider.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/lib/components/icon/icon_map.js

@@ -205,9 +205,8 @@ var typeToPathMap = exports.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',
@@ -375,8 +374,6 @@ var typeToPathMap = exports.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/lib/components/progress/progress.js

@@ -1,18 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SIZES = exports.POSITIONS = exports.EuiProgress = exports.COLORS = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _i18n = require("../i18n");
 var _inner_text = require("../inner_text");
 var _predicate = require("../../services/predicate");
 var _services = require("../../services");
+var _accessibility = require("../accessibility");
 var _progress = require("./progress.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "color", "size", "position", "max", "valueText", "label", "value", "labelProps"];
@@ -23,6 +26,8 @@ var _excluded = ["className", "color", "size", "position", "max", "valueText", "
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SIZES = exports.SIZES = ['xs', 's', 'm', 'l'];
 var COLORS = exports.COLORS = ['primary', 'success', 'warning', 'danger', 'subdued', 'accent', 'accentSecondary', 'vis0', 'vis1', 'vis2', 'vis3', 'vis4', 'vis5', 'vis6', 'vis7', 'vis8', 'vis9'];
 var POSITIONS = exports.POSITIONS = ['fixed', 'absolute', 'static'];
@@ -41,6 +46,16 @@ var EuiProgress = exports.EuiProgress = function EuiProgress(_ref) {
     value = _ref.value,
     labelProps = _ref.labelProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var valueTextRef = (0, _react.useRef)(null);
+  var labelRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    innerValueText = _useState2[0],
+    setInnerValueText = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    labelText = _useState4[0],
+    setLabelText = _useState4[1];
   var determinate = !(0, _predicate.isNil)(max);
   var isNamedColor = COLORS.includes(color);
   var euiTheme = (0, _services.useEuiTheme)();
@@ -73,6 +88,11 @@ var EuiProgress = exports.EuiProgress = function EuiProgress(_ref) {
     // valueText exists
     valueRender = valueText;
   }
+  (0, _react.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/
@@ -81,29 +101,41 @@ var EuiProgress = exports.EuiProgress = function EuiProgress(_ref) {
     return (0, _react2.jsx)(_react.default.Fragment, null, label || valueText ? (0, _react2.jsx)("div", {
       css: dataCssStyles,
       className: "euiProgress__data"
-    }, label && (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
+    }, label && (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (_ref2, innerText) {
       return (0, _react2.jsx)("span", (0, _extends2.default)({
         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 && (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
+    }), valueRender && (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (_ref3, innerText) {
       return (0, _react2.jsx)("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, (0, _react2.jsx)("progress", (0, _extends2.default)({
+    })) : undefined, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("div", {
+      "aria-live": "polite",
+      "aria-atomic": "true"
+    }, (0, _react2.jsx)("span", null, label && "".concat(label, " "), valueRender || value))), (0, _react2.jsx)("progress", (0, _extends2.default)({
       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 (0, _react2.jsx)("div", (0, _extends2.default)({

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

@@ -27,13 +27,14 @@ var euiTableRowStyles = exports.euiTableRowStyles = function euiTableRowStyles(e
     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__*/(0, _react.css)(";label:euiTableRow;"),
+    euiTableRow: /*#__PURE__*/(0, _react.css)(":where(&.euiTableRow--marked){background-color:", rowColors.marked.background, ";};label:euiTableRow;"),
     desktop: {
-      desktop: /*#__PURE__*/(0, _react.css)("&:hover{background-color:", rowColors.hover, ";};label:desktop;"),
+      desktop: /*#__PURE__*/(0, _react.css)("&:hover{background-color:", rowColors.hover, ";}", markedStyles, ";;label:desktop;"),
       expanded: /*#__PURE__*/(0, _react.css)("background-color:", rowColors.hover, ";", expandedAnimationCss, ";;label:expanded;"),
-      clickable: /*#__PURE__*/(0, _react.css)("&:hover{background-color:", rowColors.clickable.hover, ";cursor:pointer;}&:focus{background-color:", rowColors.clickable.focus, ";};label:clickable;"),
-      selected: /*#__PURE__*/(0, _react.css)("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.color, ";}&:hover,&:hover+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.hover, ";};label:selected;"),
+      clickable: /*#__PURE__*/(0, _react.css)("&:hover{background-color:", rowColors.clickable.hover, ";cursor:pointer;}", markedStyles, " &:focus{background-color:", rowColors.clickable.focus, ";};label:clickable;"),
+      selected: /*#__PURE__*/(0, _react.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__*/(0, _react.css)("&>.euiTableRowCell:first-child{", (0, _global_styling.logicalCSS)('padding-left', checkboxSize), ";};label:checkboxOffset;")
@@ -42,7 +43,7 @@ var euiTableRowStyles = exports.euiTableRowStyles = function euiTableRowStyles(e
       mobile: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", (0, _global_styling.logicalCSS)('margin-bottom', cellContentPadding), (0, _euiThemeCommon.euiShadow)(euiThemeContext, 's', {
         borderAllInHighContrastMode: true
       }), " background-color:", euiTheme.colors.backgroundBasePlain, ";border-radius:", euiTheme.border.radius.medium, ";", (0, _supports.cssSupportsHasWithNextSibling)("\n            &:has(+ .euiTableRow-isExpandedRow) {\n              ".concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', 0), "\n              ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 0), "\n            }\n          ")), ";;label:mobile;"),
-      selected: /*#__PURE__*/(0, _react.css)("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.color, ";};label:selected;"),
+      selected: /*#__PURE__*/(0, _react.css)("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.background, ";};label:selected;"),
       /**
        * Left column offset (no border)
        * Used for selection checkbox, which will be absolutely positioned
@@ -79,12 +80,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
     }
   };
 };