@elastic/eui 88.5.4 → 89.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 (206) hide show
  1. package/dist/eui_theme_dark.css +26 -526
  2. package/dist/eui_theme_dark.min.css +1 -1
  3. package/dist/eui_theme_light.css +26 -526
  4. package/dist/eui_theme_light.min.css +1 -1
  5. package/es/components/basic_table/basic_table.js +7 -2
  6. package/es/components/basic_table/in_memory_table.js +7 -2
  7. package/es/components/collapsible_nav/collapsible_nav.js +5 -0
  8. package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -2
  9. package/es/components/color_picker/index.js +0 -4
  10. package/es/components/combo_box/combo_box.js +142 -304
  11. package/es/components/combo_box/combo_box_input/combo_box_input.js +0 -13
  12. package/es/components/combo_box/combo_box_options_list/combo_box_options_list.js +34 -118
  13. package/es/components/context_menu/context_menu_panel.js +6 -6
  14. package/es/components/flex/flex_grid.styles.js +1 -1
  15. package/es/components/flex/flex_group.styles.js +1 -1
  16. package/es/components/flyout/flyout.js +32 -33
  17. package/es/components/flyout/flyout.styles.js +13 -3
  18. package/es/components/form/range/dual_range.js +4 -0
  19. package/es/components/form/range/range.js +4 -0
  20. package/es/components/index.js +0 -1
  21. package/es/components/popover/input_popover.js +47 -3
  22. package/es/components/popover/popover.js +2 -2
  23. package/es/components/table/table_row_cell.js +27 -9
  24. package/es/components/text_truncate/index.js +1 -0
  25. package/es/components/text_truncate/text_block_truncate.js +78 -0
  26. package/es/global_styling/reset/global_styles.js +16 -2
  27. package/es/services/accessibility/index.js +0 -3
  28. package/es/services/index.js +1 -1
  29. package/es/test/rtl/component_helpers.d.ts +2 -0
  30. package/es/test/rtl/component_helpers.js +29 -1
  31. package/eui.d.ts +375 -667
  32. package/i18ntokens.json +52 -286
  33. package/lib/components/basic_table/basic_table.js +7 -2
  34. package/lib/components/basic_table/in_memory_table.js +7 -2
  35. package/lib/components/collapsible_nav/collapsible_nav.js +5 -0
  36. package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -2
  37. package/lib/components/color_picker/index.js +0 -7
  38. package/lib/components/combo_box/combo_box.js +141 -303
  39. package/lib/components/combo_box/combo_box_input/combo_box_input.js +0 -13
  40. package/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js +34 -118
  41. package/lib/components/context_menu/context_menu_panel.js +5 -5
  42. package/lib/components/flex/flex_grid.styles.js +1 -1
  43. package/lib/components/flex/flex_group.styles.js +1 -1
  44. package/lib/components/flyout/flyout.js +31 -32
  45. package/lib/components/flyout/flyout.styles.js +19 -10
  46. package/lib/components/form/range/dual_range.js +4 -0
  47. package/lib/components/index.js +0 -11
  48. package/lib/components/popover/input_popover.js +48 -3
  49. package/lib/components/popover/popover.js +1 -1
  50. package/lib/components/table/table_row_cell.js +26 -8
  51. package/lib/components/text_truncate/index.js +7 -0
  52. package/lib/components/text_truncate/text_block_truncate.js +85 -0
  53. package/lib/global_styling/reset/global_styles.js +16 -2
  54. package/lib/services/accessibility/index.js +0 -21
  55. package/lib/services/index.js +0 -21
  56. package/lib/test/rtl/component_helpers.d.ts +2 -0
  57. package/lib/test/rtl/component_helpers.js +31 -2
  58. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -2
  59. package/optimize/es/components/color_picker/index.js +0 -4
  60. package/optimize/es/components/combo_box/combo_box.js +137 -304
  61. package/optimize/es/components/combo_box/combo_box_input/combo_box_input.js +0 -12
  62. package/optimize/es/components/combo_box/combo_box_options_list/combo_box_options_list.js +28 -107
  63. package/optimize/es/components/context_menu/context_menu_panel.js +6 -6
  64. package/optimize/es/components/flex/flex_grid.styles.js +1 -1
  65. package/optimize/es/components/flex/flex_group.styles.js +1 -1
  66. package/optimize/es/components/flyout/flyout.js +32 -33
  67. package/optimize/es/components/flyout/flyout.styles.js +13 -3
  68. package/optimize/es/components/index.js +0 -1
  69. package/optimize/es/components/popover/input_popover.js +43 -3
  70. package/optimize/es/components/popover/popover.js +2 -2
  71. package/optimize/es/components/table/table_row_cell.js +13 -5
  72. package/optimize/es/components/text_truncate/index.js +1 -0
  73. package/optimize/es/components/text_truncate/text_block_truncate.js +58 -0
  74. package/optimize/es/global_styling/reset/global_styles.js +13 -2
  75. package/optimize/es/services/accessibility/index.js +0 -3
  76. package/optimize/es/services/index.js +1 -1
  77. package/optimize/es/test/rtl/component_helpers.d.ts +2 -0
  78. package/optimize/es/test/rtl/component_helpers.js +29 -1
  79. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -2
  80. package/optimize/lib/components/color_picker/index.js +0 -7
  81. package/optimize/lib/components/combo_box/combo_box.js +136 -303
  82. package/optimize/lib/components/combo_box/combo_box_input/combo_box_input.js +0 -12
  83. package/optimize/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js +28 -107
  84. package/optimize/lib/components/context_menu/context_menu_panel.js +5 -5
  85. package/optimize/lib/components/flex/flex_grid.styles.js +1 -1
  86. package/optimize/lib/components/flex/flex_group.styles.js +1 -1
  87. package/optimize/lib/components/flyout/flyout.js +31 -32
  88. package/optimize/lib/components/flyout/flyout.styles.js +19 -10
  89. package/optimize/lib/components/index.js +0 -11
  90. package/optimize/lib/components/popover/input_popover.js +44 -3
  91. package/optimize/lib/components/popover/popover.js +1 -1
  92. package/optimize/lib/components/table/table_row_cell.js +12 -4
  93. package/optimize/lib/components/text_truncate/index.js +7 -0
  94. package/optimize/lib/components/text_truncate/text_block_truncate.js +66 -0
  95. package/optimize/lib/global_styling/reset/global_styles.js +19 -10
  96. package/optimize/lib/services/accessibility/index.js +0 -21
  97. package/optimize/lib/services/index.js +0 -21
  98. package/optimize/lib/test/rtl/component_helpers.d.ts +2 -0
  99. package/optimize/lib/test/rtl/component_helpers.js +31 -2
  100. package/package.json +1 -1
  101. package/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss +5 -15
  102. package/src/components/context_menu/_context_menu_panel.scss +4 -0
  103. package/src/components/index.scss +0 -1
  104. package/src/global_styling/mixins/_index.scss +0 -1
  105. package/src/global_styling/variables/_index.scss +0 -1
  106. package/src/test/README.md +0 -15
  107. package/src/themes/amsterdam/global_styling/mixins/_index.scss +0 -1
  108. package/test-env/components/basic_table/basic_table.js +7 -2
  109. package/test-env/components/basic_table/in_memory_table.js +7 -2
  110. package/test-env/components/collapsible_nav/collapsible_nav.js +5 -0
  111. package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -2
  112. package/test-env/components/color_picker/index.js +0 -7
  113. package/test-env/components/combo_box/combo_box.js +141 -303
  114. package/test-env/components/combo_box/combo_box_input/combo_box_input.js +0 -13
  115. package/test-env/components/combo_box/combo_box_options_list/combo_box_options_list.js +33 -117
  116. package/test-env/components/context_menu/context_menu_panel.js +5 -5
  117. package/test-env/components/flex/flex_grid.styles.js +1 -1
  118. package/test-env/components/flex/flex_group.styles.js +1 -1
  119. package/test-env/components/flyout/flyout.styles.js +19 -10
  120. package/test-env/components/form/range/dual_range.js +4 -0
  121. package/test-env/components/index.js +0 -11
  122. package/test-env/components/popover/input_popover.js +48 -3
  123. package/test-env/components/popover/popover.js +1 -1
  124. package/test-env/components/table/table_row_cell.js +26 -8
  125. package/test-env/components/text_truncate/index.js +7 -0
  126. package/test-env/components/text_truncate/text_block_truncate.js +82 -0
  127. package/test-env/global_styling/reset/global_styles.js +19 -10
  128. package/test-env/services/accessibility/index.js +0 -21
  129. package/test-env/services/index.js +0 -21
  130. package/test-env/test/rtl/component_helpers.js +31 -2
  131. package/es/components/color_picker/color_stops/color_stop_thumb.js +0 -371
  132. package/es/components/color_picker/color_stops/color_stop_thumb.styles.js +0 -55
  133. package/es/components/color_picker/color_stops/color_stops.js +0 -499
  134. package/es/components/color_picker/color_stops/color_stops.styles.js +0 -61
  135. package/es/components/color_picker/color_stops/index.js +0 -9
  136. package/es/components/color_picker/color_stops/utils.js +0 -95
  137. package/es/components/suggest/index.js +0 -10
  138. package/es/components/suggest/suggest.a11y.js +0 -70
  139. package/es/components/suggest/suggest.js +0 -347
  140. package/es/components/suggest/suggest_item.js +0 -123
  141. package/es/components/suggest/types.js +0 -9
  142. package/es/services/accessibility/accessible_click_keys.js +0 -17
  143. package/es/services/accessibility/cascading_menu_keys.js +0 -28
  144. package/es/services/accessibility/combo_box_keys.js +0 -25
  145. package/lib/components/color_picker/color_stops/color_stop_thumb.js +0 -380
  146. package/lib/components/color_picker/color_stops/color_stop_thumb.styles.js +0 -62
  147. package/lib/components/color_picker/color_stops/color_stops.js +0 -505
  148. package/lib/components/color_picker/color_stops/color_stops.styles.js +0 -67
  149. package/lib/components/color_picker/color_stops/index.js +0 -12
  150. package/lib/components/color_picker/color_stops/utils.js +0 -108
  151. package/lib/components/suggest/index.js +0 -19
  152. package/lib/components/suggest/suggest.a11y.js +0 -73
  153. package/lib/components/suggest/suggest.js +0 -356
  154. package/lib/components/suggest/suggest_item.js +0 -130
  155. package/lib/components/suggest/types.js +0 -16
  156. package/lib/services/accessibility/accessible_click_keys.js +0 -21
  157. package/lib/services/accessibility/cascading_menu_keys.js +0 -35
  158. package/lib/services/accessibility/combo_box_keys.js +0 -32
  159. package/optimize/es/components/color_picker/color_stops/color_stop_thumb.js +0 -329
  160. package/optimize/es/components/color_picker/color_stops/color_stop_thumb.styles.js +0 -55
  161. package/optimize/es/components/color_picker/color_stops/color_stops.js +0 -444
  162. package/optimize/es/components/color_picker/color_stops/color_stops.styles.js +0 -61
  163. package/optimize/es/components/color_picker/color_stops/index.js +0 -9
  164. package/optimize/es/components/color_picker/color_stops/utils.js +0 -90
  165. package/optimize/es/components/suggest/index.js +0 -10
  166. package/optimize/es/components/suggest/suggest.a11y.js +0 -70
  167. package/optimize/es/components/suggest/suggest.js +0 -256
  168. package/optimize/es/components/suggest/suggest_item.js +0 -89
  169. package/optimize/es/components/suggest/types.js +0 -9
  170. package/optimize/es/services/accessibility/accessible_click_keys.js +0 -14
  171. package/optimize/es/services/accessibility/cascading_menu_keys.js +0 -28
  172. package/optimize/es/services/accessibility/combo_box_keys.js +0 -25
  173. package/optimize/lib/components/color_picker/color_stops/color_stop_thumb.js +0 -339
  174. package/optimize/lib/components/color_picker/color_stops/color_stop_thumb.styles.js +0 -62
  175. package/optimize/lib/components/color_picker/color_stops/color_stops.js +0 -451
  176. package/optimize/lib/components/color_picker/color_stops/color_stops.styles.js +0 -67
  177. package/optimize/lib/components/color_picker/color_stops/index.js +0 -12
  178. package/optimize/lib/components/color_picker/color_stops/utils.js +0 -106
  179. package/optimize/lib/components/suggest/index.js +0 -19
  180. package/optimize/lib/components/suggest/suggest.a11y.js +0 -73
  181. package/optimize/lib/components/suggest/suggest.js +0 -266
  182. package/optimize/lib/components/suggest/suggest_item.js +0 -96
  183. package/optimize/lib/components/suggest/types.js +0 -16
  184. package/optimize/lib/services/accessibility/accessible_click_keys.js +0 -20
  185. package/optimize/lib/services/accessibility/cascading_menu_keys.js +0 -35
  186. package/optimize/lib/services/accessibility/combo_box_keys.js +0 -32
  187. package/src/components/suggest/_index.scss +0 -5
  188. package/src/components/suggest/_suggest_input.scss +0 -4
  189. package/src/components/suggest/_suggest_item.scss +0 -103
  190. package/src/components/suggest/_variables.scss +0 -13
  191. package/src/global_styling/mixins/_header.scss +0 -29
  192. package/src/global_styling/variables/_header.scss +0 -3
  193. package/test-env/components/color_picker/color_stops/color_stop_thumb.js +0 -372
  194. package/test-env/components/color_picker/color_stops/color_stop_thumb.styles.js +0 -62
  195. package/test-env/components/color_picker/color_stops/color_stops.js +0 -494
  196. package/test-env/components/color_picker/color_stops/color_stops.styles.js +0 -67
  197. package/test-env/components/color_picker/color_stops/index.js +0 -12
  198. package/test-env/components/color_picker/color_stops/utils.js +0 -106
  199. package/test-env/components/suggest/index.js +0 -19
  200. package/test-env/components/suggest/suggest.a11y.js +0 -73
  201. package/test-env/components/suggest/suggest.js +0 -348
  202. package/test-env/components/suggest/suggest_item.js +0 -129
  203. package/test-env/components/suggest/types.js +0 -16
  204. package/test-env/services/accessibility/accessible_click_keys.js +0 -20
  205. package/test-env/services/accessibility/cascading_menu_keys.js +0 -35
  206. package/test-env/services/accessibility/combo_box_keys.js +0 -32
@@ -134,7 +134,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
134
134
  }, closingTransitionTime);
135
135
  });
136
136
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (event) {
137
- if (event.key === _services.cascadingMenuKeys.ESCAPE) {
137
+ if (event.key === _services.keys.ESCAPE) {
138
138
  _this.onEscapeKey(event);
139
139
  }
140
140
  });
@@ -12,6 +12,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
12
12
  var _react = _interopRequireWildcard(require("react"));
13
13
  var _classnames = _interopRequireDefault(require("classnames"));
14
14
  var _services = require("../../services");
15
+ var _predicate = require("../../services/predicate");
16
+ var _text_truncate = require("../text_truncate");
15
17
  var _utils = require("./utils");
16
18
  var _react2 = require("@emotion/react");
17
19
  var _excluded = ["align", "children", "className", "truncateText", "setScopeRow", "showOnHover", "textOnly", "hasActions", "isExpander", "style", "width", "valign", "mobileOptions"];
@@ -58,7 +60,7 @@ var EuiTableRowCell = function EuiTableRowCell(_ref) {
58
60
  'euiTableCellContent--alignRight': align === _services.RIGHT_ALIGNMENT,
59
61
  'euiTableCellContent--alignCenter': align === _services.CENTER_ALIGNMENT,
60
62
  'euiTableCellContent--showOnHover': showOnHover,
61
- 'euiTableCellContent--truncateText': truncateText,
63
+ 'euiTableCellContent--truncateText': truncateText === true,
62
64
  // We're doing this rigamarole instead of creating `euiTableCellContent--textOnly` for BWC
63
65
  // purposes for the time-being.
64
66
  'euiTableCellContent--overflowingContent': textOnly !== true
@@ -78,7 +80,7 @@ var EuiTableRowCell = function EuiTableRowCell(_ref) {
78
80
  });
79
81
  var widthValue = (0, _services.useIsWithinBreakpoints)(['xs', 's']) && mobileOptions.width ? mobileOptions.width : width;
80
82
  var styleObj = (0, _utils.resolveWidthAsStyle)(style, widthValue);
81
- function modifyChildren(children) {
83
+ var modifyChildren = (0, _react.useCallback)(function (children) {
82
84
  var modifiedChildren = children;
83
85
  if (textOnly === true) {
84
86
  modifiedChildren = (0, _react2.jsx)("span", {
@@ -91,8 +93,14 @@ var EuiTableRowCell = function EuiTableRowCell(_ref) {
91
93
  });
92
94
  });
93
95
  }
96
+ if ((0, _predicate.isObject)(truncateText) && truncateText.lines) {
97
+ modifiedChildren = (0, _react2.jsx)(_text_truncate.EuiTextBlockTruncate, {
98
+ lines: truncateText.lines,
99
+ cloneElement: true
100
+ }, modifiedChildren);
101
+ }
94
102
  return modifiedChildren;
95
- }
103
+ }, [childClasses, textOnly, truncateText]);
96
104
  var childrenNode = modifyChildren(children);
97
105
  var hideForMobileClasses = 'euiTableRowCell--hideForMobile';
98
106
  var showForMobileClasses = 'euiTableRowCell--hideForDesktop';
@@ -112,7 +120,7 @@ var EuiTableRowCell = function EuiTableRowCell(_ref) {
112
120
  className: cellClasses
113
121
  }, sharedProps), mobileOptions.header && (0, _react2.jsx)("div", {
114
122
  className: "euiTableRowCell__mobileHeader ".concat(showForMobileClasses)
115
- }, mobileOptions.header), mobileOptions.render ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
123
+ }, mobileOptions.header), mobileOptions.render ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
116
124
  className: "".concat(mobileContentClasses, " ").concat(showForMobileClasses)
117
125
  }, modifyChildren(mobileOptions.render)), (0, _react2.jsx)("div", {
118
126
  className: "".concat(contentClasses, " ").concat(hideForMobileClasses)
@@ -3,6 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ Object.defineProperty(exports, "EuiTextBlockTruncate", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _text_block_truncate.EuiTextBlockTruncate;
10
+ }
11
+ });
6
12
  Object.defineProperty(exports, "EuiTextTruncate", {
7
13
  enumerable: true,
8
14
  get: function get() {
@@ -16,4 +22,5 @@ Object.defineProperty(exports, "TruncationUtils", {
16
22
  }
17
23
  });
18
24
  var _text_truncate = require("./text_truncate");
25
+ var _text_block_truncate = require("./text_block_truncate");
19
26
  var _utils = require("./utils");
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.EuiTextBlockTruncate = void 0;
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
+ var _react = _interopRequireWildcard(require("react"));
13
+ var _react2 = require("@emotion/react");
14
+ var _classnames = _interopRequireDefault(require("classnames"));
15
+ var _services = require("../../services");
16
+ var _excluded = ["children", "className", "style", "lines", "cloneElement"];
17
+ 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); }
18
+ 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; }
19
+ 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; }
20
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
21
+ 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)."; } /*
22
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
23
+ * or more contributor license agreements. Licensed under the Elastic License
24
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
25
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
26
+ * Side Public License, v 1.
27
+ */
28
+ var styles = {
29
+ euiTextBlockTruncate: process.env.NODE_ENV === "production" ? {
30
+ name: "1cfm3ge-euiTextBlockTruncate",
31
+ styles: "display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:0;overflow:hidden;label:euiTextBlockTruncate;"
32
+ } : {
33
+ name: "1cfm3ge-euiTextBlockTruncate",
34
+ styles: "display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:0;overflow:hidden;label:euiTextBlockTruncate;",
35
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
36
+ }
37
+ };
38
+ var EuiTextBlockTruncate = function EuiTextBlockTruncate(_ref) {
39
+ var children = _ref.children,
40
+ className = _ref.className,
41
+ style = _ref.style,
42
+ lines = _ref.lines,
43
+ cloneElement = _ref.cloneElement,
44
+ rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
45
+ var classes = (0, _classnames.default)('euiTextBlockTruncate', className);
46
+ var cssStyles = styles.euiTextBlockTruncate;
47
+ var inlineStyles = (0, _react.useMemo)(function () {
48
+ return _objectSpread({
49
+ WebkitLineClamp: lines
50
+ }, style);
51
+ }, [lines, style]);
52
+ if ( /*#__PURE__*/(0, _react.isValidElement)(children) && cloneElement) {
53
+ return (0, _services.cloneElementWithCss)(children, {
54
+ css: cssStyles,
55
+ style: _objectSpread(_objectSpread({}, children.props.style), inlineStyles),
56
+ className: (0, _classnames.default)(children.props.className, classes)
57
+ });
58
+ } else {
59
+ return (0, _react2.jsx)("div", (0, _extends2.default)({
60
+ className: classes,
61
+ css: cssStyles,
62
+ style: inlineStyles
63
+ }, rest), children);
64
+ }
65
+ };
66
+ exports.EuiTextBlockTruncate = EuiTextBlockTruncate;
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.EuiGlobalStyles = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
8
9
  var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
9
10
  var _react = _interopRequireDefault(require("react"));
10
11
  var _react2 = require("@emotion/react");
@@ -13,14 +14,14 @@ var _functions = require("../functions");
13
14
  var _color = require("../../services/color");
14
15
  var _theme = require("../../services/theme");
15
16
  var _reset = require("./reset");
16
- /*
17
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
18
- * or more contributor license agreements. Licensed under the Elastic License
19
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
20
- * in compliance with, at your election, the Elastic License 2.0 or the Server
21
- * Side Public License, v 1.
22
- */
23
-
17
+ 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; }
18
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /*
19
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
20
+ * or more contributor license agreements. Licensed under the Elastic License
21
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
22
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
23
+ * Side Public License, v 1.
24
+ */
24
25
  var EuiGlobalStyles = function EuiGlobalStyles(_ref) {
25
26
  (0, _objectDestructuringEmpty2.default)(_ref);
26
27
  var euiThemeContext = (0, _theme.useEuiTheme)();
@@ -43,12 +44,20 @@ var EuiGlobalStyles = function EuiGlobalStyles(_ref) {
43
44
  * This font reset sets all our base font/typography related properties
44
45
  * that are needed to override browser-specific element settings.
45
46
  */
46
- var fontReset = "\n font-family: ".concat(font.family, ";\n font-size: ", "".concat(font.scale[font.body.scale] * base, "px"), ";\n line-height: ").concat(base / (font.scale[font.body.scale] * base), ";\n font-weight: ").concat(font.weight[font.body.weight], ";\n ");
47
+ var fontBodyScale = font.scale[font.body.scale];
48
+ var fontReset = {
49
+ fontFamily: font.family,
50
+ fontSize: "".concat(font.defaultUnits === 'px' ? fontBodyScale * base : fontBodyScale).concat(font.defaultUnits),
51
+ lineHeight: base / (fontBodyScale * base),
52
+ fontWeight: font.weight[font.body.weight]
53
+ };
47
54
 
48
55
  /**
49
56
  * Final styles
50
57
  */
51
- var styles = /*#__PURE__*/(0, _react2.css)(_reset.resetStyles, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;", (0, _functions.logicalCSS)('height', '100%'), " background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}select:disabled{opacity:1;}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", (0, _mixins.euiFocusRing)(euiThemeContext), ";}::selection{background:", (0, _color.transparentize)(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
58
+ var styles = /*#__PURE__*/(0, _react2.css)(_reset.resetStyles, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;", (0, _functions.logicalCSS)('height', '100%'), " background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", _objectSpread(_objectSpread({}, fontReset), {}, {
59
+ fontSize: '1rem' // Inherit from html root
60
+ }), ";}select:disabled{opacity:1;}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", (0, _mixins.euiFocusRing)(euiThemeContext), ";}::selection{background:", (0, _color.transparentize)(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
52
61
  return (0, _react2.jsx)(_react2.Global, {
53
62
  styles: styles
54
63
  });
@@ -3,24 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- Object.defineProperty(exports, "accessibleClickKeys", {
7
- enumerable: true,
8
- get: function get() {
9
- return _accessible_click_keys.accessibleClickKeys;
10
- }
11
- });
12
- Object.defineProperty(exports, "cascadingMenuKeys", {
13
- enumerable: true,
14
- get: function get() {
15
- return _cascading_menu_keys.cascadingMenuKeys;
16
- }
17
- });
18
- Object.defineProperty(exports, "comboBoxKeys", {
19
- enumerable: true,
20
- get: function get() {
21
- return _combo_box_keys.comboBoxKeys;
22
- }
23
- });
24
6
  Object.defineProperty(exports, "htmlIdGenerator", {
25
7
  enumerable: true,
26
8
  get: function get() {
@@ -33,7 +15,4 @@ Object.defineProperty(exports, "useGeneratedHtmlId", {
33
15
  return _html_id_generator.useGeneratedHtmlId;
34
16
  }
35
17
  });
36
- var _accessible_click_keys = require("./accessible_click_keys");
37
- var _cascading_menu_keys = require("./cascading_menu_keys");
38
- var _combo_box_keys = require("./combo_box_keys");
39
18
  var _html_id_generator = require("./html_id_generator");
@@ -6,9 +6,6 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  var _exportNames = {
8
8
  keys: true,
9
- accessibleClickKeys: true,
10
- cascadingMenuKeys: true,
11
- comboBoxKeys: true,
12
9
  htmlIdGenerator: true,
13
10
  useGeneratedHtmlId: true,
14
11
  CENTER_ALIGNMENT: true,
@@ -188,12 +185,6 @@ Object.defineProperty(exports, "VISUALIZATION_COLORS", {
188
185
  return _color.VISUALIZATION_COLORS;
189
186
  }
190
187
  });
191
- Object.defineProperty(exports, "accessibleClickKeys", {
192
- enumerable: true,
193
- get: function get() {
194
- return _accessibility.accessibleClickKeys;
195
- }
196
- });
197
188
  Object.defineProperty(exports, "brighten", {
198
189
  enumerable: true,
199
190
  get: function get() {
@@ -218,24 +209,12 @@ Object.defineProperty(exports, "calculatePopoverPosition", {
218
209
  return _popover.calculatePopoverPosition;
219
210
  }
220
211
  });
221
- Object.defineProperty(exports, "cascadingMenuKeys", {
222
- enumerable: true,
223
- get: function get() {
224
- return _accessibility.cascadingMenuKeys;
225
- }
226
- });
227
212
  Object.defineProperty(exports, "colorPalette", {
228
213
  enumerable: true,
229
214
  get: function get() {
230
215
  return _color.colorPalette;
231
216
  }
232
217
  });
233
- Object.defineProperty(exports, "comboBoxKeys", {
234
- enumerable: true,
235
- get: function get() {
236
- return _accessibility.comboBoxKeys;
237
- }
238
- });
239
218
  Object.defineProperty(exports, "copyToClipboard", {
240
219
  enumerable: true,
241
220
  get: function get() {
@@ -8,3 +8,5 @@ export declare const waitForEuiPopoverClose: () => Promise<void>;
8
8
 
9
9
  export declare const waitForEuiToolTipVisible: () => Promise<void>;
10
10
  export declare const waitForEuiToolTipHidden: () => Promise<void>;
11
+
12
+ export declare const showEuiComboBoxOptions: () => Promise<void>;
@@ -4,11 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.waitForEuiToolTipVisible = exports.waitForEuiToolTipHidden = exports.waitForEuiPopoverOpen = exports.waitForEuiPopoverClose = void 0;
7
+ exports.waitForEuiToolTipVisible = exports.waitForEuiToolTipHidden = exports.waitForEuiPopoverOpen = exports.waitForEuiPopoverClose = exports.showEuiComboBoxOptions = void 0;
8
8
  var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
9
9
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
10
10
  require("@testing-library/jest-dom");
11
11
  var _react = require("@testing-library/react");
12
+ var _custom_render = require("./custom_render");
12
13
  /*
13
14
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
14
15
  * or more contributor license agreements. Licensed under the Elastic License
@@ -120,4 +121,32 @@ var waitForEuiToolTipHidden = /*#__PURE__*/function () {
120
121
  return _ref4.apply(this, arguments);
121
122
  };
122
123
  }();
123
- exports.waitForEuiToolTipHidden = waitForEuiToolTipHidden;
124
+
125
+ /**
126
+ * Doot doo
127
+ */
128
+ exports.waitForEuiToolTipHidden = waitForEuiToolTipHidden;
129
+ var showEuiComboBoxOptions = /*#__PURE__*/function () {
130
+ var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
131
+ return _regenerator.default.wrap(function _callee5$(_context5) {
132
+ while (1) switch (_context5.prev = _context5.next) {
133
+ case 0:
134
+ _react.fireEvent.click(_custom_render.screen.getByTestSubject('comboBoxToggleListButton'));
135
+ _context5.next = 3;
136
+ return waitForEuiPopoverOpen();
137
+ case 3:
138
+ _context5.next = 5;
139
+ return (0, _react.waitFor)(function () {
140
+ expect(_custom_render.screen.getByRole('listbox')).toBeInTheDocument();
141
+ });
142
+ case 5:
143
+ case "end":
144
+ return _context5.stop();
145
+ }
146
+ }, _callee5);
147
+ }));
148
+ return function showEuiComboBoxOptions() {
149
+ return _ref5.apply(this, arguments);
150
+ };
151
+ }();
152
+ exports.showEuiComboBoxOptions = showEuiComboBoxOptions;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elastic/eui",
3
3
  "description": "Elastic UI Component Library",
4
- "version": "88.5.4",
4
+ "version": "89.0.0",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "lib",
7
7
  "module": "es",
@@ -2,13 +2,13 @@
2
2
  * 1. Using specificity to override panel shadow
3
3
  * 2. Prevent really long input from overflowing the container.
4
4
  */
5
+
5
6
  .euiComboBoxOptionsList {
6
- // Remove transforms from popover panel
7
- transform: none !important; // stylelint-disable-line declaration-no-important
8
- top: 0;
7
+ max-height: 200px; // Also used/set in the JS file
8
+ overflow: hidden;
9
9
 
10
- .euiFilterSelectItem__content {
11
- margin-block: 0 !important; // stylelint-disable-line declaration-no-important
10
+ &__virtualization {
11
+ @include euiScrollBar;
12
12
  }
13
13
 
14
14
  /* Kibana FTR affordance - without this, Selenium complains about the overlaid
@@ -26,13 +26,3 @@
26
26
  text-align: center;
27
27
  word-wrap: break-word;
28
28
  }
29
-
30
- .euiComboBoxOptionsList__rowWrap {
31
- padding: 0;
32
- max-height: 200px; // Also used/set in the JS file
33
- overflow: hidden;
34
-
35
- > div { // Targets the element for FixedSizeList that doesn't have a selector
36
- @include euiScrollBar;
37
- }
38
- }
@@ -10,21 +10,25 @@
10
10
  &.euiContextMenuPanel-txInLeft {
11
11
  pointer-events: none;
12
12
  animation: euiContextMenuPanelTxInLeft $euiAnimSpeedNormal $euiAnimSlightResistance;
13
+ animation-fill-mode: forwards;
13
14
  }
14
15
 
15
16
  &.euiContextMenuPanel-txOutLeft {
16
17
  pointer-events: none;
17
18
  animation: euiContextMenuPanelTxOutLeft $euiAnimSpeedNormal $euiAnimSlightResistance;
19
+ animation-fill-mode: forwards;
18
20
  }
19
21
 
20
22
  &.euiContextMenuPanel-txInRight {
21
23
  pointer-events: none;
22
24
  animation: euiContextMenuPanelTxInRight $euiAnimSpeedNormal $euiAnimSlightResistance;
25
+ animation-fill-mode: forwards;
23
26
  }
24
27
 
25
28
  &.euiContextMenuPanel-txOutRight {
26
29
  pointer-events: none;
27
30
  animation: euiContextMenuPanelTxOutRight $euiAnimSpeedNormal $euiAnimSlightResistance;
31
+ animation-fill-mode: forwards;
28
32
  }
29
33
  }
30
34
 
@@ -15,5 +15,4 @@
15
15
  @import 'side_nav/index';
16
16
  @import 'search_bar/index';
17
17
  @import 'selectable/index';
18
- @import 'suggest/index';
19
18
  @import 'table/index';
@@ -8,7 +8,6 @@
8
8
 
9
9
  @import 'button';
10
10
  @import 'form';
11
- @import 'header';
12
11
  @import 'loading';
13
12
  @import 'link';
14
13
  @import 'panel';
@@ -21,7 +21,6 @@
21
21
 
22
22
  @import 'buttons';
23
23
  @import 'form';
24
- @import 'header';
25
24
  @import 'page';
26
25
  @import 'panel';
27
26
  @import 'tool_tip';
@@ -42,18 +42,3 @@ expect(
42
42
  })
43
43
  ).toMatchSnapshot();
44
44
  ```
45
-
46
- ### testCustomHook
47
-
48
- Use this function to execute a custom hook and access its return value, which can be passed to `expect` for verification. The function also returns a `getUpdatedState` method which will always return the hook's current state, in case some interaction with the react component causes an update.
49
-
50
- ```js
51
- const {
52
- return: hookReturnValue,
53
- getUpdatedState,
54
- } = testCustomHook(() => useCellPopover());
55
-
56
- expect(hookReturnValue).to.equal(myExpectedValue);
57
- doSomeActions();
58
- expect(getUpdatedState()).to.equal(myExpectedValue);
59
- ```
@@ -10,7 +10,6 @@
10
10
 
11
11
  @import '../../../../global_styling/mixins/button';
12
12
  @import '../../../../global_styling/mixins/form';
13
- @import '../../../../global_styling/mixins/header';
14
13
  @import '../../../../global_styling/mixins/loading';
15
14
  @import 'link';
16
15
  @import '../../../../global_styling/mixins/panel';
@@ -1065,9 +1065,14 @@ EuiBasicTable.propTypes = {
1065
1065
  */
1066
1066
  align: _propTypes.default.any,
1067
1067
  /**
1068
- * Indicates whether this column should truncate its content when it doesn't fit
1068
+ * Indicates whether this column should truncate overflowing text content.
1069
+ * - Set to `true` to enable single-line truncation.
1070
+ * - To enable multi-line truncation, use a configuration object with `lines`
1071
+ * set to a number of lines to truncate to.
1069
1072
  */
1070
- truncateText: _propTypes.default.bool,
1073
+ truncateText: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
1074
+ lines: _propTypes.default.number.isRequired
1075
+ }).isRequired]),
1071
1076
  mobileOptions: _propTypes.default.shape({
1072
1077
  render: _propTypes.default.func
1073
1078
  }),
@@ -611,9 +611,14 @@ EuiInMemoryTable.propTypes = {
611
611
  */
612
612
  align: _propTypes.default.any,
613
613
  /**
614
- * Indicates whether this column should truncate its content when it doesn't fit
614
+ * Indicates whether this column should truncate overflowing text content.
615
+ * - Set to `true` to enable single-line truncation.
616
+ * - To enable multi-line truncation, use a configuration object with `lines`
617
+ * set to a number of lines to truncate to.
615
618
  */
616
- truncateText: _propTypes.default.bool,
619
+ truncateText: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
620
+ lines: _propTypes.default.number.isRequired
621
+ }).isRequired]),
617
622
  mobileOptions: _propTypes.default.shape({
618
623
  render: _propTypes.default.func
619
624
  }),
@@ -198,6 +198,11 @@ EuiCollapsibleNav.propTypes = {
198
198
  * Named breakpoint (`xs` through `xl`) for customizing the minimum window width to enable docking
199
199
  */
200
200
  pushMinBreakpoint: _propTypes.default.any,
201
+ /**
202
+ * Enables a slide in animation on push flyouts
203
+ * @default false
204
+ */
205
+ pushAnimation: _propTypes.default.bool,
201
206
  style: _propTypes.default.any,
202
207
  /**
203
208
  * Object of props passed to EuiFocusTrap.
@@ -19,7 +19,7 @@ var _collapsible_nav_accordion = require("./collapsible_nav_accordion");
19
19
  var _collapsible_nav_link = require("./collapsible_nav_link");
20
20
  var _collapsible_nav_item = require("./collapsible_nav_item.styles");
21
21
  var _react2 = require("@emotion/react");
22
- var _excluded = ["isSubItem", "title", "titleElement", "icon", "iconProps", "items", "children"],
22
+ var _excluded = ["isSubItem", "title", "titleElement", "icon", "iconProps", "items", "accordionProps", "children"],
23
23
  _excluded2 = ["renderItem", "className"],
24
24
  _excluded3 = ["items", "isSubItem", "isGroup", "className"],
25
25
  _excluded4 = ["className"];
@@ -45,6 +45,7 @@ var EuiCollapsibleNavItemDisplay = function EuiCollapsibleNavItemDisplay(_ref) {
45
45
  icon = _ref.icon,
46
46
  iconProps = _ref.iconProps,
47
47
  items = _ref.items,
48
+ accordionProps = _ref.accordionProps,
48
49
  children = _ref.children,
49
50
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
50
51
  var headerContent = (0, _react2.jsx)(EuiCollapsibleNavItemTitle, {
@@ -57,7 +58,8 @@ var EuiCollapsibleNavItemDisplay = function EuiCollapsibleNavItemDisplay(_ref) {
57
58
  if (isAccordion) {
58
59
  return (0, _react2.jsx)(_collapsible_nav_accordion.EuiCollapsibleNavAccordion, (0, _extends2.default)({
59
60
  buttonContent: headerContent,
60
- items: items
61
+ items: items,
62
+ accordionProps: accordionProps
61
63
  }, props, {
62
64
  isSubItem: isSubItem
63
65
  }));
@@ -27,12 +27,6 @@ Object.defineProperty(exports, "EuiColorPickerSwatch", {
27
27
  return _color_picker_swatch.EuiColorPickerSwatch;
28
28
  }
29
29
  });
30
- Object.defineProperty(exports, "EuiColorStops", {
31
- enumerable: true,
32
- get: function get() {
33
- return _color_stops.EuiColorStops;
34
- }
35
- });
36
30
  Object.defineProperty(exports, "EuiHue", {
37
31
  enumerable: true,
38
32
  get: function get() {
@@ -49,6 +43,5 @@ var _color_picker = require("./color_picker");
49
43
  var _color_picker_swatch = require("./color_picker_swatch");
50
44
  var _hue = require("./hue");
51
45
  var _saturation = require("./saturation");
52
- var _color_stops = require("./color_stops");
53
46
  var _color_palette_picker = require("./color_palette_picker");
54
47
  var _color_palette_display = require("./color_palette_display");