@elastic/eui 89.0.0 → 89.1.0

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

@@ -23,13 +23,14 @@ var _services = require("../../../services");
 var _accessibility = require("../../accessibility");
 var _focus_trap = require("../../focus_trap");
 var _i18n = require("../../i18n");
+var _text_truncate = require("../../text_truncate");
 var _resize_observer = require("../../observer/resize_observer/resize_observer");
 var _focus = require("../utils/focus");
 var _data_grid_cell_actions = require("./data_grid_cell_actions");
 var _data_grid_cell_popover = require("./data_grid_cell_popover");
 var _utils = require("../../../utils");
 var _react2 = require("@emotion/react");
-var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowHeightsOptions", "rowIndex", "colIndex", "ariaRowIndex", "rowHeightUtils", "isDefinedHeight", "isFocused"],
+var _excluded = ["renderCellValue", "column", "setCellContentsRef", "setPopoverAnchorRef", "rowIndex", "colIndex", "ariaRowIndex", "rowHeight", "rowHeightUtils", "isControlColumn", "isFocused", "cellHeightType", "cellActions"],
   _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
   _excluded3 = ["isExpandable", "style", "className", "data-test-subj"];
 /*
@@ -49,28 +50,52 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var renderCellValue = _ref.renderCellValue,
     column = _ref.column,
     setCellContentsRef = _ref.setCellContentsRef,
-    rowHeightsOptions = _ref.rowHeightsOptions,
+    setPopoverAnchorRef = _ref.setPopoverAnchorRef,
     rowIndex = _ref.rowIndex,
     colIndex = _ref.colIndex,
     ariaRowIndex = _ref.ariaRowIndex,
+    rowHeight = _ref.rowHeight,
     rowHeightUtils = _ref.rowHeightUtils,
-    isDefinedHeight = _ref.isDefinedHeight,
+    isControlColumn = _ref.isControlColumn,
     isFocused = _ref.isFocused,
+    cellHeightType = _ref.cellHeightType,
+    cellActions = _ref.cellActions,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // React is more permissible than the TS types indicate
   var CellElement = renderCellValue;
-  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
-    ref: setCellContentsRef,
+  var wrapperClasses = (0, _classnames.default)('euiDataGridRowCell__contentWrapper', "euiDataGridRowCell__".concat(cellHeightType, "Height"));
+  var classes = (0, _classnames.default)('euiDataGridRowCell__content', !isControlColumn && {
+    'eui-textBreakWord': cellHeightType !== 'default',
+    'eui-textTruncate': cellHeightType === 'default'
+  });
+  var cellContent = (0, _react2.jsx)("div", {
+    ref: function ref(el) {
+      setCellContentsRef(el);
+      setPopoverAnchorRef.current = cellHeightType === 'default' ? // Default height cells need the popover to be anchored on the wrapper,
+      // in order for the popover to centered on the full cell width (as content
+      // width is affected by the width of cell actions)
+      el === null || el === void 0 ? void 0 : el.parentElement :
+      // Numerical height cells need the popover anchor to be below the wrapper
+      // class, in order to set height: 100% on the portalled popover div wrappers
+      el;
+    },
     "data-datagrid-cellcontent": true,
-    className: isDefinedHeight ? 'euiDataGridRowCell__definedHeight' : 'euiDataGridRowCell__truncate',
-    style: isDefinedHeight ? rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getStylesForCell(rowHeightsOptions, rowIndex) : {}
+    className: classes
   }, (0, _react2.jsx)(CellElement, (0, _extends2.default)({
     isDetails: false,
     "data-test-subj": "cell-content",
     rowIndex: rowIndex,
     colIndex: colIndex,
     schema: (column === null || column === void 0 ? void 0 : column.schema) || rest.columnType
-  }, rest))), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+  }, rest)));
+  if (cellHeightType === 'lineCount' && !isControlColumn) {
+    var lines = rowHeightUtils.getLineCount(rowHeight);
+    cellContent = (0, _react2.jsx)(_text_truncate.EuiTextBlockTruncate, {
+      lines: lines,
+      cloneElement: true
+    }, cellContent);
+  }
+  var screenReaderText = (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
     hidden: !isFocused
   }, '- ', (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiDataGridCell.position",
@@ -80,7 +105,10 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       col: colIndex + 1,
       row: ariaRowIndex
     }
-  }))));
+  })));
+  return (0, _react2.jsx)("div", {
+    className: wrapperClasses
+  }, cellContent, screenReaderText, cellActions);
 });
 var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(EuiDataGridCell, _Component);
@@ -530,24 +558,43 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
           }
         }
       };
-      var isDefinedHeight = !!(rowHeightUtils !== null && rowHeightUtils !== void 0 && rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions));
+      var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
+      var cellHeightType = (rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getHeightType(rowHeight)) || 'default';
       var cellContentProps = _objectSpread(_objectSpread({}, rest), {}, {
         setCellProps: this.setCellProps,
         column: column,
         columnType: columnType,
+        cellHeightType: cellHeightType,
         isExpandable: isExpandable,
         isExpanded: popoverIsOpen,
         isDetails: false,
         isFocused: this.state.isFocused,
         setCellContentsRef: this.setCellContentsRef,
-        rowHeightsOptions: rowHeightsOptions,
+        setPopoverAnchorRef: this.popoverAnchorRef,
+        rowHeight: rowHeight,
         rowHeightUtils: rowHeightUtils,
-        isDefinedHeight: isDefinedHeight,
+        isControlColumn: cellClasses.includes('euiDataGridRowCell--controlColumn'),
         ariaRowIndex: ariaRowIndex
       });
-      var anchorClass = 'euiDataGridRowCell__expandFlex';
-      var expandClass = isDefinedHeight ? 'euiDataGridRowCell__contentByHeight' : 'euiDataGridRowCell__expandContent';
-      var innerContent = (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
+      var cellActions = showCellActions && (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
+        rowIndex: rowIndex,
+        colIndex: colIndex,
+        column: column,
+        cellHeightType: cellHeightType,
+        onExpandClick: function onExpandClick() {
+          if (popoverIsOpen) {
+            closeCellPopover();
+          } else {
+            openCellPopover({
+              rowIndex: visibleRowIndex,
+              colIndex: colIndex
+            });
+          }
+        }
+      });
+      var cellContent = isExpandable ? (0, _react2.jsx)(EuiDataGridCellContent, (0, _extends2.default)({}, cellContentProps, {
+        cellActions: cellActions
+      })) : (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
         disabled: !this.state.isEntered,
         autoFocus: true,
         onDeactivation: function onDeactivation() {
@@ -556,35 +603,8 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
           }, _this2.preventTabbing);
         },
         clickOutsideDisables: true
-      }, (0, _react2.jsx)("div", {
-        className: anchorClass,
-        ref: this.popoverAnchorRef
-      }, (0, _react2.jsx)("div", {
-        className: expandClass
-      }, (0, _react2.jsx)(EuiDataGridCellContent, cellContentProps))));
-      if (isExpandable) {
-        innerContent = (0, _react2.jsx)("div", {
-          className: anchorClass,
-          ref: this.popoverAnchorRef
-        }, (0, _react2.jsx)("div", {
-          className: expandClass
-        }, (0, _react2.jsx)(EuiDataGridCellContent, cellContentProps)), showCellActions && (0, _react2.jsx)(_data_grid_cell_actions.EuiDataGridCellActions, {
-          rowIndex: rowIndex,
-          colIndex: colIndex,
-          column: column,
-          onExpandClick: function onExpandClick() {
-            if (popoverIsOpen) {
-              closeCellPopover();
-            } else {
-              openCellPopover({
-                rowIndex: visibleRowIndex,
-                colIndex: colIndex
-              });
-            }
-          }
-        }));
-      }
-      var content = (0, _react2.jsx)("div", (0, _extends2.default)({
+      }, (0, _react2.jsx)(EuiDataGridCellContent, cellContentProps));
+      var cell = (0, _react2.jsx)("div", (0, _extends2.default)({
         role: "gridcell",
         "aria-rowindex": ariaRowIndex,
         tabIndex: this.state.isFocused && !this.state.disableCellTabIndex ? 0 : -1,
@@ -614,14 +634,14 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
           });
         },
         onBlur: this.onBlur
-      }), innerContent);
-      return rowManager && !_utils.IS_JEST_ENVIRONMENT ? /*#__PURE__*/(0, _reactDom.createPortal)(content, rowManager.getRow({
+      }), cellContent);
+      return rowManager && !_utils.IS_JEST_ENVIRONMENT ? /*#__PURE__*/(0, _reactDom.createPortal)(cell, rowManager.getRow({
         rowIndex: rowIndex,
         visibleRowIndex: visibleRowIndex,
         top: style.top,
         // comes in as a `{float}px` string from react-window
         height: style.height // comes in as an integer from react-window
-      })) : content;
+      })) : cell;
     }
   }]);
   return EuiDataGridCell;

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

@@ -15,6 +15,7 @@ var _button_icon = require("../../button/button_icon");
 var _button_empty = require("../../button/button_empty");
 var _flex = require("../../flex");
 var _popover = require("../../popover");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -30,7 +31,8 @@ var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
   var onExpandClick = _ref.onExpandClick,
     column = _ref.column,
     rowIndex = _ref.rowIndex,
-    colIndex = _ref.colIndex;
+    colIndex = _ref.colIndex,
+    cellHeightType = _ref.cellHeightType;
   // 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
@@ -77,8 +79,11 @@ var EuiDataGridCellActions = function EuiDataGridCellActions(_ref) {
       });
     });
   }, [column, colIndex, rowIndex]);
+  var classes = (0, _classnames.default)('euiDataGridRowCell__actions', {
+    'euiDataGridRowCell__actions--overlay': cellHeightType !== 'default'
+  });
   return (0, _react2.jsx)("div", {
-    className: "euiDataGridRowCell__expandActions"
+    className: classes
   }, [].concat((0, _toConsumableArray2.default)(additionalButtons), [expandButton]));
 };
 exports.EuiDataGridCellActions = EuiDataGridCellActions;

package/optimize/lib/components/datagrid/utils/row_heights.js

@@ -48,25 +48,20 @@ var RowHeightUtils = /*#__PURE__*/function () {
       paddingTop: 0,
       paddingBottom: 0
     });
-    (0, _defineProperty2.default)(this, "getStylesForCell", function (rowHeightsOptions, rowIndex) {
-      var height = _this.getRowHeightOption(rowIndex, rowHeightsOptions);
-      if (height === AUTO_HEIGHT) {
-        return {};
+    /**
+     * Height types
+     */
+    (0, _defineProperty2.default)(this, "getHeightType", function (option) {
+      if (option == null) {
+        return 'default';
       }
-      var lineCount = _this.getLineCount(height);
-      if (lineCount) {
-        return {
-          WebkitLineClamp: lineCount,
-          display: '-webkit-box',
-          WebkitBoxOrient: 'vertical',
-          height: '100%',
-          overflow: 'hidden'
-        };
+      if (option === AUTO_HEIGHT) {
+        return 'auto';
       }
-      return {
-        height: '100%',
-        overflow: 'hidden'
-      };
+      if (_this.getLineCount(option) != null) {
+        return 'lineCount';
+      }
+      return 'numerical';
     });
     /**
      * Heights cache utils

package/optimize/lib/components/icon/assets/tokenVectorDense.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _excluded = ["title", "titleId"];
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var EuiIconTokenVectorDense = function EuiIconTokenVectorDense(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    d: "M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11Z"
+  }), (0, _react2.jsx)("path", {
+    d: "M6 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4-7a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2-5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  }), (0, _react2.jsx)("path", {
+    d: "M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"
+  }));
+};
+var icon = EuiIconTokenVectorDense;
+exports.icon = icon;

package/optimize/lib/components/icon/assets/{tokenDenseVector.js → tokenVectorSparse.js}

@@ -21,7 +21,7 @@ var _excluded = ["title", "titleId"];
 // THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var EuiIconTokenDenseVector = function EuiIconTokenDenseVector(_ref) {
+var EuiIconTokenVectorSparse = function EuiIconTokenVectorSparse(_ref) {
   var title = _ref.title,
     titleId = _ref.titleId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -34,8 +34,12 @@ var EuiIconTokenDenseVector = function EuiIconTokenDenseVector(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    d: "M4.154 12V4h2.713v1.14H5.658v5.72h1.21V12H4.153Zm7.692-8v8H9.133v-1.14h1.209V5.14h-1.21V4h2.714Z"
+    d: "M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11ZM8 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  }), (0, _react2.jsx)("path", {
+    d: "M6 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm5 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  }), (0, _react2.jsx)("path", {
+    d: "M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"
   }));
 };
-var icon = EuiIconTokenDenseVector;
+var icon = EuiIconTokenVectorSparse;
 exports.icon = icon;

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

@@ -452,7 +452,6 @@ var typeToPathMap = {
   tokenCompletionSuggester: 'tokenCompletionSuggester',
   tokenConstant: 'tokenConstant',
   tokenDate: 'tokenDate',
-  tokenDenseVector: 'tokenDenseVector',
   tokenElement: 'tokenElement',
   tokenEnum: 'tokenEnum',
   tokenEnumMember: 'tokenEnumMember',
@@ -495,6 +494,10 @@ var typeToPathMap = {
   tokenTag: 'tokenTag',
   tokenText: 'tokenText',
   tokenTokenCount: 'tokenTokenCount',
-  tokenVariable: 'tokenVariable'
+  tokenVariable: 'tokenVariable',
+  tokenVectorDense: 'tokenVectorDense',
+  tokenDenseVector: 'tokenVectorDense',
+  // NOTE: This is an undocumented alias for `tokenVectorDense`, added for legacy compatability
+  tokenVectorSparse: 'tokenVectorSparse'
 };
 exports.typeToPathMap = typeToPathMap;

package/optimize/lib/components/icon/svgs/tokens/tokenVectorDense.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11Z"/>
+  <path d="M6 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4-7a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2-5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+  <path d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"/>
+</svg>

package/optimize/lib/components/icon/svgs/tokens/tokenVectorSparse.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11ZM8 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+  <path d="M6 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm5 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+  <path d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"/>
+</svg>

package/optimize/lib/components/provider/provider.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiProvider = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _css = require("@emotion/css");
-var _global_styles = require("../../global_styling/reset/global_styles");
-var _utility = require("../../global_styling/utility/utility");
 var _services = require("../../services");
 var _warning = require("../../services/theme/warning");
+var _css = require("../../services/emotion/css");
+var _global_styles = require("../../global_styling/reset/global_styles");
+var _utility = require("../../global_styling/utility/utility");
 var _themes = require("../../themes");
 var _cache = require("./cache");
 var _nested = require("./nested");

package/optimize/lib/components/token/token_map.js

@@ -55,10 +55,6 @@ var TOKEN_MAP = {
     shape: 'square',
     color: 'euiColorVis6'
   },
-  tokenDenseVector: {
-    shape: 'square',
-    color: 'euiColorVis2'
-  },
   tokenElement: {
     shape: 'square',
     color: 'euiColorVis3'
@@ -230,6 +226,18 @@ var TOKEN_MAP = {
   tokenVariable: {
     shape: 'circle',
     color: 'euiColorVis7'
+  },
+  tokenVectorDense: {
+    shape: 'square',
+    color: 'euiColorVis5'
+  },
+  tokenDenseVector: {
+    shape: 'square',
+    color: 'euiColorVis5'
+  },
+  tokenVectorSparse: {
+    shape: 'square',
+    color: 'euiColorVis1'
   }
 };
 exports.TOKEN_MAP = TOKEN_MAP;

package/optimize/lib/services/emotion/css.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cx = exports.css = exports.cache = void 0;
+var _createInstance = _interopRequireDefault(require("@emotion/css/create-instance"));
+var _prefixer = require("./prefixer");
+/*
+ * 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.
+ */
+
+/**
+ * This custom instance is needed for internal EUI components to call
+ * `@emotion/css` with EUI's custom prefixer plugin
+ * @see https://emotion.sh/docs/@emotion/css#custom-instances
+ *
+ * NOTE: Usage is currently being beta tested internally,
+ * and is not yet intended to be a public export
+ */
+var _createEmotion = (0, _createInstance.default)({
+    key: 'css',
+    stylisPlugins: [_prefixer.euiStylisPrefixer],
+    speedy: false
+  }),
+  css = _createEmotion.css,
+  cx = _createEmotion.cx,
+  cache = _createEmotion.cache;
+exports.cache = cache;
+exports.cx = cx;
+exports.css = css;

package/optimize/lib/services/emotion/index.js

@@ -13,4 +13,15 @@ Object.keys(_clone_element).forEach(function (key) {
       return _clone_element[key];
     }
   });
+});
+var _prefixer = require("./prefixer");
+Object.keys(_prefixer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _prefixer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _prefixer[key];
+    }
+  });
 });

package/optimize/lib/services/emotion/prefixer.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiStylisPrefixer = void 0;
+var _stylis = require("stylis");
+/*
+ * 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.
+ */
+
+// This is a heavily modified version of Emotion's default `prefixer` plugin
+// (mostly removing unnecessary prefixes), which is in turn a modified version
+// of stylis's default prefixer.
+// @see https://github.com/emotion-js/emotion/blob/main/packages/cache/src/prefixer.js
+/* eslint-disable prefer-template */
+
+/**
+ * This is a stylis plugin which handles auto-prefixing CSS output by Emotion.
+ *
+ * *Please note*: EUI/Elastic targets latest evergreen browsers for support only.
+ * @see https://www.elastic.co/support/matrix#matrix_browsers
+ */
+var euiStylisPrefixer = function euiStylisPrefixer(element) {
+  if (element.length > -1) if (!element.return) switch (element.type) {
+    case _stylis.DECLARATION:
+      element.return = prefix(element.value, element.length);
+      break;
+  }
+};
+exports.euiStylisPrefixer = euiStylisPrefixer;
+var prefix = function prefix(value, length) {
+  switch ((0, _stylis.hash)(value, length)) {
+    /**
+     * `-webkit` prefixes
+     */
+    // user-select - https://caniuse.com/mdn-css_properties_user-select - needed by Safari
+    case 4246:
+    // text-decoration - https://caniuse.com/text-decoration - iOS Safari is the main one that needs this
+    case 5572:
+    // text-size-adjust - https://caniuse.com/text-size-adjust - iOS Safari
+    case 2756:
+    // box-decoration-break - https://caniuse.com/css-boxdecorationbreak - Chrome & Safari
+    case 3005:
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite - Chrome
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855:
+    // print-color-adjust - https://caniuse.com/css-color-adjust - Chrome
+    case 2282:
+      return _stylis.WEBKIT + value + value;
+
+    // background-clip - https://caniuse.com/background-clip-text - Chrome, only for `text` value
+    case 4215:
+      if (~(0, _stylis.indexof)(value, 'text')) {
+        return _stylis.WEBKIT + value + value;
+      }
+
+    /**
+     * Intrinsic/extrinsic sizing value prefixes
+     * `stretch` alternatives needed by Chrome & Firefox - https://caniuse.com/intrinsic-width
+     */
+    // (min|max)?(width|height|inline-size|block-size)
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      // stretch, max-content, min-content, fill-available
+      if ((0, _stylis.strlen)(value) - 1 - length > 6) switch ((0, _stylis.charat)(value, length + 1)) {
+        // (f)ill-available
+        case 102:
+          if (~(0, _stylis.indexof)(value, 'fill-available')) {
+            return (0, _stylis.replace)(value, /(.+:)(.+)-([^]+)/, '$1' + _stylis.WEBKIT + '$2-$3' + '$1' + _stylis.MOZ + ((0, _stylis.charat)(value, length + 3) === 108 ? '$3' : '$2-$3'));
+          }
+        // (s)tretch
+        case 115:
+          if (~(0, _stylis.indexof)(value, 'stretch')) {
+            return prefix((0, _stylis.replace)(value, 'stretch', 'fill-available'), length) + value;
+          }
+      }
+      break;
+  }
+  return value;
+};

package/optimize/lib/services/theme/provider.js

@@ -8,18 +8,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiThemeProvider = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _css2 = require("@emotion/css");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _emotion = require("../emotion");
+var _css2 = require("../emotion/css");
 var _context = require("./context");
 var _emotion2 = require("./emotion");
 var _utils = require("./utils");
 var _excluded = ["cloneElement", "className"];
+var _templateObject;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -110,13 +111,13 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
       // The theme that determines the global body styles
       bodyColor: isGlobalTheme ? theme.colors.text : bodyColor,
       hasDifferentColorFromGlobalTheme: isGlobalTheme ? false : bodyColor !== theme.colors.text,
-      colorClassName: /*#__PURE__*/(0, _css2.css)("label:euiColorMode-", _colorMode, ";color:", theme.colors.text, ";;label:colorClassName;"),
+      colorClassName: (0, _css2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        label: euiColorMode-", ";\n        color: ", ";\n      "])), _colorMode || colorMode, theme.colors.text),
       setGlobalCSSVariables: isGlobalTheme ? setThemeCSSVariables : setGlobalCSSVariables,
       globalCSSVariables: isGlobalTheme ? themeCSSVariables : globalCSSVariables,
       setNearestThemeCSSVariables: setThemeCSSVariables,
       themeCSSVariables: themeCSSVariables
     };
-  }, [theme, isGlobalTheme, bodyColor, _colorMode, setGlobalCSSVariables, globalCSSVariables, setThemeCSSVariables, themeCSSVariables]);
+  }, [theme, isGlobalTheme, bodyColor, _colorMode, colorMode, setGlobalCSSVariables, globalCSSVariables, setThemeCSSVariables, themeCSSVariables]);
   var renderedChildren = (0, _react2.useMemo)(function () {
     if (isGlobalTheme) {
       return children; // No wrapper
@@ -127,7 +128,7 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
       className = _ref2.className,
       rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
     var props = _objectSpread(_objectSpread({}, rest), {}, {
-      className: (0, _classnames.default)(className, nestedThemeContext.colorClassName)
+      className: (0, _css2.cx)(className, nestedThemeContext.colorClassName)
     });
     // Condition avoids rendering an empty Emotion selector if no
     // theme-specific CSS variables have been set by child components
@@ -138,11 +139,11 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
     }
     if (cloneElement) {
       return (0, _emotion.cloneElementWithCss)(children, _objectSpread(_objectSpread({}, props), {}, {
-        className: (0, _classnames.default)(children.props.className, props.className)
+        className: (0, _css2.cx)(children.props.className, props.className)
       }));
     } else {
       return (0, _react.jsx)("span", (0, _extends2.default)({}, props, {
-        className: (0, _classnames.default)('euiThemeProvider', props.className)
+        className: (0, _css2.cx)('euiThemeProvider', props.className)
       }), children);
     }
   }, [isGlobalTheme, themeCSSVariables, nestedThemeContext, wrapperProps, children]);

package/optimize/lib/services/theme/utils.js

@@ -43,7 +43,7 @@ var isInverseColorMode = function isInverseColorMode(colorMode) {
 /**
  * Returns the color mode configured in the current EuiThemeProvider.
  * Returns the parent color mode if none is explicity set.
- * @param {string} coloMode - `light`, `dark`, or `inverse`
+ * @param {string} colorMode - `light`, `dark`, or `inverse`
  * @param {string} parentColorMode - `LIGHT` or `DARK`; used as the fallback
  */
 exports.isInverseColorMode = isInverseColorMode;