@elastic/eui 113.1.0 → 113.2.0

package/es/components/table/table_row_cell.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["align", "children", "className", "truncateText", "setScopeRow", "textOnly", "hasActions", "isExpander", "style", "width", "valign", "mobileOptions", "append"];
+var _excluded = ["align", "children", "className", "truncateText", "setScopeRow", "textOnly", "hasActions", "isExpander", "style", "width", "minWidth", "maxWidth", "valign", "mobileOptions", "append", "sticky"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -27,9 +27,10 @@ import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useEuiMemoizedStyles, LEFT_ALIGNMENT } from '../../services';
 import { useEuiTableIsResponsive } from './mobile/responsive_context';
-import { resolveWidthAsStyle } from './utils';
+import { resolveWidthPropsAsStyle } from './utils';
 import { EuiTableCellContent } from './_table_cell_content';
 import { euiTableRowCellStyles } from './table_row_cell.styles';
+import { _useEuiTableStickyCellStyles } from './table_cells_shared.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiTableRowCell = function EuiTableRowCell(_ref) {
   var _ref$align = _ref.align,
@@ -42,27 +43,43 @@ export var EuiTableRowCell = function EuiTableRowCell(_ref) {
     textOnly = _ref$textOnly === void 0 ? true : _ref$textOnly,
     hasActions = _ref.hasActions,
     isExpander = _ref.isExpander,
-    style = _ref.style,
+    _style = _ref.style,
     width = _ref.width,
+    minWidth = _ref.minWidth,
+    maxWidth = _ref.maxWidth,
     _ref$valign = _ref.valign,
     valign = _ref$valign === void 0 ? 'middle' : _ref$valign,
     mobileOptions = _ref.mobileOptions,
     append = _ref.append,
+    sticky = _ref.sticky,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isResponsive = useEuiTableIsResponsive();
   var styles = useEuiMemoizedStyles(euiTableRowCellStyles);
-  var cssStyles = [styles.euiTableRowCell, setScopeRow && styles.rowHeader, isExpander && styles.isExpander, hasActions && styles.hasActions, styles[valign]].concat(_toConsumableArray(isResponsive ? [styles.mobile.mobile, (mobileOptions === null || mobileOptions === void 0 ? void 0 : mobileOptions.enlarge) && styles.mobile.enlarge, hasActions === 'custom' && styles.mobile.customActions, hasActions === true && styles.mobile.actions, isExpander && styles.mobile.expander] : [styles.desktop.desktop, hasActions && styles.desktop.actions]));
+  var stickyStyles = _useEuiTableStickyCellStyles(sticky);
+  var cssStyles = [styles.euiTableRowCell, setScopeRow && styles.rowHeader, isExpander && styles.isExpander, hasActions && styles.hasActions, styles[valign]].concat(_toConsumableArray(isResponsive ? [styles.mobile.mobile, (mobileOptions === null || mobileOptions === void 0 ? void 0 : mobileOptions.enlarge) && styles.mobile.enlarge, hasActions === 'custom' && styles.mobile.customActions, hasActions === true && styles.mobile.actions, isExpander && styles.mobile.expander] : [styles.desktop.desktop, hasActions && styles.desktop.actions, stickyStyles]));
   var cellClasses = classNames('euiTableRowCell', className, {
     'euiTableRowCell--hasActions': hasActions,
     'euiTableRowCell--isExpander': isExpander
   });
-  var widthValue = isResponsive ? hasActions || isExpander ? undefined // On mobile, actions are shifted to a right column via CSS
-  : mobileOptions === null || mobileOptions === void 0 ? void 0 : mobileOptions.width : width;
-  var styleObj = resolveWidthAsStyle(style, widthValue);
+  var getResponsiveWidth = function getResponsiveWidth(defaultWidth, mobileWidth) {
+    if (isResponsive) {
+      if (hasActions || isExpander) {
+        // On mobile, actions are shifted to a right column via CSS
+        return undefined;
+      }
+      return mobileWidth;
+    }
+    return defaultWidth;
+  };
+  var inlineWidthStyles = resolveWidthPropsAsStyle(_style, {
+    width: getResponsiveWidth(width, mobileOptions === null || mobileOptions === void 0 ? void 0 : mobileOptions.minWidth),
+    minWidth: getResponsiveWidth(minWidth, mobileOptions === null || mobileOptions === void 0 ? void 0 : mobileOptions.minWidth),
+    maxWidth: getResponsiveWidth(maxWidth, mobileOptions === null || mobileOptions === void 0 ? void 0 : mobileOptions.minWidth)
+  });
   var Element = setScopeRow ? 'th' : 'td';
   var sharedProps = _objectSpread({
     scope: setScopeRow ? 'row' : undefined,
-    style: styleObj,
+    style: _objectSpread(_objectSpread({}, _style), inlineWidthStyles),
     css: cssStyles
   }, rest);
   var sharedContentProps = {
@@ -96,7 +113,9 @@ export var EuiTableRowCell = function EuiTableRowCell(_ref) {
     } else {
       return ___EmotionJSX(Element, _extends({
         className: cellClasses
-      }, sharedProps), ___EmotionJSX(EuiTableCellContent, sharedContentProps, children), append);
+      }, sharedProps, {
+        "data-sticky": sticky === null || sticky === void 0 ? void 0 : sticky.side
+      }), ___EmotionJSX(EuiTableCellContent, sharedContentProps, children), append);
     }
   }
 };
@@ -156,7 +175,7 @@ EuiTableRowCell.propTypes = {
        * Applies the value to the width of the cell in mobile view (typically 50%)
        * @default 50%
        */
-    width: PropTypes.any,
+    width: PropTypes.oneOfType([PropTypes.any, PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired])]),
     /**
        * Horizontal alignment of the text in the cell
        */
@@ -176,7 +195,9 @@ EuiTableRowCell.propTypes = {
        */
     truncateText: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.shape({
       lines: PropTypes.number.isRequired
-    }).isRequired])
+    }).isRequired]),
+    minWidth: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired]),
+    maxWidth: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired])
   }),
   /**
      * Content rendered outside the visible cell content wrapper. Useful for, e.g. screen reader text.
@@ -184,6 +205,32 @@ EuiTableRowCell.propTypes = {
      * Used by EuiBasicTable to render hidden copy markers
      */
   append: PropTypes.node,
+  /**
+     * Whether the cell should stick to a side of the table.
+     *
+     * This option is not applied in the responsive cards layout - see
+     * {@link EuiTableProps#responsiveBreakpoint|`responsiveBreakpoint`}.
+     *
+     * Currently, it can only be used when the cell is in the first or the last
+     * column of a table.
+     *
+     * When set to `true` and `hasBackground: false` is set on the table,
+     * `--euiTableCellStickyBackgroundColor` CSS variable should be set to match
+     * the background color of the element containing the table.
+     * Otherwise, the sticky cell will use the default `backgroundBasePlain`
+     * background color.
+     * @internal
+     * @beta
+     * @default false
+     */
+  sticky: PropTypes.shape({
+    /**
+       * The side the cell should stick to.
+       * In horizontal writing-mode, `start` equals the left side and `end`
+       * the right side.
+       */
+    side: PropTypes.oneOf(["start", "end"]).isRequired
+  }),
   /**
      * Horizontal alignment of the text in the cell
      */
@@ -204,5 +251,7 @@ EuiTableRowCell.propTypes = {
   truncateText: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.shape({
     lines: PropTypes.number.isRequired
   }).isRequired]),
-  width: PropTypes.any
+  width: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired]),
+  minWidth: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired]),
+  maxWidth: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired])
 };

package/es/components/table/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/table/utils.js

@@ -1,12 +1,3 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["width"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -15,21 +6,56 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-export var WARNING_MESSAGE = 'Two `width` properties were provided. Provide only one of `style.width` or `width` to avoid conflicts.';
-export var resolveWidthAsStyle = function resolveWidthAsStyle() {
-  var style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var width = arguments.length > 1 ? arguments[1] : undefined;
-  var styleWidth = style.width,
-    styleRest = _objectWithoutProperties(style, _excluded);
-  var attrWidth = width;
-  if (attrWidth != null && (typeof attrWidth === 'number' || !isNaN(Number(attrWidth))) // transform {number} or unitless 'number' to px string
-  ) {
-    attrWidth = "".concat(attrWidth, "px");
+/**
+ * @internal
+ */
+export var WARNING_MESSAGE_WIDTH = 'Two `width` properties were provided. Provide only one of `style.width` or `width` to avoid conflicts.';
+
+/**
+ * @internal
+ */
+export var WARNING_MESSAGE_MIN_WIDTH = 'Two `minWidth` properties were provided. Provide only one of `style.minWidth` or `minWidth` to avoid conflicts.';
+
+/**
+ * @internal
+ */
+export var WARNING_MESSAGE_MAX_WIDTH = 'Two `maxWidth` properties were provided. Provide only one of `style.maxWidth` or `maxWidth` to avoid conflicts.';
+var normalizeValue = function normalizeValue(value) {
+  if (value === undefined || Number.isNaN(value)) {
+    return undefined;
+  }
+  if (typeof value === 'number') {
+    return "".concat(value, "px");
   }
-  if (styleWidth && attrWidth) {
-    console.warn(WARNING_MESSAGE);
+  return value;
+};
+
+/**
+ * @internal
+ */
+export var resolveWidthPropsAsStyle = function resolveWidthPropsAsStyle() {
+  var style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _ref = arguments.length > 1 ? arguments[1] : undefined,
+    rawWidth = _ref.width,
+    rawMinWidth = _ref.minWidth,
+    rawMaxWidth = _ref.maxWidth;
+  var width = normalizeValue(rawWidth);
+  var minWidth = normalizeValue(rawMinWidth);
+  var maxWidth = normalizeValue(rawMaxWidth);
+  if (process.env.NODE_ENV !== 'production') {
+    if (style.width && width !== undefined) {
+      console.warn(WARNING_MESSAGE_WIDTH);
+    }
+    if (style.minWidth && minWidth !== undefined) {
+      console.warn(WARNING_MESSAGE_MIN_WIDTH);
+    }
+    if (style.maxWidth && maxWidth !== undefined) {
+      console.warn(WARNING_MESSAGE_MAX_WIDTH);
+    }
   }
-  return _objectSpread(_objectSpread({}, styleRest), {}, {
-    width: attrWidth || styleWidth
-  });
+  return {
+    width: width || style.width,
+    minWidth: minWidth || style.minWidth,
+    maxWidth: maxWidth || style.maxWidth
+  };
 };

package/es/components/tree_view/tree_view_item.js

@@ -53,7 +53,7 @@ export var EuiTreeViewItem = /*#__PURE__*/memo(function (_ref) {
   }, rest), hasArrow && (!!children ? ___EmotionJSX(EuiIcon, {
     className: "euiTreeView__expansionArrow",
     size: display === 'compressed' ? 's' : 'm',
-    type: isExpanded ? 'arrowDown' : 'arrowRight'
+    type: isExpanded ? 'chevronSingleDown' : 'chevronSingleRight'
   }) : ___EmotionJSX("span", {
     css: iconStyles,
     className: "euiTreeView__arrowPlaceholder"

package/es/global_styling/mixins/_button.js

@@ -48,14 +48,16 @@ var getButtonVariantTokenValues = function getButtonVariantTokenValues(_ref, col
     borderColor: highContrastMode ? foreground : color === 'text' ? euiTheme.colors.borderBasePlain : 'transparent'
   };
 };
-export var getEuiButtonColors = function getEuiButtonColors(euiThemeContext, color) {
+export var getEuiButtonColorValues = function getEuiButtonColorValues(euiThemeContext, color) {
   var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'base');
   var foreground = buttonColors.color;
   var background = buttonColors.background;
   return {
     color: background === 'transparent' || color === 'disabled' ? foreground : makeHighContrastColor(foreground)(background),
     backgroundColor: background,
-    borderColor: buttonColors.borderColor
+    borderColor: buttonColors.borderColor,
+    backgroundHover: buttonColors.backgroundHover,
+    backgroundActive: buttonColors.backgroundActive
   };
 };
 
@@ -66,20 +68,22 @@ export var getEuiButtonColors = function getEuiButtonColors(euiThemeContext, col
  * @returns Style object `{ backgroundColor, color }`
  */
 export var euiButtonColor = function euiButtonColor(euiThemeContext, color) {
-  var buttonColors = getEuiButtonColors(euiThemeContext, color);
+  var buttonColors = getEuiButtonColorValues(euiThemeContext, color);
   return _objectSpread({
     color: buttonColors.color,
     backgroundColor: buttonColors.backgroundColor
   }, _highContrastBorder(euiThemeContext, buttonColors.borderColor));
 };
-export var getEuiFilledButtonColors = function getEuiFilledButtonColors(euiThemeContext, color) {
+export var getEuiFilledButtonColorValues = function getEuiFilledButtonColorValues(euiThemeContext, color) {
   var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'filled');
   var foreground = buttonColors.color;
   var background = buttonColors.background;
   return {
     color: foreground,
     backgroundColor: background,
-    borderColor: color === 'disabled' ? foreground : background
+    borderColor: color === 'disabled' ? foreground : background,
+    backgroundHover: buttonColors.backgroundHover,
+    backgroundActive: buttonColors.backgroundActive
   };
 };
 
@@ -90,7 +94,7 @@ export var getEuiFilledButtonColors = function getEuiFilledButtonColors(euiTheme
  * @returns Style object `{ backgroundColor, color }`
  */
 export var euiButtonFillColor = function euiButtonFillColor(euiThemeContext, color) {
-  var buttonColors = getEuiFilledButtonColors(euiThemeContext, color);
+  var buttonColors = getEuiFilledButtonColorValues(euiThemeContext, color);
   var foreground = buttonColors.color;
   var background = buttonColors.backgroundColor;
   return _objectSpread({
@@ -152,19 +156,19 @@ export var euiButtonDisplaysColors = function euiButtonDisplaysColors(euiThemeCo
           {
             var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'base');
             var borderStyle = color === 'text' && "\n              border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderBasePlain, ";\n            ");
-            displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonColor(euiThemeContext, color), " ", _interactionStyles(euiThemeContext, buttonColors, 'overlay'), " ", borderStyle, ";;label:displaysColorsMap-display-color;");
+            displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonColor(euiThemeContext, color), " ", euiButtonInteractionStyles(euiThemeContext, buttonColors, 'overlay'), " ", borderStyle, ";;label:displaysColorsMap-display-color;");
             break;
           }
         case 'fill':
           {
             var _buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'filled');
-            displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : color !== 'disabled' ? euiThemeContext.euiTheme.colors.fullShade : '', ";", _interactionStyles(euiThemeContext, _buttonColors), ";;label:displaysColorsMap-display-color;");
+            displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : color !== 'disabled' ? euiThemeContext.euiTheme.colors.fullShade : '', ";", euiButtonInteractionStyles(euiThemeContext, _buttonColors), ";;label:displaysColorsMap-display-color;");
             break;
           }
         case 'empty':
           {
             var _buttonColors2 = getButtonVariantTokenValues(euiThemeContext, color, 'empty');
-            displaysColorsMap[display][color] = /*#__PURE__*/css("color:", euiButtonEmptyColor(euiThemeContext, color).color, ";", _interactionStyles(euiThemeContext, _buttonColors2, 'overlay'), ";;label:displaysColorsMap-display-color;");
+            displaysColorsMap[display][color] = /*#__PURE__*/css("color:", euiButtonEmptyColor(euiThemeContext, color).color, ";", euiButtonInteractionStyles(euiThemeContext, _buttonColors2, 'overlay'), ";;label:displaysColorsMap-display-color;");
             break;
           }
       }
@@ -232,7 +236,7 @@ export var euiButtonSizeMap = function euiButtonSizeMap(euiThemeContext) {
 /**
  * internal styles util for applying button background color on hover
  */
-var _interactionStyles = function _interactionStyles(euiThemeContext, buttonColors) {
+export var euiButtonInteractionStyles = function euiButtonInteractionStyles(euiThemeContext, buttonColors) {
   var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'fill';
   var baseStyles = function baseStyles() {
     // button hover is applied as pseudo element with a transparent background-color

package/es/global_styling/mixins/_container_query.js

@@ -41,7 +41,7 @@ export var euiContainer = function euiContainer(type, name, scrollState) {
     }
     finalType += 'scroll-state';
   }
-  return [!!name && "container-name: ".concat(name), !!finalType && "container-type: ".concat(finalType)].filter(Boolean).join(';');
+  return [!!name && "container-name: ".concat(name, ";"), !!finalType && "container-type: ".concat(finalType, ";")].filter(Boolean).join('');
 };
 
 /**