@elastic/eui 95.10.1 → 95.11.0

package/optimize/lib/components/datagrid/body/cell/data_grid_cell.styles.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridRowCellStyles = exports.euiDataGridCellOutlineStyles = exports.euiDataGridCellOutlineSelectors = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../../global_styling");
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
+ * 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.
+ */
+var euiDataGridCellOutlineStyles = exports.euiDataGridCellOutlineStyles = function euiDataGridCellOutlineStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  var focusColor = euiTheme.colors.primary;
+  var hoverColor = euiTheme.colors.darkShade;
+  var outlineWidth = euiTheme.border.width.thick;
+  var borderRadius = (0, _global_styling.mathWithUnits)(euiTheme.border.radius.medium, function (x) {
+    return x / 2;
+  });
+
+  // Note: We use a pseudo element for the 'outline' over any other CSS approaches
+  // (outline, border, box-shadow) because it gives us the most control and reduces
+  // overlap with other cells or inner elements
+  return {
+    borderRadius: borderRadius,
+    focusColor: focusColor,
+    focusStyles: "\n      /* Remove outline as we're handling it manually. Needed to override global styles */\n      &:focus-visible {\n        outline: none;\n      }\n\n      &::after {\n        content: '';\n        /* We want this to be visually on top of cell content but not interactive */\n        z-index: 2;\n        pointer-events: none;\n        position: absolute;\n        inset: 0;\n        border: ".concat(outlineWidth, " solid ").concat(focusColor, ";\n        border-radius: ").concat(borderRadius, ";\n      }\n    "),
+    hoverColor: hoverColor,
+    hoverStyles: "\n      &::after {\n        border-color: ".concat(hoverColor, ";\n      }\n    ")
+  };
+};
+var euiDataGridCellOutlineSelectors = exports.euiDataGridCellOutlineSelectors = function euiDataGridCellOutlineSelectors() {
+  var parentSelector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '&';
+  // Focus selectors
+  var focus = ':focus'; // cell has been clicked or keyboard navigated to
+  var isOpen = '.euiDataGridRowCell--open'; // always show when the cell expansion popover is open
+  var isClosing = '[data-keyboard-closing]'; // prevents the animation from replaying when keyboard focus is moved from the popover back to the cell
+  var isEntered = ':has([data-focus-lock-disabled="false"])'; // cell focus trap has been entered - ideally show the outline still, but grayed out
+
+  // Hover selectors
+  var hover = ':hover'; // hover styles should not supercede focus styles
+  var focusWithin = ':focus-within'; // used by :hover:not() to prevent flash of gray when mouse users are opening/closing the expansion popover via cell action click
+
+  // Cell header specific selectors
+  var headerActionsOpen = '.euiDataGridHeaderCell--isActionsPopoverOpen';
+
+  // Utils
+  var selectors = function selectors() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return [].concat(args).join(', ');
+  };
+  var is = function is(selectors) {
+    return "".concat(parentSelector, ":is(").concat(selectors, ")");
+  };
+  var not = function not(selectors) {
+    return "".concat(parentSelector, ":not(").concat(selectors, ")");
+  };
+  var hoverNot = function hoverNot(selectors) {
+    return "".concat(parentSelector, ":hover:not(").concat(selectors, ")");
+  };
+  var _ = function _(selectors) {
+    return "".concat(parentSelector).concat(selectors);
+  };
+  return {
+    outline: {
+      show: is(selectors(hover, focus, isOpen, isEntered)),
+      hover: hoverNot(selectors(focus, focusWithin, isOpen)),
+      focusTrapped: _(isEntered)
+    },
+    actions: {
+      hoverZone: hoverNot(selectors(focus, isOpen)),
+      hoverColor: hoverNot(selectors(focus, focusWithin, isOpen)),
+      showAnimation: is(selectors(hover, focus, isOpen, isClosing)),
+      hoverAnimation: hoverNot(selectors(focus, isOpen, isClosing))
+    },
+    header: {
+      focus: is(selectors(focus, focusWithin, headerActionsOpen)),
+      // :focus-within here is primarily intended for when the column actions button has been clicked twice
+      focusTrapped: _(isEntered),
+      hideActions: not(selectors(hover, focusWithin, headerActionsOpen))
+    }
+  };
+};
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "12y9ria-euiDataGridRowCell__content",
+  styles: "overflow:hidden;label:euiDataGridRowCell__content;"
+} : {
+  name: "12y9ria-euiDataGridRowCell__content",
+  styles: "overflow:hidden;label:euiDataGridRowCell__content;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiDataGridRowCellStyles = exports.euiDataGridRowCellStyles = function euiDataGridRowCellStyles(euiThemeContext) {
+  var cellOutline = euiDataGridCellOutlineStyles(euiThemeContext);
+  var _euiDataGridCellOutli = euiDataGridCellOutlineSelectors(),
+    outlineSelectors = _euiDataGridCellOutli.outline;
+  return {
+    euiDataGridRowCell: /*#__PURE__*/(0, _react.css)("position:relative;", outlineSelectors.show, "{", cellOutline.focusStyles, ";}", outlineSelectors.hover, "{", cellOutline.hoverStyles, ";}", outlineSelectors.focusTrapped, "{", cellOutline.hoverStyles, ";}&>[data-focus-lock-disabled]{", (0, _global_styling.logicalCSS)('height', '100%'), ";}&:where(.euiDataGridRowCell--numeric, .euiDataGridRowCell--currency){", (0, _global_styling.logicalTextAlignCSS)('right'), ";}&:where(.euiDataGridRowCell--uppercase){text-transform:uppercase;}&:where(.euiDataGridRowCell--lowercase){text-transform:lowercase;}&:where(.euiDataGridRowCell--capitalize){text-transform:capitalize;};label:euiDataGridRowCell;"),
+    content: {
+      euiDataGridRowCell__content: _ref,
+      controlColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', '100%'), " display:flex;align-items:center;;label:controlColumn;"),
+      autoHeight: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', 'auto'), ";;label:autoHeight;"),
+      defaultHeight: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), ";;label:defaultHeight;")
+    }
+  };
+};

package/optimize/lib/components/datagrid/body/cell/data_grid_cell_actions.js

@@ -10,11 +10,13 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../../../services");
 var _i18n = require("../../../i18n");
 var _button_icon = require("../../../button/button_icon");
 var _button_empty = require("../../../button/button_empty");
 var _flex = require("../../../flex");
 var _popover = require("../../../popover");
+var _data_grid_cell_actions = require("./data_grid_cell_actions.styles");
 var _react2 = require("@emotion/react");
 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; }
@@ -32,6 +34,8 @@ var EuiDataGridCellActions = exports.EuiDataGridCellActions = function EuiDataGr
     column = _ref.column,
     rowIndex = _ref.rowIndex,
     colIndex = _ref.colIndex;
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_cell_actions.euiDataGridCellActionsStyles);
+
   // Note: The cell expand button/expansion popover is *always* rendered if
   // column.cellActions is present (regardless of column.isExpandable).
   // This is because cell actions are not otherwise accessible to keyboard
@@ -43,6 +47,7 @@ var EuiDataGridCellActions = exports.EuiDataGridCellActions = function EuiDataGr
       default: "Click or hit enter to interact with cell content"
     }, function (expandButtonTitle) {
       return (0, _react2.jsx)(_button_icon.EuiButtonIcon, {
+        css: styles.euiDataGridRowCell__actionButtonIcon,
         className: "euiDataGridRowCell__actionButtonIcon euiDataGridRowCell__expandCell",
         "data-test-subj": "euiDataGridCellExpandButton",
         display: "fill",
@@ -54,12 +59,13 @@ var EuiDataGridCellActions = exports.EuiDataGridCellActions = function EuiDataGr
         title: expandButtonTitle
       });
     });
-  }, [onExpandClick]);
+  }, [onExpandClick, styles]);
   var additionalButtons = (0, _react.useMemo)(function () {
     if (!column || !Array.isArray(column === null || column === void 0 ? void 0 : column.cellActions)) return [];
     var ButtonComponent = function ButtonComponent(props) {
       return (0, _react2.jsx)(_button_icon.EuiButtonIcon, (0, _extends2.default)({}, props, {
         "aria-hidden": true,
+        css: styles.euiDataGridRowCell__actionButtonIcon,
         className: "euiDataGridRowCell__actionButtonIcon"
         // Don't allow consumers to override sizes or colors for cell actions on hover/focus
         ,
@@ -84,8 +90,12 @@ var EuiDataGridCellActions = exports.EuiDataGridCellActions = function EuiDataGr
         isExpanded: false
       });
     });
-  }, [column, colIndex, rowIndex]);
-  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
+  }, [column, colIndex, rowIndex, styles]);
+  return (0, _react2.jsx)("div", {
+    css: styles.euiDataGridRowCell__actionsWrapper,
+    className: "euiDataGridRowCell__actionsWrapper"
+  }, (0, _react2.jsx)("div", {
+    css: styles.euiDataGridRowCell__actions,
     className: "euiDataGridRowCell__actions"
   }, [].concat((0, _toConsumableArray2.default)(additionalButtons), [expandButton])), (0, _react2.jsx)("div", {
     ref: popoverAnchorRef,

package/optimize/lib/components/datagrid/body/cell/data_grid_cell_actions.styles.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridCellActionsStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _global_styling = require("../../../../global_styling");
+var _data_grid = require("../../data_grid.styles");
+var _data_grid_cell = require("./data_grid_cell.styles");
+var _templateObject;
+/*
+ * 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.
+ */
+var euiDataGridCellActionsStyles = exports.euiDataGridCellActionsStyles = function euiDataGridCellActionsStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiDataGridVariables = (0, _data_grid.euiDataGridVariables)(euiThemeContext),
+    levels = _euiDataGridVariables.levels;
+  var borderWidth = euiTheme.border.width.thin;
+  var cellOutline = (0, _data_grid_cell.euiDataGridCellOutlineStyles)(euiThemeContext);
+  var _euiDataGridCellOutli = (0, _data_grid_cell.euiDataGridCellOutlineSelectors)('.euiDataGridRowCell'),
+    cellSelectors = _euiDataGridCellOutli.actions;
+  return {
+    euiDataGridRowCell__actionsWrapper: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('bottom', '100%'), "z-index:", levels.stickyHeader - 1, ";.euiDataGridRowCell[data-gridcell-visible-row-index='0']>&{z-index:", levels.stickyHeader + 1, ";}", cellSelectors.hoverZone, " &{", (0, _global_styling.logicalCSS)('min-width', '50%'), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";};label:euiDataGridRowCell__actionsWrapper;"),
+    euiDataGridRowCell__actions: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;gap:", euiTheme.size.xxs, ";", (0, _global_styling.logicalCSS)('width', 'fit-content'), " padding-inline:", euiTheme.size.xxs, ";", (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(borderWidth)), " background-color:", cellOutline.focusColor, ";color:", euiTheme.colors.emptyShade, ";border:", borderWidth, " solid ", cellOutline.focusColor, ";border-radius:", cellOutline.borderRadius, ";", (0, _global_styling.logicalCSS)('border-bottom-left-radius', 0), "&::after{content:'';position:absolute;", (0, _global_styling.logicalCSS)('top', '100%'), " ", (0, _global_styling.logicalCSS)('left', "-".concat(borderWidth)), " ", (0, _global_styling.logicalSizeCSS)((0, _global_styling.mathWithUnits)(borderWidth, function (x) {
+      return x * 2;
+    })), " background-color:inherit;}", cellSelectors.hoverColor, " &{background-color:", cellOutline.hoverColor, ";border-color:", cellOutline.hoverColor, ";}", _global_styling.euiCanAnimate, "{transform:scaleY(0);transform-origin:bottom;", cellSelectors.showAnimation, " &{animation-duration:", euiTheme.animation.fast, ";animation-name:", slideUp, ";animation-iteration-count:1;animation-fill-mode:forwards;}", cellSelectors.hoverAnimation, " &{animation-delay:", euiTheme.animation.slow, ";}};label:euiDataGridRowCell__actions;"),
+    euiDataGridRowCell__actionButtonIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)([euiTheme.size.base, euiTheme.size.xs], function (x, y) {
+      return x + y;
+    })), " border-radius:0;&,svg{background-color:transparent!important;color:currentColor!important;fill:currentColor!important;}&.euiDataGridRowCell__expandCell .euiIcon{", (0, _global_styling.logicalCSS)('width', '120%'), " ", (0, _global_styling.logicalCSS)('height', '100%'), ";};label:euiDataGridRowCell__actionButtonIcon;")
+  };
+};
+var slideUp = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from { transform: scaleY(0); }\n  to { transform: scaleY(1); }\n"])));

package/optimize/lib/components/datagrid/body/cell/data_grid_cell_popover.js

@@ -13,6 +13,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../../services");
 var _popover = require("../../../popover");
+var _data_grid = require("../../data_grid.styles");
+var _data_grid_cell_popover = require("./data_grid_cell_popover.styles");
 var _text = require("../../../text");
 var _code = require("../../../code");
 var _react2 = require("@emotion/react");
@@ -95,25 +97,23 @@ var useCellPopover = exports.useCellPopover = function useCellPopover() {
   // popover button isn't actually the DOM node we pass to `button`. Otherwise,
   // clicking the expansion cell action triggers an outside click
   var onClickOutside = (0, _react.useCallback)(function (event) {
-    var _popoverAnchor$parent;
-    var cellActions = popoverAnchor === null || popoverAnchor === void 0 || (_popoverAnchor$parent = popoverAnchor.parentElement) === null || _popoverAnchor$parent === void 0 || (_popoverAnchor$parent = _popoverAnchor$parent.parentElement) === null || _popoverAnchor$parent === void 0 ? void 0 : _popoverAnchor$parent.previousElementSibling;
+    var cellActions = popoverAnchor === null || popoverAnchor === void 0 ? void 0 : popoverAnchor.closest('.euiDataGridRowCell__actionsWrapper');
     if (!(cellActions !== null && cellActions !== void 0 && cellActions.contains(event.target))) {
       closeCellPopover();
     }
   }, [popoverAnchor, closeCellPopover]);
   var onKeyDown = (0, _react.useCallback)(function (event) {
     if (event.key === _services.keys.F2 || event.key === _services.keys.ESCAPE) {
-      var _popoverAnchor$parent2;
       event.preventDefault();
       event.stopPropagation();
       closeCellPopover();
-      var cell = popoverAnchor === null || popoverAnchor === void 0 || (_popoverAnchor$parent2 = popoverAnchor.parentElement) === null || _popoverAnchor$parent2 === void 0 || (_popoverAnchor$parent2 = _popoverAnchor$parent2.parentElement) === null || _popoverAnchor$parent2 === void 0 ? void 0 : _popoverAnchor$parent2.parentElement;
+      var cell = popoverAnchor === null || popoverAnchor === void 0 ? void 0 : popoverAnchor.closest('.euiDataGridRowCell');
 
       // Prevent cell animation flash while focus is being shifted between popover and cell
       cell === null || cell === void 0 || cell.setAttribute('data-keyboard-closing', 'true');
       // Ensure focus is returned to the parent cell, and remove animation stopgap
       requestAnimationFrame(function () {
-        popoverAnchor === null || popoverAnchor === void 0 || popoverAnchor.parentElement.focus();
+        cell === null || cell === void 0 || cell.focus();
         cell === null || cell === void 0 || cell.removeAttribute('data-keyboard-closing');
       });
     }
@@ -130,36 +130,45 @@ var useCellPopover = exports.useCellPopover = function useCellPopover() {
       setCellPopoverProps: setCellPopoverProps
     };
   }, [popoverIsOpen, closeCellPopover, openCellPopover, cellLocation]);
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_cell_popover.euiDataGridCellPopoverStyles);
+  var _useEuiMemoizedStyles = (0, _services.useEuiMemoizedStyles)(_data_grid.euiDataGridVariables),
+    levels = _useEuiMemoizedStyles.levels;
   var cellPopover = (0, _react.useMemo)(function () {
-    var _cellPopoverProps$pan;
+    var _cellPopoverProps$pan, _cell$offsetWidth;
     if (!popoverIsOpen || !popoverAnchor) return null;
+    var cell = popoverAnchor.closest('.euiDataGridRowCell');
 
     // Note that this popover is rendered once at the top grid level, rather than one popover per cell
     return (0, _react2.jsx)(_popover.EuiWrappingPopover, (0, _extends2.default)({
       isOpen: popoverIsOpen,
       display: "block",
       hasArrow: false,
+      attachToAnchor: true // required for https://github.com/elastic/eui/issues/6151
+      ,
       panelPaddingSize: "s",
       anchorPosition: popoverAnchorPosition,
-      repositionToCrossAxis: false
+      repositionToCrossAxis: false,
+      zIndex: levels.cellPopover
     }, cellPopoverProps, {
       focusTrapProps: {
         onClickOutside: onClickOutside,
         clickOutsideDisables: false
       },
-      panelProps: _objectSpread({
+      panelProps: _objectSpread(_objectSpread({
         'data-test-subj': 'euiDataGridExpansionPopover'
-      }, cellPopoverProps.panelProps || {}),
+      }, cellPopoverProps.panelProps || {}), {}, {
+        css: [styles.euiDataGridRowCell__popover, cellPopoverProps.css]
+      }),
       panelClassName: (0, _classnames.default)('euiDataGridRowCell__popover', cellPopoverProps.panelClassName, (_cellPopoverProps$pan = cellPopoverProps.panelProps) === null || _cellPopoverProps$pan === void 0 ? void 0 : _cellPopoverProps$pan.className),
       panelStyle: {
-        maxInlineSize: "min(75vw, max(".concat(popoverAnchor.parentElement.offsetWidth, "px, 400px))"),
+        maxInlineSize: "min(75vw, max(".concat((_cell$offsetWidth = cell === null || cell === void 0 ? void 0 : cell.offsetWidth) !== null && _cell$offsetWidth !== void 0 ? _cell$offsetWidth : 0, "px, 400px))"),
         maxBlockSize: '50vh'
       },
       onKeyDown: onKeyDown,
       button: popoverAnchor,
       closePopover: closeCellPopover
     }), popoverContent);
-  }, [popoverIsOpen, popoverAnchor, popoverContent, cellPopoverProps, closeCellPopover, onClickOutside, onKeyDown, popoverAnchorPosition]);
+  }, [styles, levels.cellPopover, popoverIsOpen, popoverAnchor, popoverContent, cellPopoverProps, closeCellPopover, onClickOutside, onKeyDown, popoverAnchorPosition]);
   return (0, _react.useMemo)(function () {
     return {
       cellPopoverContext: cellPopoverContext,

package/optimize/lib/components/datagrid/body/cell/data_grid_cell_popover.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridCellPopoverStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _global_styling = require("../../../../global_styling");
+var _templateObject;
+/*
+ * 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.
+ */
+var euiDataGridCellPopoverStyles = exports.euiDataGridCellPopoverStyles = function euiDataGridCellPopoverStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiDataGridRowCell__popover: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " overflow:auto;", _global_styling.euiCanAnimate, "{animation-duration:", euiTheme.animation.normal, ";animation-name:", fadeIn, ";};label:euiDataGridRowCell__popover;")
+  };
+};
+var fadeIn = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from { opacity: 0; }\n  to { opacity: 1; }\n"])));

package/optimize/lib/components/datagrid/body/cell/focus_utils.js

@@ -9,11 +9,10 @@ exports.HandleInteractiveChildren = exports.FocusTrappedChildren = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _tabbable = require("tabbable");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../../services");
-var _accessibility = require("../../../../services/accessibility");
 var _utils = require("../../../../utils");
 var _focus_trap = require("../../../focus_trap");
-var _accessibility2 = require("../../../accessibility");
 var _i18n = require("../../../i18n");
 var _react2 = require("@emotion/react");
 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); }
@@ -96,20 +95,22 @@ var FocusTrappedChildren = exports.FocusTrappedChildren = function FocusTrappedC
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     isExited = _useState6[0],
     setExited = _useState6[1];
-  var keyboardHintAriaId = (0, _accessibility.useGeneratedHtmlId)({
-    prefix: 'euiDataGridCellHeader',
-    suffix: 'keyboardHint'
-  });
-  var exitedHintAriaId = (0, _accessibility.useGeneratedHtmlId)({
-    prefix: 'euiDataGridCellHeader',
-    suffix: 'exited'
+  var ariaDescribedById = (0, _services.useGeneratedHtmlId)({
+    suffix: 'focusTrapHint'
   });
 
   // direct DOM manipulation as workaround to attach required hints
   (0, _react.useEffect)(function () {
     var currentAriaDescribedbyId = cellEl.getAttribute('aria-describedby');
-    cellEl.setAttribute('aria-describedby', "".concat(currentAriaDescribedbyId, " ").concat(exitedHintAriaId, " ").concat(keyboardHintAriaId, " "));
-  }, [cellEl, keyboardHintAriaId, exitedHintAriaId]);
+    cellEl.setAttribute('aria-describedby', (0, _classnames.default)(currentAriaDescribedbyId, ariaDescribedById));
+    return function () {
+      if (currentAriaDescribedbyId) {
+        cellEl.setAttribute('aria-descibedby', currentAriaDescribedbyId);
+      } else {
+        cellEl.removeAttribute('aria-describedby');
+      }
+    };
+  }, [cellEl, ariaDescribedById]);
   (0, _react.useEffect)(function () {
     if (isCellEntered) {
       enableAndFocusInteractives(cellEl);
@@ -163,23 +164,20 @@ var FocusTrappedChildren = exports.FocusTrappedChildren = function FocusTrappedC
     onDeactivation: function onDeactivation() {
       return setIsCellEntered(false);
     }
-  }, children, (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
-    id: exitedHintAriaId,
-    "aria-hidden": "true"
+  }, children, (0, _react2.jsx)("p", {
+    id: ariaDescribedById,
+    hidden: true
   }, isExited && (0, _react2.jsx)(_i18n.EuiI18n
   // eslint-disable-next-line local/i18n
   , {
     token: "euiDataGridCell.focusTrapExitPrompt",
     default: "Exited cell content."
-  }))), (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
-    id: keyboardHintAriaId,
-    "aria-hidden": "true"
-  }, !isCellEntered && (0, _react2.jsx)(_i18n.EuiI18n
+  }), !isCellEntered && (0, _react2.jsx)(_i18n.EuiI18n
   // eslint-disable-next-line local/i18n
   , {
     token: "euiDataGridCell.focusTrapEnterPrompt",
     default: "Press the Enter key to interact with this cell's contents."
-  }))));
+  })));
 };
 
 /**

package/optimize/lib/components/datagrid/body/data_grid_body.js

@@ -8,8 +8,10 @@ exports.EuiDataGridBody = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _services = require("../../../services");
 var _data_grid_body_virtualized = require("./data_grid_body_virtualized");
 var _data_grid_body_custom = require("./data_grid_body_custom");
+var _data_grid_body = require("./data_grid_body.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["renderCustomGridBody"];
 /*
@@ -27,7 +29,12 @@ var EuiDataGridBody = exports.EuiDataGridBody = function EuiDataGridBody(_ref) {
    * + virtualization library for rendering content, or if consumers have
    * passed their own custom renderer
    */
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_body.euiDataGridBodyStyles);
+  var cssStyles = [styles.euiDataGridBody, renderCustomGridBody ? styles.customRender : styles.virtualized];
   return renderCustomGridBody ? (0, _react2.jsx)(_data_grid_body_custom.EuiDataGridBodyCustomRender, (0, _extends2.default)({
-    renderCustomGridBody: renderCustomGridBody
-  }, props)) : (0, _react2.jsx)(_data_grid_body_virtualized.EuiDataGridBodyVirtualized, props);
+    renderCustomGridBody: renderCustomGridBody,
+    css: cssStyles
+  }, props)) : (0, _react2.jsx)(_data_grid_body_virtualized.EuiDataGridBodyVirtualized, (0, _extends2.default)({
+    css: cssStyles
+  }, props));
 };

package/optimize/lib/components/datagrid/body/data_grid_body.styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridBodyStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
+ * 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.
+ */
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "jawla0-virtualized",
+  styles: "scroll-padding:0;label:virtualized;"
+} : {
+  name: "jawla0-virtualized",
+  styles: "scroll-padding:0;label:virtualized;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiDataGridBodyStyles = exports.euiDataGridBodyStyles = function euiDataGridBodyStyles(euiThemeContext) {
+  return {
+    euiDataGridBody: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), ";;label:euiDataGridBody;"),
+    virtualized: _ref,
+    customRender: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)('100%'), " overflow:auto;;label:customRender;")
+  };
+};

package/optimize/lib/components/datagrid/body/data_grid_body_custom.js

@@ -52,7 +52,8 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
     pagination = _ref.pagination,
     rowHeightsOptions = _ref.rowHeightsOptions,
     gridWidth = _ref.gridWidth,
-    gridStyles = _ref.gridStyles;
+    gridStyles = _ref.gridStyles,
+    className = _ref.className;
   /**
    * Columns & widths
    */
@@ -101,7 +102,8 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
       switchColumnPos: switchColumnPos,
       sorting: sorting,
       schema: schema,
-      schemaDetectors: schemaDetectors
+      schemaDetectors: schemaDetectors,
+      gridStyles: gridStyles
     }),
     headerRow = _useDataGridHeader.headerRow;
   var _useDataGridFooter = (0, _footer.useDataGridFooter)({
@@ -115,7 +117,8 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
       columns: columns,
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
-      schema: schema
+      schema: schema,
+      gridStyles: gridStyles
     }),
     footerRow = _useDataGridFooter.footerRow;
 
@@ -163,7 +166,7 @@ var EuiDataGridBodyCustomRender = exports.EuiDataGridBodyCustomRender = function
     customGridBodyProps = _useState2[0],
     setCustomGridBodyProps = _useState2[1];
   return (0, _react2.jsx)("div", (0, _extends2.default)({}, customGridBodyProps, {
-    className: (0, _classnames.default)('euiDataGrid__customRenderBody', customGridBodyProps === null || customGridBodyProps === void 0 ? void 0 : customGridBodyProps.className)
+    className: (0, _classnames.default)('euiDataGrid__customRenderBody', className, customGridBodyProps === null || customGridBodyProps === void 0 ? void 0 : customGridBodyProps.className)
   }), headerRow, renderCustomGridBody({
     visibleColumns: visibleColumns,
     visibleRowData: visibleRows,

package/optimize/lib/components/datagrid/body/data_grid_body_virtualized.js

@@ -111,7 +111,8 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
     gridWidth = _ref3.gridWidth,
     gridRef = _ref3.gridRef,
     gridItemsRendered = _ref3.gridItemsRendered,
-    wrapperRef = _ref3.wrapperRef;
+    wrapperRef = _ref3.wrapperRef,
+    className = _ref3.className;
   /**
    * Grid refs & observers
    */
@@ -160,7 +161,8 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       switchColumnPos: switchColumnPos,
       sorting: sorting,
       schema: schema,
-      schemaDetectors: schemaDetectors
+      schemaDetectors: schemaDetectors,
+      gridStyles: gridStyles
     }),
     headerRow = _useDataGridHeader.headerRow,
     headerRowHeight = _useDataGridHeader.headerRowHeight;
@@ -175,7 +177,8 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       columns: columns,
       columnWidths: columnWidths,
       defaultColumnWidth: defaultColumnWidth,
-      schema: schema
+      schema: schema,
+      gridStyles: gridStyles
     }),
     footerRow = _useDataGridFooter.footerRow,
     footerRowHeight = _useDataGridFooter.footerRowHeight;
@@ -304,7 +307,7 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
     value: rowWrapperContextValue
   }, (0, _react2.jsx)(_reactWindow.VariableSizeGrid, (0, _extends2.default)({}, virtualizationOptions, {
     ref: gridRef,
-    className: (0, _classnames.default)('euiDataGrid__virtualized', virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.className),
+    className: (0, _classnames.default)('euiDataGrid__virtualized', className, virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.className),
     onItemsRendered: onItemsRendered,
     innerElementType: InnerElement,
     outerRef: outerGridRef,

package/optimize/lib/components/datagrid/body/footer/data_grid_footer.styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridFooterStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../../global_styling");
+var _data_grid = require("../../data_grid.styles");
+/*
+ * 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.
+ */
+
+var euiDataGridFooterStyles = exports.euiDataGridFooterStyles = function euiDataGridFooterStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiDataGridVariables = (0, _data_grid.euiDataGridVariables)(euiThemeContext),
+    levels = _euiDataGridVariables.levels;
+  return {
+    euiDataGridFooter: /*#__PURE__*/(0, _react.css)("display:flex;", (0, _global_styling.logicalCSS)('width', 'fit-content'), " background-color:", euiTheme.colors.emptyShade, ";;label:euiDataGridFooter;"),
+    sticky: /*#__PURE__*/(0, _react.css)("z-index:", levels.stickyHeader, ";position:sticky;", (0, _global_styling.logicalCSS)('bottom', 0), ";;label:sticky;"),
+    overline: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.text)), ";;label:overline;"),
+    shade: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.lightestShade, ";;label:shade;"),
+    striped: /*#__PURE__*/(0, _react.css)(".euiDataGrid--stripes &{background-color:", euiTheme.colors.lightestShade, ";};label:striped;"),
+    euiDataGridFooterCell: /*#__PURE__*/(0, _react.css)("flex:0 0 auto;font-weight:", euiTheme.font.weight.bold, ";;label:euiDataGridFooterCell;")
+  };
+};

package/optimize/lib/components/datagrid/body/footer/data_grid_footer_row.js

@@ -8,11 +8,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiDataGridFooterRow = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../../services");
 var _cell = require("../cell");
+var _data_grid_footer = require("./data_grid_footer.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "schema", "columnWidths", "defaultColumnWidth", "className", "renderCellValue", "renderCellPopover", "rowIndex", "interactiveCellId", "data-test-subj", "visibleRowIndex"];
+var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "schema", "columnWidths", "defaultColumnWidth", "className", "renderCellValue", "renderCellPopover", "rowIndex", "interactiveCellId", "data-test-subj", "visibleRowIndex", "gridStyles"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -40,13 +42,15 @@ var EuiDataGridFooterRow = exports.EuiDataGridFooterRow = /*#__PURE__*/(0, _reac
     _dataTestSubj = _ref['data-test-subj'],
     _ref$visibleRowIndex = _ref.visibleRowIndex,
     visibleRowIndex = _ref$visibleRowIndex === void 0 ? rowIndex : _ref$visibleRowIndex,
+    gridStyles = _ref.gridStyles,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiDataGridRow', {
-    'euiDataGridRow--striped': visibleRowIndex % 2 !== 0
-  }, 'euiDataGridFooter', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_footer.euiDataGridFooterStyles);
+  var cssStyles = [styles.euiDataGridFooter, gridStyles.stickyFooter && styles.sticky, gridStyles.footer === 'striped' ? visibleRowIndex % 2 !== 0 && styles.striped : styles[gridStyles.footer]];
+  var classes = (0, _classnames.default)('euiDataGridFooter', className);
   var dataTestSubj = (0, _classnames.default)('dataGridRow', 'dataGridFooterRow', _dataTestSubj);
   var popoverContext = (0, _react.useContext)(_cell.DataGridCellPopoverContext);
   var sharedCellProps = {
+    css: styles.euiDataGridFooterCell,
     rowIndex: rowIndex,
     visibleRowIndex: visibleRowIndex,
     interactiveCellId: interactiveCellId,
@@ -55,6 +59,7 @@ var EuiDataGridFooterRow = exports.EuiDataGridFooterRow = /*#__PURE__*/(0, _reac
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     ref: ref,
     role: "row",
+    css: cssStyles,
     className: classes,
     "data-test-subj": dataTestSubj
   }, rest), leadingControlColumns.map(function (_ref2, i) {