@elastic/eui 95.10.0 → 95.11.0

package/optimize/lib/components/datagrid/body/header/column_actions.js

@@ -214,8 +214,15 @@ var getSortColumnActions = exports.getSortColumnActions = function getSortColumn
     var onClickSortAsc = function onClickSortAsc() {
       sortBy('asc');
     };
+    var isSorted = sortingIdx >= 0 && sorting.columns[sortingIdx].direction === 'asc';
     var action = {
-      label: (0, _react2.jsx)(_i18n.EuiI18n, {
+      label: isSorted ? (0, _react2.jsx)(_i18n.EuiI18n, {
+        token: "euiColumnActions.unsort",
+        default: "Unsort {schemaLabel}",
+        values: {
+          schemaLabel: label
+        }
+      }) : (0, _react2.jsx)(_i18n.EuiI18n, {
         token: "euiColumnActions.sort",
         default: "Sort {schemaLabel}",
         values: {
@@ -224,7 +231,6 @@ var getSortColumnActions = exports.getSortColumnActions = function getSortColumn
       }),
       onClick: onClickSortAsc,
       isDisabled: column.isSortable === false,
-      className: sortingIdx >= 0 && sorting.columns[sortingIdx].direction === 'asc' ? 'euiDataGridHeader__action--selected' : '',
       iconType: 'sortUp',
       size: 'xs',
       color: 'text'
@@ -236,8 +242,15 @@ var getSortColumnActions = exports.getSortColumnActions = function getSortColumn
     var onClickSortDesc = function onClickSortDesc() {
       sortBy('desc');
     };
+    var _isSorted = sortingIdx >= 0 && sorting.columns[sortingIdx].direction === 'desc';
     var _action2 = {
-      label: (0, _react2.jsx)(_i18n.EuiI18n, {
+      label: _isSorted ? (0, _react2.jsx)(_i18n.EuiI18n, {
+        token: "euiColumnActions.unsort",
+        default: "Unsort {schemaLabel}",
+        values: {
+          schemaLabel: _label
+        }
+      }) : (0, _react2.jsx)(_i18n.EuiI18n, {
         token: "euiColumnActions.sort",
         default: "Sort {schemaLabel}",
         values: {
@@ -246,7 +259,6 @@ var getSortColumnActions = exports.getSortColumnActions = function getSortColumn
       }),
       onClick: onClickSortDesc,
       isDisabled: column.isSortable === false,
-      className: sortingIdx >= 0 && sorting.columns[sortingIdx].direction === 'desc' ? 'euiDataGridHeader__action--selected' : '',
       iconType: 'sortDown',
       size: 'xs',
       color: 'text'

package/optimize/lib/components/datagrid/body/header/data_grid_column_resizer.js

@@ -13,6 +13,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../../../services");
+var _global_styling = require("../../../../global_styling");
+var _data_grid_column_resizer = require("./data_grid_column_resizer.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; }
@@ -77,14 +80,18 @@ var EuiDataGridColumnResizer = exports.EuiDataGridColumnResizer = /*#__PURE__*/f
   return (0, _createClass2.default)(EuiDataGridColumnResizer, [{
     key: "render",
     value: function render() {
+      var _this2 = this;
       var offset = this.state.offset;
-      return (0, _react2.jsx)("div", {
-        className: "euiDataGridColumnResizer",
-        "data-test-subj": "dataGridColumnResizer",
-        style: {
-          marginRight: "".concat(-offset, "px")
-        },
-        onMouseDown: this.onMouseDown
+      return (0, _react2.jsx)(_services.RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+        var styles = stylesMemoizer(_data_grid_column_resizer.euiDataGridColumnResizerStyles);
+        var cssStyles = [styles.euiDataGridColumnResizer, offset && styles.isDragging];
+        return (0, _react2.jsx)("div", {
+          css: cssStyles,
+          className: "euiDataGridColumnResizer",
+          "data-test-subj": "dataGridColumnResizer",
+          style: offset ? (0, _global_styling.logicalStyle)('margin-right', "".concat(-offset, "px")) : undefined,
+          onMouseDown: _this2.onMouseDown
+        });
       });
     }
   }]);

package/optimize/lib/components/datagrid/body/header/data_grid_column_resizer.styles.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridColumnResizerStyles = 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.
+ */
+// Resizer straddles the column border and is an invisible hitzone for dragging
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1i9vv3a-isDragging",
+  styles: "opacity:1;label:isDragging;"
+} : {
+  name: "1i9vv3a-isDragging",
+  styles: "opacity:1;label:isDragging;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiDataGridColumnResizerStyles = exports.euiDataGridColumnResizerStyles = function euiDataGridColumnResizerStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var clickableWidth = euiTheme.size.base;
+  var positionOffset = (0, _global_styling.mathWithUnits)(clickableWidth, function (x) {
+    return x / -2;
+  });
+  var indicatorWidth = (0, _global_styling.mathWithUnits)([euiTheme.border.width.thin, euiTheme.border.width.thick], function (x, y) {
+    return x + y;
+  }); // Odd number because it straddles a border
+  var indicatorOffset = "-".concat(euiTheme.border.width.thin);
+  return {
+    euiDataGridColumnResizer: /*#__PURE__*/(0, _react.css)("z-index:2;position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('right', positionOffset), " cursor:ew-resize;opacity:0;&:hover,&:active{opacity:1;}&::after{content:'';position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('left', positionOffset), " ", (0, _global_styling.logicalCSS)('margin-left', indicatorOffset), " ", (0, _global_styling.logicalCSS)('width', indicatorWidth), " background-color:", euiTheme.colors.primary, ";}.euiDataGridHeaderCell:last-child &{", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('width', euiTheme.size.s), " &::after{", (0, _global_styling.logicalCSS)('left', 'auto'), " ", (0, _global_styling.logicalCSS)('right', 0), ";}};label:euiDataGridColumnResizer;"),
+    isDragging: _ref
+  };
+};

package/optimize/lib/components/datagrid/body/header/data_grid_control_header_cell.js

@@ -33,8 +33,6 @@ var EuiDataGridControlHeaderCell = exports.EuiDataGridControlHeaderCell = /*#__P
     id: id,
     index: index,
     width: width
-  }), (0, _react2.jsx)("div", {
-    className: "euiDataGridHeaderCell__content"
-  }, (0, _react2.jsx)(HeaderCellRender, null)));
+  }), (0, _react2.jsx)(HeaderCellRender, null));
 });
 EuiDataGridControlHeaderCell.displayName = 'EuiDataGridControlHeaderCell';

package/optimize/lib/components/datagrid/body/header/data_grid_header_cell.js

@@ -6,26 +6,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSortingUtils = exports.usePopoverArrowNavigation = exports.EuiDataGridHeaderCell = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _tabbable = require("tabbable");
 var _services = require("../../../../services");
-var _accessibility = require("../../../../services/accessibility");
 var _i18n = require("../../../i18n");
 var _icon = require("../../../icon");
 var _list_group = require("../../../list_group");
 var _popover = require("../../../popover");
-var _button_icon = require("../../../button/button_icon/button_icon.styles");
+var _button = require("../../../button");
 var _focus = require("../../utils/focus");
 var _column_actions = require("./column_actions");
 var _data_grid_column_resizer = require("./data_grid_column_resizer");
 var _data_grid_header_cell_wrapper = require("./data_grid_header_cell_wrapper");
+var _data_grid_header_cell = require("./data_grid_header_cell.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "title", "arrow"];
+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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -33,39 +33,19 @@ var _excluded = ["children", "title", "arrow"];
  * 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; }
-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)."; }
-var CellContent = function CellContent(_ref) {
-  var children = _ref.children,
-    title = _ref.title,
-    arrow = _ref.arrow,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", (0, _extends2.default)({}, rest, {
-    title: title,
-    className: "euiDataGridHeaderCell__content"
-  }), children), arrow);
-};
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "mc0thx-EuiDataGridHeaderCell",
-  styles: "margin-inline-start:auto;label:EuiDataGridHeaderCell;"
-} : {
-  name: "mc0thx-EuiDataGridHeaderCell",
-  styles: "margin-inline-start:auto;label:EuiDataGridHeaderCell;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
-  var index = _ref2.index,
-    column = _ref2.column,
-    columns = _ref2.columns,
-    columnWidths = _ref2.columnWidths,
-    defaultColumnWidth = _ref2.defaultColumnWidth,
-    setColumnWidth = _ref2.setColumnWidth,
-    setVisibleColumns = _ref2.setVisibleColumns,
-    switchColumnPos = _ref2.switchColumnPos,
-    sorting = _ref2.sorting,
-    schema = _ref2.schema,
-    schemaDetectors = _ref2.schemaDetectors;
+
+var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var index = _ref.index,
+    column = _ref.column,
+    columns = _ref.columns,
+    columnWidths = _ref.columnWidths,
+    defaultColumnWidth = _ref.defaultColumnWidth,
+    setColumnWidth = _ref.setColumnWidth,
+    setVisibleColumns = _ref.setVisibleColumns,
+    switchColumnPos = _ref.switchColumnPos,
+    sorting = _ref.sorting,
+    schema = _ref.schema,
+    schemaDetectors = _ref.schemaDetectors;
   var id = column.id,
     display = column.display,
     displayAsText = column.displayAsText,
@@ -135,7 +115,7 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
     sortingArrow = _useSortingUtils.sortingArrow,
     ariaSort = _useSortingUtils.ariaSort,
     sortingScreenReaderText = _useSortingUtils.sortingScreenReaderText;
-  var sortingAriaId = (0, _accessibility.useGeneratedHtmlId)({
+  var sortingAriaId = (0, _services.useGeneratedHtmlId)({
     prefix: 'euiDataGridCellHeader',
     suffix: 'sorting'
   });
@@ -144,7 +124,8 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
    * Rendering
    */
   var classes = (0, _classnames2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "euiDataGridHeaderCell--".concat(columnType), columnType), 'euiDataGridHeaderCell--hasColumnActions', showColumnActions), 'euiDataGridHeaderCell--isActionsPopoverOpen', isPopoverOpen), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
-  var emptyHoverStyles = (0, _services.useEuiMemoizedStyles)(_button_icon._emptyHoverStyles);
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_header_cell.euiDataGridHeaderCellStyles);
+  var contentStyles = [styles.euiDataGridHeaderCell__content, columnType === 'numeric' || columnType === 'currency' ? styles.right : styles.left];
   return (0, _react2.jsx)(_data_grid_header_cell_wrapper.EuiDataGridHeaderCellWrapper, (0, _extends2.default)({}, displayHeaderCellProps, {
     className: classes,
     id: id,
@@ -161,10 +142,11 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
       columnId: id,
       columnWidth: width,
       setColumnWidth: setColumnWidth
-    }) : null, (0, _react2.jsx)(CellContent, {
-      title: title,
-      arrow: sortingArrow
-    }, children), sortingScreenReaderText && (0, _react2.jsx)("p", {
+    }) : null, (0, _react2.jsx)("div", {
+      css: contentStyles,
+      className: "euiDataGridHeaderCell__content",
+      title: title
+    }, children), sortingArrow, sortingScreenReaderText && (0, _react2.jsx)("p", {
       id: sortingAriaId,
       hidden: true
     }, sortingScreenReaderText), showColumnActions && (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
@@ -172,12 +154,14 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
       panelPaddingSize: "none",
       offset: 7,
       anchorPosition: "downRight",
-      css: _ref3 // Align to right
-      ,
-      button: (0, _react2.jsx)("button", {
-        ref: actionsButtonRef,
+      css: styles.euiDataGridHeaderCell__popover,
+      button: (0, _react2.jsx)(_button.EuiButtonIcon, {
+        iconType: "boxesVertical",
+        iconSize: "s",
+        color: "text",
+        css: styles.euiDataGridHeaderCell__button,
         className: "euiDataGridHeaderCell__button",
-        css: emptyHoverStyles.text,
+        buttonRef: actionsButtonRef,
         onClick: togglePopover,
         onFocus: function onFocus() {
           return setIsActionsButtonFocused(true);
@@ -185,17 +169,13 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
         onBlur: function onBlur() {
           return setIsActionsButtonFocused(false);
         },
+        tabIndex: 0 // Override EuiButtonIcon's conditional tabindex based on aria-hidden
+        ,
         "aria-hidden": hasFocusTrap && !isActionsButtonFocused ? 'true' // prevent the actions button from being read on cell focus
         : undefined,
         "aria-label": hasFocusTrap ? actionsButtonAriaLabel : actionsEnterKeyInstructions,
         "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
-      }, (0, _react2.jsx)("div", {
-        className: "euiDataGridHeaderCell__icon"
-      }, (0, _react2.jsx)(_icon.EuiIcon, {
-        type: "boxesVertical",
-        size: "s",
-        color: "text"
-      }))),
+      }),
       isOpen: isPopoverOpen,
       closePopover: closePopover
     }, popoverArrowNavigationProps), (0, _react2.jsx)(_list_group.EuiListGroup, {
@@ -210,11 +190,11 @@ EuiDataGridHeaderCell.displayName = 'EuiDataGridHeaderCell';
 /**
  * Column sorting utility helpers
  */
-var useSortingUtils = exports.useSortingUtils = function useSortingUtils(_ref4) {
+var useSortingUtils = exports.useSortingUtils = function useSortingUtils(_ref2) {
   var _sorting$columns;
-  var sorting = _ref4.sorting,
-    id = _ref4.id,
-    showColumnActions = _ref4.showColumnActions;
+  var sorting = _ref2.sorting,
+    id = _ref2.id,
+    showColumnActions = _ref2.showColumnActions;
   var sortedColumn = (0, _react.useMemo)(function () {
     return sorting === null || sorting === void 0 ? void 0 : sorting.columns.find(function (col) {
       return col.id === id;
@@ -250,9 +230,9 @@ var useSortingUtils = exports.useSortingUtils = function useSortingUtils(_ref4)
     var _sorting$columns2;
     if (!isColumnSorted) return null;
     if (!showColumnActions && hasOnlyOneSort) return null; // in this scenario, the `aria-sort` attribute will be used by screen readers
-    return (0, _react2.jsx)(_react.default.Fragment, null, sorting === null || sorting === void 0 || (_sorting$columns2 = sorting.columns) === null || _sorting$columns2 === void 0 ? void 0 : _sorting$columns2.map(function (_ref5, index) {
-      var columnId = _ref5.id,
-        direction = _ref5.direction;
+    return (0, _react2.jsx)(_react.default.Fragment, null, sorting === null || sorting === void 0 || (_sorting$columns2 = sorting.columns) === null || _sorting$columns2 === void 0 ? void 0 : _sorting$columns2.map(function (_ref3, index) {
+      var columnId = _ref3.id,
+        direction = _ref3.direction;
       if (hasOnlyOneSort) {
         if (direction === 'asc') {
           return (0, _react2.jsx)(_i18n.EuiI18n, {

package/optimize/lib/components/datagrid/body/header/data_grid_header_cell.styles.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridHeaderCellStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../../global_styling");
+var _data_grid_cell = require("../cell/data_grid_cell.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.
+ */
+
+/**
+ * Styles only applied to data header cell content, not control header cells
+ */
+var euiDataGridHeaderCellStyles = exports.euiDataGridHeaderCellStyles = function euiDataGridHeaderCellStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiDataGridCellOutli = (0, _data_grid_cell.euiDataGridCellOutlineSelectors)('.euiDataGridHeaderCell'),
+    header = _euiDataGridCellOutli.header;
+  return {
+    euiDataGridHeaderCell__content: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.euiTextTruncate)(), ";;label:euiDataGridHeaderCell__content;"),
+    // Overwrite inherited 'center' styles from <button>
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;"),
+    // Numeric and currency schemas are aligned to the right
+    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), ";;label:right;"),
+    euiDataGridHeaderCell__popover: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', 'auto'), "line-height:0;;label:euiDataGridHeaderCell__popover;"),
+    euiDataGridHeaderCell__button: /*#__PURE__*/(0, _react.css)("overflow:hidden;", header.hideActions, " &{", (0, _global_styling.logicalCSS)('width', 0), " opacity:0;}", _global_styling.euiCanAnimate, "{transition:inline-size ", euiTheme.animation.fast, " ease-in,opacity ", euiTheme.animation.slow, " ease-in;transform:none!important;animation:none!important;};label:euiDataGridHeaderCell__button;")
+  };
+};

package/optimize/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js

@@ -14,6 +14,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../../services");
 var _focus = require("../../utils/focus");
 var _focus_utils = require("../cell/focus_utils");
+var _data_grid_header_cell_wrapper = require("./data_grid_header_cell_wrapper.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["id", "index", "width", "className", "children", "hasActionsPopover", "openActionsPopover", "aria-label"];
 /*
@@ -41,6 +42,7 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
     ariaLabel = _ref['aria-label'],
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiDataGridHeaderCell', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_header_cell_wrapper.euiDataGridHeaderCellWrapperStyles);
 
   // Must be a state and not a ref to trigger a HandleInteractiveChildren rerender
   var _useState = (0, _react.useState)(null),
@@ -92,6 +94,7 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
     ref: setHeaderEl,
     tabIndex: isFocused ? 0 : -1,
     onKeyDown: onKeyDown,
+    css: styles.euiDataGridHeaderCell,
     className: classes,
     "data-test-subj": "dataGridHeaderCell-".concat(id),
     "data-gridcell-column-id": id,

package/optimize/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.styles.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridHeaderCellWrapperStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../../global_styling");
+var _data_grid_cell = require("../cell/data_grid_cell.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.
+ */
+
+/**
+ * Styles that apply to both control and non-control columns
+ */
+var euiDataGridHeaderCellWrapperStyles = exports.euiDataGridHeaderCellWrapperStyles = function euiDataGridHeaderCellWrapperStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiDataGridCellOutli = (0, _data_grid_cell.euiDataGridCellOutlineStyles)(euiThemeContext),
+    focusStyles = _euiDataGridCellOutli.focusStyles,
+    hoverStyles = _euiDataGridCellOutli.hoverStyles;
+  var _euiDataGridCellOutli2 = (0, _data_grid_cell.euiDataGridCellOutlineSelectors)(),
+    outlineSelectors = _euiDataGridCellOutli2.header;
+  var _sharedFlexCss = /*#__PURE__*/(0, _react.css)("display:flex;align-items:center;gap:", euiTheme.size.xxs, ";");
+  return {
+    euiDataGridHeaderCell: /*#__PURE__*/(0, _react.css)("position:relative;", _sharedFlexCss, " flex:0 0 auto;font-weight:", euiTheme.font.weight.bold, ";", outlineSelectors.focus, "{", focusStyles, ";}", outlineSelectors.focusTrapped, "{", hoverStyles, ";}&>[data-focus-lock-disabled]{", _sharedFlexCss, " ", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiDataGridHeaderCell;")
+  };
+};

package/optimize/lib/components/datagrid/body/header/data_grid_header_row.js

@@ -10,11 +10,13 @@ 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 _services = require("../../../../services");
+var _data_grid_types = require("../../data_grid_types");
 var _data_grid_control_header_cell = require("./data_grid_control_header_cell");
 var _data_grid_header_cell = require("./data_grid_header_cell");
-var _data_grid_types = require("../../data_grid_types");
+var _data_grid_header_row = require("./data_grid_header_row.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "data-test-subj", "leadingControlColumns", "trailingControlColumns", "columns", "columnWidths", "defaultColumnWidth", "setColumnWidth", "setVisibleColumns", "switchColumnPos", "sorting", "schema", "schemaDetectors"];
+var _excluded = ["className", "data-test-subj", "leadingControlColumns", "trailingControlColumns", "columns", "columnWidths", "defaultColumnWidth", "setColumnWidth", "setVisibleColumns", "switchColumnPos", "sorting", "schema", "schemaDetectors", "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,12 +42,16 @@ var EuiDataGridHeaderRow = exports.EuiDataGridHeaderRow = /*#__PURE__*/(0, _reac
     sorting = props.sorting,
     schema = props.schema,
     schemaDetectors = props.schemaDetectors,
+    gridStyles = props.gridStyles,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_header_row.euiDataGridHeaderStyles);
+  var cssStyles = [styles.euiDataGridHeader, styles[gridStyles.header]];
   var classes = (0, _classnames.default)('euiDataGridHeader', className);
   var dataTestSubj = (0, _classnames.default)('dataGridHeader', _dataTestSubj);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     role: "row",
     ref: ref,
+    css: cssStyles,
     className: classes,
     "data-test-subj": dataTestSubj
   }, rest), leadingControlColumns.map(function (controlColumn, index) {

package/optimize/lib/components/datagrid/body/header/data_grid_header_row.styles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridHeaderStyles = 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 euiDataGridHeaderStyles = exports.euiDataGridHeaderStyles = function euiDataGridHeaderStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiDataGridVariables = (0, _data_grid.euiDataGridVariables)(euiThemeContext),
+    levels = _euiDataGridVariables.levels;
+  return {
+    euiDataGridHeader: /*#__PURE__*/(0, _react.css)("z-index:", levels.stickyHeader, ";position:sticky;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " display:flex;;label:euiDataGridHeader;"),
+    underline: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.text)), ";;label:underline;"),
+    shade: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.lightestShade, ";;label:shade;")
+  };
+};

package/optimize/lib/components/datagrid/controls/column_selector.js

@@ -11,16 +11,18 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
 var _popover = require("../../popover");
 var _i18n = require("../../i18n");
 var _button = require("../../button");
 var _flex = require("../../flex");
 var _form = require("../../form");
-var _drag_and_drop = require("../../drag_and_drop");
+var _text = require("../../text");
 var _icon = require("../../icon");
-var _services = require("../../../services");
+var _drag_and_drop = require("../../drag_and_drop");
 var _data_grid_toolbar = require("./data_grid_toolbar");
 var _data_grid_toolbar_control = require("./data_grid_toolbar_control");
+var _column_selector = require("./column_selector.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; }
@@ -92,6 +94,7 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
       return column != null;
     });
   }, [availableColumns, visibleColumns]);
+  var styles = (0, _services.useEuiMemoizedStyles)(_column_selector.euiDataGridColumnSelectorStyles);
   var columnSelector = (0, _react.useMemo)(function () {
     return allowColumnHiding || allowColumnReorder ? (0, _react2.jsx)(_popover.EuiPopover, {
       "data-test-subj": "dataGridColumnSelectorPopover",
@@ -100,7 +103,7 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
         return setIsOpen(false);
       },
       anchorPosition: "downLeft",
-      panelPaddingSize: "s",
+      panelPaddingSize: "none",
       hasDragDrop: true,
       button: (0, _react2.jsx)(_data_grid_toolbar_control.EuiDataGridToolbarControl, {
         badgeContent: numberOfHiddenFields > 0 ? "".concat(orderedVisibleColumns.length, "/").concat(availableColumns.length) : availableColumns.length,
@@ -113,7 +116,9 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
         token: "euiColumnSelector.button",
         default: "Columns"
       }))
-    }, allowColumnHiding && (0, _react2.jsx)(_popover.EuiPopoverTitle, null, (0, _react2.jsx)(_i18n.EuiI18n, {
+    }, allowColumnHiding && (0, _react2.jsx)(_popover.EuiPopoverTitle, {
+      paddingSize: "s"
+    }, (0, _react2.jsx)(_i18n.EuiI18n, {
       tokens: ['euiColumnSelector.search', 'euiColumnSelector.searchcolumns'],
       defaults: ['Search', 'Search columns']
     }, function (_ref4) {
@@ -135,7 +140,7 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
     }, (0, _react2.jsx)(_drag_and_drop.EuiDroppable, {
       droppableId: "columnOrder",
       isDropDisabled: !isDragEnabled,
-      className: "euiDataGrid__controlScroll"
+      css: styles.euiDataGridColumnSelector
     }, (0, _react2.jsx)(_react.default.Fragment, null, filteredColumns.map(function (id, index) {
       return (0, _react2.jsx)(_drag_and_drop.EuiDraggable, {
         key: id,
@@ -146,6 +151,7 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
         customDragHandle: true
       }, function (provided, state) {
         return (0, _react2.jsx)("div", {
+          css: styles.euiDataGridColumnSelector__item,
           className: (0, _classnames.default)('euiDataGridColumnSelector__item', {
             'euiDataGridColumnSelector__item-isDragging': state.isDragging
           }),
@@ -176,7 +182,8 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
         , (0, _extends2.default)({}, provided.dragHandleProps, {
           "aria-hidden": true,
           tabIndex: -1
-        }), (0, _react2.jsx)("span", {
+        }), (0, _react2.jsx)(_text.EuiText, {
+          size: "xs",
           className: "euiDataGridColumnSelector__itemLabel"
         }, displayValues[id] || id)), isDragEnabled && (0, _react2.jsx)(_flex.EuiFlexItem, (0, _extends2.default)({
           grow: false
@@ -187,7 +194,9 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
           color: "subdued"
         }))));
       });
-    })))), allowColumnHiding && (0, _react2.jsx)(_popover.EuiPopoverFooter, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    })))), allowColumnHiding && (0, _react2.jsx)(_popover.EuiPopoverFooter, {
+      paddingSize: "s"
+    }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
       gutterSize: "s",
       responsive: false,
       justifyContent: "spaceBetween"
@@ -216,7 +225,7 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
       token: "euiColumnSelector.hideAll",
       default: "Hide all"
     })))))) : null;
-  }, [availableColumns.length, numberOfHiddenFields, orderedVisibleColumns.length, allowColumnHiding, allowColumnReorder, isOpen, columnSearchText, displayValues, visibleColumnIds, sortedColumns, setVisibleColumns, setIsOpen, onDragEnd, isDragEnabled, dragHandleAriaLabel, filteredColumns]);
+  }, [styles, availableColumns.length, numberOfHiddenFields, orderedVisibleColumns.length, allowColumnHiding, allowColumnReorder, isOpen, columnSearchText, displayValues, visibleColumnIds, sortedColumns, setVisibleColumns, setIsOpen, onDragEnd, isDragEnabled, dragHandleAriaLabel, filteredColumns]);
 
   /**
    * Used for moving columns left/right, available in the headers actions menu

package/optimize/lib/components/datagrid/controls/column_selector.styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDataGridColumnSelectorStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _themes = require("../../../themes");
+/*
+ * 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 euiDataGridColumnSelectorStyles = exports.euiDataGridColumnSelectorStyles = function euiDataGridColumnSelectorStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var maxStaticHeight = (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+    return x * 25;
+  });
+  var maxResponsiveHeight = "min(".concat(maxStaticHeight, ", 50vh)");
+  return {
+    euiDataGridColumnSelector: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiYScroll)(euiThemeContext), " ", (0, _global_styling.logicalCSS)('max-height', maxResponsiveHeight), " padding:", euiTheme.size.s, ";;label:euiDataGridColumnSelector;"),
+    euiDataGridColumnSelector__item: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.xs, ";&.euiDataGridColumnSelector__item-isDragging{", (0, _themes.euiShadowLarge)(euiThemeContext), " background-color:", euiTheme.colors.emptyShade, ";};label:euiDataGridColumnSelector__item;")
+  };
+};