npm - @elastic/eui - Versions diffs - 62.0.3 → 63.0.0 - Mend

@elastic/eui 62.0.3 → 63.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (500) hide show

package/test-env/components/collapsible_nav/collapsible_nav.js CHANGED Viewed

@@ -263,7 +263,7 @@ EuiCollapsibleNav.propTypes = {
   /**
      * Named breakpoint or pixel value for customizing the minimum window width to enable docking
      */
-  pushMinBreakpoint: _propTypes.default.oneOfType([_propTypes.default.oneOf(["xs", "s", "m", "l", "xl"]).isRequired, _propTypes.default.number.isRequired]),
+  pushMinBreakpoint: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.number.isRequired]),
   style: _propTypes.default.any,
   /**
@@ -287,7 +287,7 @@ EuiCollapsibleNav.propTypes = {
      * Keeps navigation flyout visible and push `<body>` content via padding
      */
   isDocked: _propTypes.default.bool,
-  dockedBreakpoint: _propTypes.default.oneOfType([_propTypes.default.oneOf(["xs", "s", "m", "l", "xl"]).isRequired, _propTypes.default.number.isRequired]),
+  dockedBreakpoint: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.number.isRequired]),
   /**
      * Button for controlling visible state of the nav

package/test-env/components/control_bar/control_bar.js CHANGED Viewed

@@ -371,6 +371,7 @@ EuiControlBar.propTypes = {
       "aria-label": _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,
       href: _propTypes.default.string,
+      rel: _propTypes.default.string,
       onClick: _propTypes.default.func,
       /**
@@ -393,6 +394,18 @@ EuiControlBar.propTypes = {
            */
       "aria-current": _propTypes.default.any
     }).isRequired),
+    /**
+       * Determines breadcrumbs appearance, with `page` being the default styling.
+       * Application breadcrumbs should only be once per page, in (e.g.) EuiHeader
+       */
+    type: _propTypes.default.oneOf(["page", "application"]),
+    /**
+       * Whether the last breadcrumb should visually (and accessibly, to screen readers)
+       * be highlighted as the current page. Defaults to true.
+       */
+    lastBreadcrumbIsCurrentPage: _propTypes.default.bool,
     text: _propTypes.default.node,
     iconType: _propTypes.default.string
   }).isRequired).isRequired,

package/test-env/components/datagrid/body/data_grid_body.js CHANGED Viewed

@@ -361,6 +361,8 @@ var EuiDataGridBody = function EuiDataGridBody(props) {
   var rowHeightUtils = (0, _row_heights.useRowHeightUtils)({
     gridRef: gridRef,
+    outerGridElementRef: outerGridRef,
+    gridItemsRenderedRef: gridItemsRendered,
     gridStyles: gridStyles,
     columns: columns,
     rowHeightsOptions: rowHeightsOptions
@@ -947,7 +949,7 @@ EuiDataGridBody.propTypes = {
     /**
        * The color associated with this data type; it's used to color the icon token
        */
-    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.oneOf(["euiColorVis0", "euiColorVis1", "euiColorVis2", "euiColorVis3", "euiColorVis4", "euiColorVis5", "euiColorVis6", "euiColorVis7", "euiColorVis8", "euiColorVis9", "gray"]).isRequired, _propTypes.default.string.isRequired]).isRequired, _propTypes.default.string.isRequired]),
+    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]).isRequired, _propTypes.default.string.isRequired]),
     /**
        * Text for how to represent an ascending sort of this data type, e.g. 'A -> Z'
@@ -1045,7 +1047,15 @@ EuiDataGridBody.propTypes = {
        * Optional callback returning the current `rowHeightsOptions` when changes occur from user input (e.g. toolbar display controls).
        * Can be used for, e.g. storing user `rowHeightsOptions` in a local storage object.
        */
-    onChange: _propTypes.default.func
+    onChange: _propTypes.default.func,
+    /**
+       * Optional indicator of the row that should be used as an anchor for vertical layout shift compensation.
+       * When set to 'start' or 'center', the topmost or middle visible row will try
+       * to compensate for changes in their top offsets by adjusting the grid's scroll
+       * position.
+       */
+    scrollAnchorRow: _propTypes.default.oneOf(["start", "center", undefined])
   }),
   isFullScreen: _propTypes.default.bool.isRequired,
   gridStyles: _propTypes.default.shape({

package/test-env/components/datagrid/body/data_grid_cell.js CHANGED Viewed

@@ -558,7 +558,15 @@ EuiDataGridCellContent.propTypes = {
        * Optional callback returning the current `rowHeightsOptions` when changes occur from user input (e.g. toolbar display controls).
        * Can be used for, e.g. storing user `rowHeightsOptions` in a local storage object.
        */
-    onChange: _propTypes.default.func
+    onChange: _propTypes.default.func,
+    /**
+       * Optional indicator of the row that should be used as an anchor for vertical layout shift compensation.
+       * When set to 'start' or 'center', the topmost or middle visible row will try
+       * to compensate for changes in their top offsets by adjusting the grid's scroll
+       * position.
+       */
+    scrollAnchorRow: _propTypes.default.oneOf(["start", "center", undefined])
   }),
   rowHeightUtils: _propTypes.default.any,
   pagination: _propTypes.default.shape({
@@ -904,7 +912,7 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$props$rowHeight, _prevProps$rowHeights;
+      var _this$props$rowHeight, _prevProps$rowHeights, _this$props$rowHeight2, _this$props$style, _prevProps$style;
       this.recalculateAutoHeight();
@@ -912,6 +920,18 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         this.recalculateLineHeight();
       }
+      if ((_this$props$rowHeight2 = this.props.rowHeightsOptions) !== null && _this$props$rowHeight2 !== void 0 && _this$props$rowHeight2.scrollAnchorRow && this.props.colIndex === 0 && // once per row
+      this.props.columnId === prevProps.columnId && // if this is still the same column
+      this.props.rowIndex === prevProps.rowIndex && // if this is still the same row
+      ((_this$props$style = this.props.style) === null || _this$props$style === void 0 ? void 0 : _this$props$style.top) !== ((_prevProps$style = prevProps.style) === null || _prevProps$style === void 0 ? void 0 : _prevProps$style.top) // if the top position has changed
+      ) {
+        var _prevProps$style2, _this$props$style2, _this$props$rowHeight3, _this$props$rowHeight4;
+        var previousTop = parseFloat((_prevProps$style2 = prevProps.style) === null || _prevProps$style2 === void 0 ? void 0 : _prevProps$style2.top);
+        var currentTop = parseFloat((_this$props$style2 = this.props.style) === null || _this$props$style2 === void 0 ? void 0 : _this$props$style2.top);
+        (_this$props$rowHeight3 = this.props.rowHeightUtils) === null || _this$props$rowHeight3 === void 0 ? void 0 : _this$props$rowHeight3.compensateForLayoutShift(this.props.rowIndex, currentTop - previousTop, (_this$props$rowHeight4 = this.props.rowHeightsOptions) === null || _this$props$rowHeight4 === void 0 ? void 0 : _this$props$rowHeight4.scrollAnchorRow);
+      }
       if (this.props.popoverContext.popoverIsOpen !== prevProps.popoverContext.popoverIsOpen || this.props.popoverContext.cellLocation !== prevProps.popoverContext.cellLocation || this.props.renderCellPopover !== prevProps.renderCellPopover) {
         this.handleCellPopover();
       }
@@ -1555,7 +1575,15 @@ EuiDataGridCell.propTypes = {
        * Optional callback returning the current `rowHeightsOptions` when changes occur from user input (e.g. toolbar display controls).
        * Can be used for, e.g. storing user `rowHeightsOptions` in a local storage object.
        */
-    onChange: _propTypes.default.func
+    onChange: _propTypes.default.func,
+    /**
+       * Optional indicator of the row that should be used as an anchor for vertical layout shift compensation.
+       * When set to 'start' or 'center', the topmost or middle visible row will try
+       * to compensate for changes in their top offsets by adjusting the grid's scroll
+       * position.
+       */
+    scrollAnchorRow: _propTypes.default.oneOf(["start", "center", undefined])
   }),
   rowHeightUtils: _propTypes.default.any,
   rowManager: _propTypes.default.shape({

package/test-env/components/datagrid/body/header/data_grid_header_row.js CHANGED Viewed

@@ -571,7 +571,7 @@ EuiDataGridHeaderRow.propTypes = {
     /**
        * The color associated with this data type; it's used to color the icon token
        */
-    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.oneOf(["euiColorVis0", "euiColorVis1", "euiColorVis2", "euiColorVis3", "euiColorVis4", "euiColorVis5", "euiColorVis6", "euiColorVis7", "euiColorVis8", "euiColorVis9", "gray"]).isRequired, _propTypes.default.string.isRequired]).isRequired, _propTypes.default.string.isRequired]),
+    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]).isRequired, _propTypes.default.string.isRequired]),
     /**
        * Text for how to represent an ascending sort of this data type, e.g. 'A -> Z'

package/test-env/components/datagrid/controls/column_sorting_draggable.js CHANGED Viewed

@@ -210,7 +210,7 @@ EuiDataGridColumnSortingDraggable.propTypes = {
     /**
        * The color associated with this data type; it's used to color the icon token
        */
-    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.oneOf(["euiColorVis0", "euiColorVis1", "euiColorVis2", "euiColorVis3", "euiColorVis4", "euiColorVis5", "euiColorVis6", "euiColorVis7", "euiColorVis8", "euiColorVis9", "gray"]).isRequired, _propTypes.default.string.isRequired]).isRequired, _propTypes.default.string.isRequired]),
+    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]).isRequired, _propTypes.default.string.isRequired]),
     /**
        * Text for how to represent an ascending sort of this data type, e.g. 'A -> Z'

package/test-env/components/datagrid/data_grid.js CHANGED Viewed

@@ -932,7 +932,7 @@ EuiDataGrid.propTypes = {
     /**
        * The color associated with this data type; it's used to color the icon token
        */
-    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.oneOf(["euiColorVis0", "euiColorVis1", "euiColorVis2", "euiColorVis3", "euiColorVis4", "euiColorVis5", "euiColorVis6", "euiColorVis7", "euiColorVis8", "euiColorVis9", "gray"]).isRequired, _propTypes.default.string.isRequired]).isRequired, _propTypes.default.string.isRequired]),
+    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]).isRequired, _propTypes.default.string.isRequired]),
     /**
        * Text for how to represent an ascending sort of this data type, e.g. 'A -> Z'
@@ -1263,7 +1263,15 @@ EuiDataGrid.propTypes = {
        * Optional callback returning the current `rowHeightsOptions` when changes occur from user input (e.g. toolbar display controls).
        * Can be used for, e.g. storing user `rowHeightsOptions` in a local storage object.
        */
-    onChange: _propTypes.default.func
+    onChange: _propTypes.default.func,
+    /**
+       * Optional indicator of the row that should be used as an anchor for vertical layout shift compensation.
+       * When set to 'start' or 'center', the topmost or middle visible row will try
+       * to compensate for changes in their top offsets by adjusting the grid's scroll
+       * position.
+       */
+    scrollAnchorRow: _propTypes.default.oneOf(["start", "center", undefined])
   })
 };
 EuiDataGrid.displayName = 'EuiDataGrid';

package/test-env/components/datagrid/utils/row_heights.js CHANGED Viewed

@@ -19,10 +19,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = require("react");
-var _predicate = require("../../../services/predicate");
 var _services = require("../../../services");
+var _predicate = require("../../../services/predicate");
 var _sorting = require("./sorting");
 /*
@@ -45,11 +45,13 @@ var DEFAULT_ROW_HEIGHT = 34;
 exports.DEFAULT_ROW_HEIGHT = DEFAULT_ROW_HEIGHT;
 var RowHeightUtils = /*#__PURE__*/function () {
-  function RowHeightUtils(gridRef, rerenderGridBodyRef) {
+  function RowHeightUtils(gridRef, outerGridElementRef, gridItemsRenderedRef, rerenderGridBodyRef) {
     var _this = this;
     (0, _classCallCheck2.default)(this, RowHeightUtils);
     this.gridRef = gridRef;
+    this.outerGridElementRef = outerGridElementRef;
+    this.gridItemsRenderedRef = gridItemsRenderedRef;
     this.rerenderGridBodyRef = rerenderGridBodyRef;
     (0, _defineProperty2.default)(this, "styles", {
       paddingTop: 0,
@@ -240,6 +242,31 @@ var RowHeightUtils = /*#__PURE__*/function () {
       (_this$gridRef$current = this.gridRef.current) === null || _this$gridRef$current === void 0 ? void 0 : _this$gridRef$current.resetAfterRowIndex(this.lastUpdatedRow);
       this.lastUpdatedRow = Infinity;
     }
+  }, {
+    key: "compensateForLayoutShift",
+    value: function compensateForLayoutShift(rowIndex, verticalLayoutShift, anchorRow) {
+      var grid = this.gridRef.current;
+      var outerGridElement = this.outerGridElementRef.current;
+      var renderedItems = this.gridItemsRenderedRef.current;
+      if (grid == null || outerGridElement == null || renderedItems == null || anchorRow == null || !Number.isFinite(verticalLayoutShift)) {
+        return;
+      } // skip if the start row is the anchor row but it hasn't shifted
+      if (anchorRow === 'start' && renderedItems.visibleRowStartIndex !== rowIndex) {
+        return;
+      } // skip if the center row is the anchor row but it hasn't shifted
+      if (anchorRow === 'center' && Math.floor((renderedItems.visibleRowStopIndex - renderedItems.visibleRowStartIndex) / 2) !== rowIndex) {
+        return;
+      }
+      grid.scrollTo({
+        scrollTop: outerGridElement.scrollTop + verticalLayoutShift
+      });
+    }
   }]);
   return RowHeightUtils;
 }();
@@ -253,13 +280,15 @@ exports.RowHeightUtils = RowHeightUtils;
 var useRowHeightUtils = function useRowHeightUtils(_ref2) {
   var gridRef = _ref2.gridRef,
+      outerGridElementRef = _ref2.outerGridElementRef,
+      gridItemsRenderedRef = _ref2.gridItemsRenderedRef,
       gridStyles = _ref2.gridStyles,
       columns = _ref2.columns,
       rowHeightsOptions = _ref2.rowHeightsOptions;
   var forceRenderRef = (0, _services.useLatest)((0, _services.useForceRender)());
   var _useState = (0, _react.useState)(function () {
-    return new RowHeightUtils(gridRef, forceRenderRef);
+    return new RowHeightUtils(gridRef, outerGridElementRef, gridItemsRenderedRef, forceRenderRef);
   }),
       _useState2 = (0, _slicedToArray2.default)(_useState, 1),
       rowHeightUtils = _useState2[0]; // Forces a rerender whenever the row heights change, as this can cause the

package/test-env/components/date_picker/super_date_picker/super_date_picker.js CHANGED Viewed

@@ -669,7 +669,7 @@ EuiSuperDatePickerInternal.propTypes = {
        * Forces state to be `iconOnly` when within provided breakpoints.
        * Remove completely with `false` or provide your own list of breakpoints.
        */
-    responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.oneOf(["xs", "s", "m", "l", "xl"]).isRequired).isRequired])
+    responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired])
   }),
   timeOptions: _propTypes.default.shape({
     timeTenseOptions: _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired,
@@ -808,6 +808,6 @@ EuiSuperDatePicker.propTypes = {
       onMouseOut: _propTypes.default.func
     }),
     iconOnly: _propTypes.default.bool,
-    responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.oneOf(["xs", "s", "m", "l", "xl"]).isRequired).isRequired])
+    responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired])
   })
 };

package/test-env/components/date_picker/super_date_picker/super_update_button.js CHANGED Viewed

@@ -285,5 +285,5 @@ EuiSuperUpdateButton.propTypes = {
      * Forces state to be `iconOnly` when within provided breakpoints.
      * Remove completely with `false` or provide your own list of breakpoints.
      */
-  responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.oneOf(["xs", "s", "m", "l", "xl"]).isRequired).isRequired])
+  responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired])
 };

package/test-env/components/description_list/description_list.js CHANGED Viewed

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TYPES = exports.TEXT_STYLES = exports.EuiDescriptionList = exports.ALIGNMENTS = void 0;
+exports.EuiDescriptionList = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -21,31 +21,15 @@ var _description_list_title = require("./description_list_title");
 var _description_list_description = require("./description_list_description");
-var _common = require("../common");
+var _services = require("../../services");
+var _description_list = require("./description_list.styles");
+var _description_list_context = require("./description_list_context");
 var _react2 = require("@emotion/react");
 var _excluded = ["align", "children", "className", "compressed", "descriptionProps", "listItems", "textStyle", "titleProps", "type"];
-var typesToClassNameMap = {
-  row: 'euiDescriptionList--row',
-  inline: 'euiDescriptionList--inline',
-  column: 'euiDescriptionList--column',
-  responsiveColumn: 'euiDescriptionList--responsiveColumn'
-};
-var TYPES = (0, _common.keysOf)(typesToClassNameMap);
-exports.TYPES = TYPES;
-var alignmentsToClassNameMap = {
-  center: 'euiDescriptionList--center',
-  left: ''
-};
-var ALIGNMENTS = (0, _common.keysOf)(alignmentsToClassNameMap);
-exports.ALIGNMENTS = ALIGNMENTS;
-var textStylesToClassNameMap = {
-  normal: '',
-  reverse: 'euiDescriptionList--reverse'
-};
-var TEXT_STYLES = (0, _common.keysOf)(textStylesToClassNameMap);
-exports.TEXT_STYLES = TEXT_STYLES;
 var EuiDescriptionList = function EuiDescriptionList(_ref) {
   var _ref$align = _ref.align,
@@ -62,9 +46,10 @@ var EuiDescriptionList = function EuiDescriptionList(_ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'row' : _ref$type,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiDescriptionList', type ? typesToClassNameMap[type] : undefined, align ? alignmentsToClassNameMap[align] : undefined, textStyle ? textStylesToClassNameMap[textStyle] : undefined, {
-    'euiDescriptionList--compressed': compressed
-  }, className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _description_list.euiDescriptionListStyles)(euiTheme);
+  var cssStyles = [styles.euiDescriptionList, styles[type], styles[align]];
+  var classes = (0, _classnames.default)('euiDescriptionList', className);
   var childrenOrListItems = null;
   if (listItems) {
@@ -79,9 +64,19 @@ var EuiDescriptionList = function EuiDescriptionList(_ref) {
     childrenOrListItems = children;
   }
-  return (0, _react2.jsx)("dl", (0, _extends2.default)({
-    className: classes
-  }, rest), childrenOrListItems);
+  return (0, _react2.jsx)(_description_list_context.EuiDescriptionListContext.Provider, {
+    value: {
+      type: type,
+      compressed: compressed,
+      textStyle: textStyle,
+      align: align
+    }
+  }, (0, _react2.jsx)("dl", (0, _extends2.default)({
+    className: classes,
+    css: cssStyles
+  }, rest, {
+    "data-type": type
+  }), childrenOrListItems));
 };
 exports.EuiDescriptionList = EuiDescriptionList;
@@ -97,7 +92,7 @@ EuiDescriptionList.propTypes = {
   /**
      * Text alignment
      */
-  align: _propTypes.default.oneOf(["center", "left"]),
+  align: _propTypes.default.any,
   /**
      * Smaller text and condensed spacing
@@ -113,7 +108,7 @@ EuiDescriptionList.propTypes = {
   /**
      * How each item should be laid out
      */
-  type: _propTypes.default.oneOf(["row", "inline", "column", "responsiveColumn"]),
+  type: _propTypes.default.any,
   /**
      * Props object to be passed to `EuiDescriptionListTitle`

package/test-env/components/description_list/description_list.styles.js ADDED Viewed

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDescriptionListStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+/*
+ * 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 euiDescriptionListStyles = function euiDescriptionListStyles(euiThemeContext) {
+  // Flex display for column and responsive column
+  var columnDisplay = "\n    display: flex;\n    align-items: baseline;\n    flex-wrap: wrap;  \n  ";
+  return {
+    euiDescriptionList: /*#__PURE__*/(0, _react.css)(";label:euiDescriptionList;"),
+    // Types
+    row: /*#__PURE__*/(0, _react.css)(";label:row;"),
+    inline: /*#__PURE__*/(0, _react.css)(";label:inline;"),
+    column: /*#__PURE__*/(0, _react.css)(columnDisplay, ";;label:column;"),
+    // Responsive columns behave as a row on breakpoints xs-s
+    responsiveColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{", columnDisplay, ";};label:responsiveColumn;"),
+    // Alignment
+    center: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('center'), ";;label:center;"),
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;")
+  };
+};
+exports.euiDescriptionListStyles = euiDescriptionListStyles;

package/test-env/components/description_list/description_list_context.js ADDED Viewed

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.contextDefaults = exports.EuiDescriptionListContext = void 0;
+var _react = require("react");
+/*
+ * 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 contextDefaults = {
+  type: 'row',
+  textStyle: 'normal',
+  align: 'left'
+};
+exports.contextDefaults = contextDefaults;
+var EuiDescriptionListContext = /*#__PURE__*/(0, _react.createContext)(contextDefaults);
+exports.EuiDescriptionListContext = EuiDescriptionListContext;

package/test-env/components/description_list/description_list_description.js CHANGED Viewed

@@ -2,6 +2,8 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,25 +11,64 @@ exports.EuiDescriptionListDescription = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
+var _description_list_description = require("./description_list_description.styles");
+var _description_list_context = require("./description_list_context");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className"];
+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 EuiDescriptionListDescription = function EuiDescriptionListDescription(_ref) {
   var children = _ref.children,
       className = _ref.className,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useContext = (0, _react.useContext)(_description_list_context.EuiDescriptionListContext),
+      type = _useContext.type,
+      textStyle = _useContext.textStyle,
+      compressed = _useContext.compressed,
+      align = _useContext.align;
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _description_list_description.euiDescriptionListDescriptionStyles)(theme);
+  var conditionalStyles = compressed && textStyle === 'reverse' ? [styles.fontStyles.compressed] : [styles.fontStyles[textStyle]];
+  switch (type) {
+    case 'inline':
+      conditionalStyles = compressed ? [styles.inlineStyles.compressed] : [styles.inlineStyles.normal];
+      break;
+    case 'responsiveColumn':
+    case 'column':
+      if (align === 'center') {
+        conditionalStyles.push(styles.left);
+      }
+      break;
+  }
+  var cssStyles = [styles.euiDescriptionList__description, styles[type]].concat((0, _toConsumableArray2.default)(conditionalStyles));
   var classes = (0, _classnames.default)('euiDescriptionList__description', className);
   return (0, _react2.jsx)("dd", (0, _extends2.default)({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), children);
 };

package/test-env/components/description_list/description_list_description.styles.js ADDED Viewed

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDescriptionListDescriptionStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+var _title = require("../title/title.styles");
+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 _ref = process.env.NODE_ENV === "production" ? {
+  name: "1yn9gig-inline",
+  styles: "display:inline;label:inline;"
+} : {
+  name: "1yn9gig-inline",
+  styles: "display:inline;label:inline;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiDescriptionListDescriptionStyles = function euiDescriptionListDescriptionStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var columnDisplay = "\n    ".concat((0, _global_styling.logicalCSS)('width', '50%'), " // Flex-basis doesn't work in IE with padding\n    ").concat((0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), "\n    &:not(:first-of-type) {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), "\n    }\n  ");
+  return {
+    euiDescriptionList__description: /*#__PURE__*/(0, _react.css)(";label:euiDescriptionList__description;"),
+    // Types
+    row: /*#__PURE__*/(0, _react.css)(";label:row;"),
+    column: /*#__PURE__*/(0, _react.css)(columnDisplay, ";;label:column;"),
+    responsiveColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{", (0, _global_styling.logicalCSS)('width', '100%'), " padding:0;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{", columnDisplay, ";};label:responsiveColumn;"),
+    inline: _ref,
+    // This nested block handles just the font styling based on compressed and reverse
+    fontStyles: {
+      normal: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:normal;"),
+      reverse: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), ";;label:reverse;"),
+      compressed: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), ";;label:compressed;")
+    },
+    // Nested inline styles for type and font
+    inlineStyles: {
+      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";;label:compressed;"),
+      normal: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:normal;")
+    },
+    // Column types should align description text to the left when EuiDecriptionList is centered
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;")
+  };
+};
+exports.euiDescriptionListDescriptionStyles = euiDescriptionListDescriptionStyles;