@elastic/eui 69.0.0 → 70.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 (191) hide show
  1. package/dist/eui_theme_dark.css +0 -375
  2. package/dist/eui_theme_dark.json +0 -27
  3. package/dist/eui_theme_dark.json.d.ts +0 -27
  4. package/dist/eui_theme_dark.min.css +1 -1
  5. package/dist/eui_theme_light.css +0 -375
  6. package/dist/eui_theme_light.json +0 -27
  7. package/dist/eui_theme_light.json.d.ts +0 -27
  8. package/dist/eui_theme_light.min.css +1 -1
  9. package/es/components/basic_table/in_memory_table.js +8 -2
  10. package/es/components/code/code.js +7 -3
  11. package/es/components/code/code.styles.js +32 -0
  12. package/es/components/code/code_block.js +72 -315
  13. package/es/components/code/code_block.styles.js +153 -0
  14. package/es/components/code/code_block_controls.js +29 -0
  15. package/es/components/code/code_block_controls.styles.js +43 -0
  16. package/es/components/code/code_block_copy.js +65 -0
  17. package/es/components/code/code_block_full_screen.js +90 -0
  18. package/es/components/code/code_block_line.styles.js +49 -0
  19. package/es/components/code/code_block_overflow.js +78 -0
  20. package/es/components/code/code_block_virtualized.js +59 -0
  21. package/es/components/code/code_syntax.styles.js +43 -0
  22. package/es/components/code/utils.js +43 -37
  23. package/es/components/collapsible_nav/collapsible_nav.js +0 -5
  24. package/es/components/overlay_mask/overlay_mask.js +8 -14
  25. package/es/components/overlay_mask/overlay_mask.styles.js +4 -14
  26. package/es/components/overlay_mask/overlay_mask_body.styles.js +18 -0
  27. package/es/components/provider/provider.js +1 -5
  28. package/es/components/resizable_container/helpers.js +2 -2
  29. package/es/components/resizable_container/resizable_container.js +6 -9
  30. package/es/components/resizable_container/resizable_container.styles.js +28 -0
  31. package/es/components/resizable_container/resizable_panel.js +25 -48
  32. package/es/components/resizable_container/resizable_panel.styles.js +69 -0
  33. package/es/components/search_bar/query/ast.js +14 -3
  34. package/es/components/tool_tip/tool_tip.js +3 -2
  35. package/es/components/tool_tip/tool_tip.styles.js +17 -22
  36. package/es/components/tool_tip/tool_tip_arrow.js +17 -3
  37. package/es/components/tool_tip/tool_tip_popover.js +7 -7
  38. package/es/components/tour/tour.styles.js +4 -3
  39. package/es/components/tour/tour_step.js +7 -5
  40. package/es/global_styling/functions/logicals.js +5 -3
  41. package/es/global_styling/functions/math.js +37 -19
  42. package/es/global_styling/mixins/_padding.js +13 -9
  43. package/eui.d.ts +291 -37
  44. package/i18ntokens.json +22 -22
  45. package/lib/components/basic_table/in_memory_table.js +8 -2
  46. package/lib/components/code/code.js +9 -3
  47. package/lib/components/code/code.styles.js +35 -0
  48. package/lib/components/code/code_block.js +72 -320
  49. package/lib/components/code/code_block.styles.js +154 -0
  50. package/lib/components/code/code_block_controls.js +48 -0
  51. package/lib/components/code/code_block_controls.styles.js +39 -0
  52. package/lib/components/code/code_block_copy.js +78 -0
  53. package/lib/components/code/code_block_full_screen.js +108 -0
  54. package/lib/components/code/code_block_line.styles.js +45 -0
  55. package/lib/components/code/code_block_overflow.js +82 -0
  56. package/lib/components/code/code_block_virtualized.js +72 -0
  57. package/lib/components/code/code_syntax.styles.js +57 -0
  58. package/lib/components/code/utils.js +40 -39
  59. package/lib/components/collapsible_nav/collapsible_nav.js +0 -5
  60. package/lib/components/overlay_mask/overlay_mask.js +9 -14
  61. package/lib/components/overlay_mask/overlay_mask.styles.js +13 -17
  62. package/lib/components/overlay_mask/overlay_mask_body.styles.js +20 -0
  63. package/lib/components/provider/provider.js +7 -12
  64. package/lib/components/resizable_container/helpers.js +2 -2
  65. package/lib/components/resizable_container/resizable_container.js +7 -9
  66. package/lib/components/resizable_container/resizable_container.styles.js +31 -0
  67. package/lib/components/resizable_container/resizable_panel.js +28 -49
  68. package/lib/components/resizable_container/resizable_panel.styles.js +74 -0
  69. package/lib/components/search_bar/query/ast.js +14 -3
  70. package/lib/components/tool_tip/tool_tip.js +3 -2
  71. package/lib/components/tool_tip/tool_tip.styles.js +18 -26
  72. package/lib/components/tool_tip/tool_tip_arrow.js +19 -4
  73. package/lib/components/tool_tip/tool_tip_popover.js +6 -6
  74. package/lib/components/tour/tour.styles.js +3 -2
  75. package/lib/components/tour/tour_step.js +7 -5
  76. package/lib/global_styling/functions/logicals.js +5 -3
  77. package/lib/global_styling/functions/math.js +37 -19
  78. package/lib/global_styling/mixins/_padding.js +17 -10
  79. package/optimize/es/components/basic_table/in_memory_table.js +1 -1
  80. package/optimize/es/components/code/code.js +7 -3
  81. package/optimize/es/components/code/code.styles.js +32 -0
  82. package/optimize/es/components/code/code_block.js +70 -299
  83. package/optimize/es/components/code/code_block.styles.js +153 -0
  84. package/optimize/es/components/code/code_block_controls.js +29 -0
  85. package/optimize/es/components/code/code_block_controls.styles.js +43 -0
  86. package/optimize/es/components/code/code_block_copy.js +55 -0
  87. package/optimize/es/components/code/code_block_full_screen.js +80 -0
  88. package/optimize/es/components/code/code_block_line.styles.js +49 -0
  89. package/optimize/es/components/code/code_block_overflow.js +67 -0
  90. package/optimize/es/components/code/code_block_virtualized.js +59 -0
  91. package/optimize/es/components/code/code_syntax.styles.js +43 -0
  92. package/optimize/es/components/code/utils.js +43 -37
  93. package/optimize/es/components/overlay_mask/overlay_mask.js +8 -9
  94. package/optimize/es/components/overlay_mask/overlay_mask.styles.js +4 -14
  95. package/optimize/es/components/overlay_mask/overlay_mask_body.styles.js +18 -0
  96. package/optimize/es/components/provider/provider.js +1 -5
  97. package/optimize/es/components/resizable_container/helpers.js +2 -2
  98. package/optimize/es/components/resizable_container/resizable_container.js +6 -9
  99. package/optimize/es/components/resizable_container/resizable_container.styles.js +28 -0
  100. package/optimize/es/components/resizable_container/resizable_panel.js +25 -48
  101. package/optimize/es/components/resizable_container/resizable_panel.styles.js +69 -0
  102. package/optimize/es/components/search_bar/query/ast.js +14 -3
  103. package/optimize/es/components/tool_tip/tool_tip.js +3 -2
  104. package/optimize/es/components/tool_tip/tool_tip.styles.js +17 -22
  105. package/optimize/es/components/tool_tip/tool_tip_arrow.js +9 -3
  106. package/optimize/es/components/tool_tip/tool_tip_popover.js +7 -7
  107. package/optimize/es/components/tour/tour.styles.js +4 -3
  108. package/optimize/es/components/tour/tour_step.js +7 -5
  109. package/optimize/es/global_styling/functions/logicals.js +5 -3
  110. package/optimize/es/global_styling/functions/math.js +35 -17
  111. package/optimize/es/global_styling/mixins/_padding.js +13 -9
  112. package/optimize/lib/components/basic_table/in_memory_table.js +1 -1
  113. package/optimize/lib/components/code/code.js +9 -3
  114. package/optimize/lib/components/code/code.styles.js +35 -0
  115. package/optimize/lib/components/code/code_block.js +71 -306
  116. package/optimize/lib/components/code/code_block.styles.js +156 -0
  117. package/optimize/lib/components/code/code_block_controls.js +48 -0
  118. package/optimize/lib/components/code/code_block_controls.styles.js +39 -0
  119. package/optimize/lib/components/code/code_block_copy.js +78 -0
  120. package/optimize/lib/components/code/code_block_full_screen.js +108 -0
  121. package/optimize/lib/components/code/code_block_line.styles.js +45 -0
  122. package/optimize/lib/components/code/code_block_overflow.js +82 -0
  123. package/optimize/lib/components/code/code_block_virtualized.js +81 -0
  124. package/optimize/lib/components/code/code_syntax.styles.js +57 -0
  125. package/optimize/lib/components/code/utils.js +40 -37
  126. package/optimize/lib/components/overlay_mask/overlay_mask.js +9 -9
  127. package/optimize/lib/components/overlay_mask/overlay_mask.styles.js +13 -17
  128. package/optimize/lib/components/overlay_mask/overlay_mask_body.styles.js +20 -0
  129. package/optimize/lib/components/provider/provider.js +7 -12
  130. package/optimize/lib/components/resizable_container/helpers.js +2 -2
  131. package/optimize/lib/components/resizable_container/resizable_container.js +7 -9
  132. package/optimize/lib/components/resizable_container/resizable_container.styles.js +31 -0
  133. package/optimize/lib/components/resizable_container/resizable_panel.js +28 -49
  134. package/optimize/lib/components/resizable_container/resizable_panel.styles.js +76 -0
  135. package/optimize/lib/components/search_bar/query/ast.js +14 -3
  136. package/optimize/lib/components/tool_tip/tool_tip.js +3 -2
  137. package/optimize/lib/components/tool_tip/tool_tip.styles.js +18 -26
  138. package/optimize/lib/components/tool_tip/tool_tip_arrow.js +10 -10
  139. package/optimize/lib/components/tool_tip/tool_tip_popover.js +6 -6
  140. package/optimize/lib/components/tour/tour.styles.js +3 -2
  141. package/optimize/lib/components/tour/tour_step.js +7 -5
  142. package/optimize/lib/global_styling/functions/logicals.js +4 -10
  143. package/optimize/lib/global_styling/functions/math.js +37 -19
  144. package/optimize/lib/global_styling/mixins/_padding.js +17 -10
  145. package/package.json +8 -7
  146. package/src/components/index.scss +0 -1
  147. package/src/components/resizable_container/_index.scss +0 -2
  148. package/src/global_styling/mixins/_header.scss +1 -1
  149. package/src/global_styling/variables/_index.scss +0 -1
  150. package/src/themes/amsterdam/overrides/_index.scss +0 -1
  151. package/test-env/components/basic_table/in_memory_table.js +8 -2
  152. package/test-env/components/code/code.styles.js +35 -0
  153. package/test-env/components/code/code_block.styles.js +156 -0
  154. package/test-env/components/code/code_block_controls.js +48 -0
  155. package/test-env/components/code/code_block_controls.styles.js +39 -0
  156. package/test-env/components/code/code_block_copy.js +78 -0
  157. package/test-env/components/code/code_block_full_screen.js +108 -0
  158. package/test-env/components/code/code_block_line.styles.js +45 -0
  159. package/test-env/components/code/code_block_overflow.js +82 -0
  160. package/test-env/components/code/code_block_virtualized.js +81 -0
  161. package/test-env/components/code/code_syntax.styles.js +57 -0
  162. package/test-env/components/code/utils.js +40 -37
  163. package/test-env/components/collapsible_nav/collapsible_nav.js +0 -5
  164. package/test-env/components/overlay_mask/overlay_mask.js +9 -14
  165. package/test-env/components/overlay_mask/overlay_mask.styles.js +13 -17
  166. package/test-env/components/overlay_mask/overlay_mask_body.styles.js +20 -0
  167. package/test-env/components/provider/provider.js +7 -12
  168. package/test-env/components/resizable_container/helpers.js +2 -2
  169. package/test-env/components/resizable_container/resizable_container.js +7 -9
  170. package/test-env/components/resizable_container/resizable_container.styles.js +31 -0
  171. package/test-env/components/resizable_container/resizable_panel.js +28 -49
  172. package/test-env/components/resizable_container/resizable_panel.styles.js +76 -0
  173. package/test-env/components/search_bar/query/ast.js +14 -3
  174. package/test-env/components/tool_tip/tool_tip.js +3 -2
  175. package/test-env/components/tool_tip/tool_tip.styles.js +18 -26
  176. package/test-env/components/tool_tip/tool_tip_arrow.js +16 -11
  177. package/test-env/components/tool_tip/tool_tip_popover.js +6 -6
  178. package/test-env/components/tour/tour.styles.js +3 -2
  179. package/test-env/components/tour/tour_step.js +7 -5
  180. package/test-env/global_styling/functions/logicals.js +4 -10
  181. package/test-env/global_styling/functions/math.js +37 -19
  182. package/test-env/global_styling/mixins/_padding.js +17 -10
  183. package/src/components/code/_code.scss +0 -15
  184. package/src/components/code/_code_block.scss +0 -177
  185. package/src/components/code/_index.scss +0 -4
  186. package/src/components/code/_mixins.scss +0 -127
  187. package/src/components/code/_variables.scss +0 -5
  188. package/src/components/resizable_container/_resizable_container.scss +0 -8
  189. package/src/components/resizable_container/_resizable_panel.scss +0 -51
  190. package/src/global_styling/variables/_colors_code.scss +0 -23
  191. package/src/themes/amsterdam/overrides/_code.scss +0 -9
@@ -0,0 +1,76 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.euiResizablePanelStyles = exports.euiResizablePanelContentStyles = void 0;
9
+
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
12
+ var _react = require("@emotion/react");
13
+
14
+ var _global_styling = require("../../global_styling");
15
+
16
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
17
+
18
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
19
+
20
+ 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)."; }
21
+
22
+ var _ref2 = process.env.NODE_ENV === "production" ? {
23
+ name: "11qmbh3-collapsed",
24
+ styles: "overflow:hidden;label:collapsed;"
25
+ } : {
26
+ name: "11qmbh3-collapsed",
27
+ styles: "overflow:hidden;label:collapsed;",
28
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
29
+ };
30
+
31
+ var _ref3 = process.env.NODE_ENV === "production" ? {
32
+ name: "15ifdgc-euiResizablePanel",
33
+ styles: "position:relative;label:euiResizablePanel;"
34
+ } : {
35
+ name: "15ifdgc-euiResizablePanel",
36
+ styles: "position:relative;label:euiResizablePanel;",
37
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
38
+ };
39
+
40
+ var euiResizablePanelStyles = function euiResizablePanelStyles(euiThemeContext) {
41
+ return {
42
+ euiResizablePanel: _ref3,
43
+ collapsed: _ref2,
44
+ paddingSizes: _objectSpread({}, (0, _global_styling.euiPaddingSizeCSS)(euiThemeContext))
45
+ };
46
+ };
47
+
48
+ exports.euiResizablePanelStyles = euiResizablePanelStyles;
49
+
50
+ var _ref = process.env.NODE_ENV === "production" ? {
51
+ name: "597kt8-collapsedChildren",
52
+ styles: "*{display:none;};label:collapsedChildren;"
53
+ } : {
54
+ name: "597kt8-collapsedChildren",
55
+ styles: "*{display:none;};label:collapsedChildren;",
56
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
57
+ };
58
+
59
+ var euiResizablePanelContentStyles = function euiResizablePanelContentStyles(euiThemeContext) {
60
+ var euiTheme = euiThemeContext.euiTheme;
61
+ return {
62
+ euiResizablePanel__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), ";;label:euiResizablePanel__content;"),
63
+ scrollable: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), ";;label:scrollable;"),
64
+ collapsedChildren: _ref,
65
+ horizontal: {
66
+ collapsed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', '0 !important'), ";;label:collapsed;"),
67
+ hasCollapsibleButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.size.l, " !important")), ";;label:hasCollapsibleButton;")
68
+ },
69
+ vertical: {
70
+ collapsed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-height', '0 !important'), ";;label:collapsed;"),
71
+ hasCollapsibleButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-height', "".concat(euiTheme.size.l, " !important")), ";;label:hasCollapsibleButton;")
72
+ }
73
+ };
74
+ };
75
+
76
+ exports.euiResizablePanelContentStyles = euiResizablePanelContentStyles;
@@ -277,6 +277,10 @@ var arrayIncludesValue = function arrayIncludesValue(array, value) {
277
277
  return valuesEqual(item, value);
278
278
  });
279
279
  };
280
+
281
+ var mustToMatch = function mustToMatch(must) {
282
+ return must === true ? Match.MUST : Match.MUST_NOT;
283
+ };
280
284
  /**
281
285
  * The AST structure is an array of clauses. There are 3 types of clauses that are supported:
282
286
  *
@@ -397,9 +401,16 @@ var _AST = /*#__PURE__*/function () {
397
401
  }
398
402
  }, {
399
403
  key: "getOrFieldClause",
400
- value: function getOrFieldClause(field, value) {
404
+ value: function getOrFieldClause(field, value, must, operator) {
401
405
  return this.getFieldClause(field, function (clause) {
402
- return (0, _predicate.isArray)(clause.value) && ((0, _predicate.isNil)(value) || arrayIncludesValue(clause.value, value));
406
+ if (!(0, _predicate.isArray)(clause.value)) {
407
+ return false;
408
+ }
409
+
410
+ var matchValue = (0, _predicate.isNil)(value) || arrayIncludesValue(clause.value, value);
411
+ var matchMust = (0, _predicate.isNil)(must) || mustToMatch(must) === clause.match;
412
+ var matchOperator = (0, _predicate.isNil)(operator) || operator === clause.operator;
413
+ return matchValue && matchMust && matchOperator;
403
414
  });
404
415
  }
405
416
  }, {
@@ -407,7 +418,7 @@ var _AST = /*#__PURE__*/function () {
407
418
  value: function addOrFieldValue(field, value) {
408
419
  var must = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
409
420
  var operator = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : Operator.EQ;
410
- var existingClause = this.getOrFieldClause(field);
421
+ var existingClause = this.getOrFieldClause(field, undefined, must, operator);
411
422
 
412
423
  if (!existingClause) {
413
424
  var newClause = must ? Field.must[operator](field, [value]) : Field.mustNot[operator](field, [value]);
@@ -277,7 +277,7 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
277
277
  toolTipStyles = _this$state.toolTipStyles,
278
278
  visible = _this$state.visible,
279
279
  calculatedPosition = _this$state.calculatedPosition;
280
- var classes = (0, _classnames.default)('euiToolTip', positionsToClassNameMap[this.state.calculatedPosition], className);
280
+ var classes = (0, _classnames.default)('euiToolTip', className);
281
281
  var anchorClasses = (0, _classnames.default)(anchorClassName, anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.className);
282
282
  return (0, _react3.jsx)(_react.default.Fragment, null, (0, _react3.jsx)(_tool_tip_anchor.EuiToolTipAnchor, (0, _extends2.default)({}, anchorProps, {
283
283
  ref: this.setAnchorRef,
@@ -300,7 +300,8 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
300
300
  calculatedPosition: calculatedPosition
301
301
  }, rest), (0, _react3.jsx)(_tool_tip_arrow.EuiToolTipArrow, {
302
302
  style: arrowStyles,
303
- className: "euiToolTip__arrow"
303
+ className: "euiToolTip__arrow",
304
+ position: calculatedPosition
304
305
  }), (0, _react3.jsx)(_resize_observer.EuiResizeObserver, {
305
306
  onResize: this.positionToolTip
306
307
  }, function (resizeRef) {
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.euiToolTipStyles = exports.euiToolTipPopoverStyles = exports.euiToolTipBorderColor = exports.euiToolTipBackgroundColor = exports.euiToolTipAnchorStyles = void 0;
8
+ exports.euiToolTipStyles = exports.euiToolTipBorderColor = exports.euiToolTipBackgroundColor = exports.euiToolTipAnchorStyles = void 0;
9
9
 
10
10
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
11
 
@@ -44,47 +44,39 @@ var euiToolTipAnimationHorizontal = function euiToolTipAnimationHorizontal(size)
44
44
  var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
45
45
  var euiTheme = euiThemeContext.euiTheme,
46
46
  colorMode = euiThemeContext.colorMode;
47
- var animationTiming = "".concat(euiTheme.animation.slow, " ease-out 0s forwards");
48
- /*
49
- * 1. Shift arrow 1px more than half its size to account for border radius
50
- */
47
+ var animationTiming = "".concat(euiTheme.animation.slow, " ease-out 0s forwards"); // Shift arrow 1px more than half its size to account for border radius
51
48
 
52
49
  var arrowSize = euiTheme.size.m;
53
50
  var arrowPlusSize = (0, _global_styling.mathWithUnits)(arrowSize, function (x) {
54
51
  return (x / 2 + 1) * -1;
55
- }); // 1.
56
-
52
+ });
57
53
  var arrowMinusSize = (0, _global_styling.mathWithUnits)(arrowSize, function (x) {
58
54
  return (x / 2 - 1) * -1;
59
- }); // 1.
60
-
55
+ });
61
56
  return {
62
57
  // Base
63
58
  euiToolTip: /*#__PURE__*/(0, _react.css)((0, _amsterdam.euiShadow)(euiThemeContext), ";border-radius:", euiTheme.border.radius.medium, ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";color:", euiTheme.colors.ghost, ";z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";position:absolute;[class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme, colorMode), ";};label:euiToolTip;"),
64
59
  // Sizes
65
60
  s: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";;label:s;"),
66
61
  // Positions
67
- top: /*#__PURE__*/(0, _react.css)("animation:", euiToolTipAnimationVertical("-".concat(euiTheme.size.base)), " ", animationTiming, ";;label:top;"),
68
- bottom: /*#__PURE__*/(0, _react.css)("animation:", euiToolTipAnimationVertical(euiTheme.size.base), " ", animationTiming, ";[class*='euiToolTip__arrow']{transform:translateY(", arrowMinusSize, ") rotateZ(45deg);};label:bottom;"),
69
- left: /*#__PURE__*/(0, _react.css)("animation:", euiToolTipAnimationHorizontal("-".concat(euiTheme.size.base)), " ", animationTiming, ";[class*='euiToolTip__arrow']{transform:translateX(", arrowPlusSize, ") rotateZ(45deg);};label:left;"),
70
- right: /*#__PURE__*/(0, _react.css)("animation:", euiToolTipAnimationHorizontal(euiTheme.size.base), " ", animationTiming, ";[class*='euiToolTip__arrow']{transform:translateX(", arrowMinusSize, ") rotateZ(45deg);};label:right;"),
71
- // Elements
72
- euiToolTip__arrow: /*#__PURE__*/(0, _react.css)("content:'';position:absolute;transform-origin:center;border-radius:2px;background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";", (0, _global_styling.logicalSizeCSS)(arrowSize, arrowSize), ";transform:translateY(", arrowPlusSize, ") rotateZ(45deg);;label:euiToolTip__arrow;")
73
- };
74
- };
75
-
76
- exports.euiToolTipStyles = euiToolTipStyles;
77
-
78
- var euiToolTipPopoverStyles = function euiToolTipPopoverStyles(_ref4) {
79
- var euiTheme = _ref4.euiTheme,
80
- colorMode = _ref4.colorMode;
81
- return {
82
- // Elements
62
+ top: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{animation:", euiToolTipAnimationVertical("-".concat(euiTheme.size.base)), " ", animationTiming, ";};label:top;"),
63
+ bottom: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{animation:", euiToolTipAnimationVertical(euiTheme.size.base), " ", animationTiming, ";};label:bottom;"),
64
+ left: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{animation:", euiToolTipAnimationHorizontal("-".concat(euiTheme.size.base)), " ", animationTiming, ";};label:left;"),
65
+ right: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{animation:", euiToolTipAnimationHorizontal(euiTheme.size.base), " ", animationTiming, ";};label:right;"),
66
+ // Arrow
67
+ euiToolTip__arrow: /*#__PURE__*/(0, _react.css)("content:'';position:absolute;transform-origin:center;border-radius:2px;background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";", (0, _global_styling.logicalSizeCSS)(arrowSize, arrowSize), ";;label:euiToolTip__arrow;"),
68
+ arrowPositions: {
69
+ top: /*#__PURE__*/(0, _react.css)("transform:translateY(", arrowPlusSize, ") rotateZ(45deg);;label:top;"),
70
+ bottom: /*#__PURE__*/(0, _react.css)("transform:translateY(", arrowMinusSize, ") rotateZ(45deg);;label:bottom;"),
71
+ left: /*#__PURE__*/(0, _react.css)("transform:translateX(", arrowPlusSize, ") rotateZ(45deg);;label:left;"),
72
+ right: /*#__PURE__*/(0, _react.css)("transform:translateX(", arrowMinusSize, ") rotateZ(45deg);;label:right;")
73
+ },
74
+ // Title
83
75
  euiToolTip__title: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";", (0, _global_styling.logicalCSS)('border-bottom', "solid ".concat(euiTheme.border.width.thin, " ").concat(euiToolTipBorderColor(euiTheme, colorMode))), ";", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), ";", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.xs), ";;label:euiToolTip__title;")
84
76
  };
85
77
  };
86
78
 
87
- exports.euiToolTipPopoverStyles = euiToolTipPopoverStyles;
79
+ exports.euiToolTipStyles = euiToolTipStyles;
88
80
 
89
81
  var _ref = process.env.NODE_ENV === "production" ? {
90
82
  name: "fzilnk-inlineBlock",
@@ -9,27 +9,32 @@ exports.EuiToolTipArrow = void 0;
9
9
 
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
 
12
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
+
12
14
  var _react = _interopRequireDefault(require("react"));
13
15
 
16
+ var _propTypes = _interopRequireDefault(require("prop-types"));
17
+
14
18
  var _services = require("../../services");
15
19
 
16
20
  var _tool_tip = require("./tool_tip.styles");
17
21
 
18
22
  var _react2 = require("@emotion/react");
19
23
 
20
- /*
21
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
22
- * or more contributor license agreements. Licensed under the Elastic License
23
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
24
- * in compliance with, at your election, the Elastic License 2.0 or the Server
25
- * Side Public License, v 1.
26
- */
27
- var EuiToolTipArrow = function EuiToolTipArrow(props) {
24
+ var _excluded = ["position"];
25
+
26
+ var EuiToolTipArrow = function EuiToolTipArrow(_ref) {
27
+ var position = _ref.position,
28
+ props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
28
29
  var euiTheme = (0, _services.useEuiTheme)();
29
- var toolTipCss = (0, _tool_tip.euiToolTipStyles)(euiTheme);
30
+ var styles = (0, _tool_tip.euiToolTipStyles)(euiTheme);
31
+ var cssStyles = [styles.euiToolTip__arrow, styles.arrowPositions[position]];
30
32
  return (0, _react2.jsx)("div", (0, _extends2.default)({
31
- css: [toolTipCss.euiToolTip__arrow, ";label:EuiToolTipArrow;"]
33
+ css: cssStyles
32
34
  }, props));
33
35
  };
34
36
 
35
- exports.EuiToolTipArrow = EuiToolTipArrow;
37
+ exports.EuiToolTipArrow = EuiToolTipArrow;
38
+ EuiToolTipArrow.propTypes = {
39
+ position: _propTypes.default.oneOf(["top", "right", "bottom", "left"]).isRequired
40
+ };
@@ -41,9 +41,8 @@ var EuiToolTipPopover = function EuiToolTipPopover(_ref) {
41
41
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
42
42
  var popover = (0, _react.useRef)();
43
43
  var euiTheme = (0, _services.useEuiTheme)();
44
- var toolTipCss = (0, _tool_tip.euiToolTipStyles)(euiTheme);
45
- var popoverStyles = (0, _tool_tip.euiToolTipPopoverStyles)(euiTheme);
46
- var titleCss = [popoverStyles.euiToolTip__title];
44
+ var styles = (0, _tool_tip.euiToolTipStyles)(euiTheme);
45
+ var cssStyles = [styles.euiToolTip, calculatedPosition && styles[calculatedPosition]];
47
46
  var updateDimensions = (0, _react.useCallback)(function () {
48
47
  requestAnimationFrame(function () {
49
48
  // Because of this delay, sometimes `positionToolTip` becomes unavailable.
@@ -69,11 +68,12 @@ var EuiToolTipPopover = function EuiToolTipPopover(_ref) {
69
68
  }, [updateDimensions]);
70
69
  var classes = (0, _classnames.default)('euiToolTipPopover', className);
71
70
  return (0, _react2.jsx)("div", (0, _extends2.default)({
72
- css: [toolTipCss.euiToolTip, calculatedPosition && toolTipCss[calculatedPosition], ";label:EuiToolTipPopover;"],
71
+ css: cssStyles,
73
72
  className: classes,
74
- ref: setPopoverRef
73
+ ref: setPopoverRef,
74
+ "data-position": calculatedPosition
75
75
  }, rest), title && (0, _react2.jsx)("div", {
76
- css: titleCss,
76
+ css: styles.euiToolTip__title,
77
77
  className: "euiToolTip__title"
78
78
  }, title), children);
79
79
  };
@@ -31,7 +31,7 @@ var euiTourStyles = function euiTourStyles(_ref) {
31
31
  colorMode = _ref.colorMode;
32
32
  return {
33
33
  // Targets EuiPopoverPanel
34
- euiTour: /*#__PURE__*/(0, _react.css)("&[data-popover-open='true']{[class*='euiTourBeacon']{opacity:1;}}[data-popover-arrow='top']{&:before{", (0, _global_styling.logicalCSS)('border-top-color', backgroundColor(euiTheme.colors.lightestShade, colorMode)), ";}};label:euiTour;")
34
+ euiTour: /*#__PURE__*/(0, _react.css)("[data-popover-arrow='top']::before{", (0, _global_styling.logicalCSS)('border-top-color', backgroundColor(euiTheme.colors.lightestShade, colorMode)), ";};label:euiTour;")
35
35
  };
36
36
  };
37
37
 
@@ -48,7 +48,8 @@ var euiTourBeaconStyles = function euiTourBeaconStyles(_ref2) {
48
48
  });
49
49
  return {
50
50
  // Base
51
- euiTourBeacon: /*#__PURE__*/(0, _react.css)("pointer-events:none;position:absolute;opacity:0;transition:opacity 0s ", euiTheme.animation[_popover_panel.openAnimationTiming], ";;label:euiTourBeacon;"),
51
+ euiTourBeacon: /*#__PURE__*/(0, _react.css)("pointer-events:none;position:absolute;", _global_styling.euiCanAnimate, "{opacity:0;transition:opacity 0s ", euiTheme.animation[_popover_panel.openAnimationTiming], ";};label:euiTourBeacon;"),
52
+ isOpen: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{opacity:1;};label:isOpen;"),
52
53
  // Positions
53
54
  right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowHalfSize), ";", (0, _global_styling.logicalCSS)('left', arrowOffset), ";;label:right;"),
54
55
  left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowHalfSize), ";", (0, _global_styling.logicalCSS)('left', arrowSize), ";;label:left;"),
@@ -45,7 +45,7 @@ var _tour = require("./tour.styles");
45
45
 
46
46
  var _react2 = require("@emotion/react");
47
47
 
48
- var _excluded = ["anchorPosition", "anchor", "children", "className", "closePopover", "content", "isStepOpen", "minWidth", "maxWidth", "onFinish", "step", "stepsTotal", "style", "subtitle", "title", "decoration", "footerAction"];
48
+ var _excluded = ["anchorPosition", "anchor", "children", "className", "css", "closePopover", "content", "isStepOpen", "minWidth", "maxWidth", "onFinish", "step", "stepsTotal", "style", "subtitle", "title", "decoration", "footerAction", "panelProps"];
49
49
 
50
50
  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); }
51
51
 
@@ -61,6 +61,7 @@ var EuiTourStep = function EuiTourStep(_ref) {
61
61
  anchor = _ref.anchor,
62
62
  children = _ref.children,
63
63
  className = _ref.className,
64
+ css = _ref.css,
64
65
  _ref$closePopover = _ref.closePopover,
65
66
  closePopover = _ref$closePopover === void 0 ? function () {} : _ref$closePopover,
66
67
  content = _ref.content,
@@ -80,6 +81,7 @@ var EuiTourStep = function EuiTourStep(_ref) {
80
81
  _ref$decoration = _ref.decoration,
81
82
  decoration = _ref$decoration === void 0 ? 'beacon' : _ref$decoration,
82
83
  footerAction = _ref.footerAction,
84
+ panelProps = _ref.panelProps,
83
85
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
84
86
  var titleId = (0, _services.useGeneratedHtmlId)();
85
87
 
@@ -122,7 +124,7 @@ var EuiTourStep = function EuiTourStep(_ref) {
122
124
  var headerStyles = (0, _tour.euiTourHeaderStyles)(euiTheme);
123
125
  var footerStyles = (0, _tour.euiTourFooterStyles)(euiTheme);
124
126
  var beaconStyles = (0, _tour.euiTourBeaconStyles)(euiTheme);
125
- var beaconCss = [beaconStyles.euiTourBeacon, popoverPosition && beaconStyles[popoverPosition]];
127
+ var beaconCss = [beaconStyles.euiTourBeacon, isStepOpen && beaconStyles.isOpen, popoverPosition && beaconStyles[popoverPosition]];
126
128
  var finishButtonProps = {
127
129
  color: 'text',
128
130
  flush: 'right',
@@ -181,9 +183,9 @@ var EuiTourStep = function EuiTourStep(_ref) {
181
183
  ownFocus: false,
182
184
  panelClassName: classes,
183
185
  panelStyle: style,
184
- panelProps: {
185
- css: tourStyles.euiTour
186
- },
186
+ panelProps: _objectSpread(_objectSpread({}, panelProps), {}, {
187
+ css: [tourStyles.euiTour, css, panelProps === null || panelProps === void 0 ? void 0 : panelProps.css]
188
+ }),
187
189
  offset: hasBeacon ? 10 : 0,
188
190
  'aria-labelledby': titleId,
189
191
  arrowChildren: hasBeacon && (0, _react2.jsx)(_beacon.EuiBeacon, {
@@ -13,13 +13,9 @@ var _common = require("../../components/common");
13
13
 
14
14
  var _logicals = _interopRequireDefault(require("./logicals.json"));
15
15
 
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
- */
16
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
17
+
18
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
23
19
 
24
20
  /**
25
21
  * EUI utilizes logical CSS properties to enable directional writing-modes.
@@ -110,9 +106,7 @@ var logicalSizeCSS = function logicalSizeCSS(width, height) {
110
106
  exports.logicalSizeCSS = logicalSizeCSS;
111
107
 
112
108
  var logicalSizeStyle = function logicalSizeStyle(width, height) {
113
- var _ref2;
114
-
115
- return _ref2 = {}, (0, _defineProperty2.default)(_ref2, logicals.width, width), (0, _defineProperty2.default)(_ref2, logicals.height, height), _ref2;
109
+ return _objectSpread(_objectSpread({}, logicalStyle('width', width)), logicalStyle('height', height));
116
110
  }; // Text alignment is separate because its the value that changes not the property
117
111
 
118
112
 
@@ -30,28 +30,46 @@ function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(re, groups) { return
30
30
  * Example usage:
31
31
  * mathWithUnits('4px', (x) => x / 2) = '2px';
32
32
  * mathWithUnits(euiTheme.size.xs, (x) => x + 2) = '6px';
33
+ * mathWithUnits([euiTheme.size.l, euiTheme.size.s], (x, y) => x - y) = '16px';
33
34
  */
34
- var mathWithUnits = function mathWithUnits(value, callback) {
35
+ // Unfortunately, this is the CSSProperties[] type used for several euiTheme vars
36
+ var mathWithUnits = function mathWithUnits(values, callback) {
35
37
  var unit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
38
+ if (!Array.isArray(values)) values = [values];
39
+ var foundNumericValues = [];
40
+ var foundUnit = '';
41
+ values.forEach(function (value) {
42
+ if (typeof value === 'string') {
43
+ var _matches$groups, _matches$groups2;
36
44
 
37
- if (typeof value === 'string') {
38
- var _matches$groups;
39
-
40
- var regex = /*#__PURE__*/_wrapRegExp(/(\x2D?[\.0-9]+)(%|[A-Za-z]*)/, {
41
- value: 1,
42
- unit: 2
43
- });
44
-
45
- var matches = regex.exec(value);
46
- if (!(matches !== null && matches !== void 0 && (_matches$groups = matches.groups) !== null && _matches$groups !== void 0 && _matches$groups.value)) return value;
47
- var numericValue = Number(matches.groups.value);
48
- var passedUnit = matches.groups.unit || unit;
49
- return "".concat(callback(numericValue)).concat(passedUnit);
50
- } else if (typeof value === 'number') {
51
- return "".concat(callback(value)).concat(unit);
52
- } else {
53
- return value;
54
- }
45
+ var regex = /*#__PURE__*/_wrapRegExp(/(\x2D?[\.0-9]+)(%|[A-Za-z]*)/, {
46
+ value: 1,
47
+ unit: 2
48
+ });
49
+
50
+ var matches = regex.exec(value);
51
+ var numericValue = Number(matches === null || matches === void 0 ? void 0 : (_matches$groups = matches.groups) === null || _matches$groups === void 0 ? void 0 : _matches$groups.value);
52
+
53
+ if (!isNaN(numericValue)) {
54
+ foundNumericValues.push(numericValue);
55
+ } else {
56
+ throw new Error('No valid numeric value found');
57
+ }
58
+
59
+ if (!unit && matches !== null && matches !== void 0 && (_matches$groups2 = matches.groups) !== null && _matches$groups2 !== void 0 && _matches$groups2.unit) {
60
+ if (!foundUnit) {
61
+ foundUnit = matches.groups.unit;
62
+ } else if (foundUnit !== matches.groups.unit) {
63
+ throw new Error('Multiple units found. Use `calc()` to mix and math multiple unit types (e.g. `%` & `px`) instead');
64
+ }
65
+ }
66
+ } else if (typeof value === 'number') {
67
+ foundNumericValues.push(value);
68
+ } else {
69
+ throw new Error('Invalid value type - pass a string or number');
70
+ }
71
+ });
72
+ return "".concat(callback.apply(void 0, foundNumericValues)).concat(unit || foundUnit);
55
73
  };
56
74
 
57
75
  exports.mathWithUnits = mathWithUnits;
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useEuiPaddingSize = exports.useEuiPaddingCSS = exports.euiPaddingSize = exports.PADDING_SIZES = void 0;
6
+ exports.useEuiPaddingSize = exports.useEuiPaddingCSS = exports.euiPaddingSizeCSS = exports.euiPaddingSize = exports.PADDING_SIZES = void 0;
7
7
 
8
8
  var _react = require("@emotion/react");
9
9
 
@@ -38,6 +38,20 @@ var euiPaddingSize = function euiPaddingSize(_ref, size) {
38
38
 
39
39
  exports.euiPaddingSize = euiPaddingSize;
40
40
 
41
+ var euiPaddingSizeCSS = function euiPaddingSizeCSS(euiThemeContext, side) {
42
+ var property = side ? "padding-".concat(_functions.logicalSide[side]) : 'padding';
43
+ return {
44
+ none: null,
45
+ xs: /*#__PURE__*/(0, _react.css)(property, ":", euiPaddingSize(euiThemeContext, 'xs'), ";;label:xs;"),
46
+ s: /*#__PURE__*/(0, _react.css)(property, ":", euiPaddingSize(euiThemeContext, 's'), ";;label:s;"),
47
+ m: /*#__PURE__*/(0, _react.css)(property, ":", euiPaddingSize(euiThemeContext, 'm'), ";;label:m;"),
48
+ l: /*#__PURE__*/(0, _react.css)(property, ":", euiPaddingSize(euiThemeContext, 'l'), ";;label:l;"),
49
+ xl: /*#__PURE__*/(0, _react.css)(property, ":", euiPaddingSize(euiThemeContext, 'xl'), ";;label:xl;")
50
+ };
51
+ };
52
+
53
+ exports.euiPaddingSizeCSS = euiPaddingSizeCSS;
54
+
41
55
  var useEuiPaddingSize = function useEuiPaddingSize(size) {
42
56
  var euiTheme = (0, _theme.useEuiTheme)();
43
57
  return euiPaddingSize(euiTheme, size);
@@ -46,15 +60,8 @@ var useEuiPaddingSize = function useEuiPaddingSize(size) {
46
60
  exports.useEuiPaddingSize = useEuiPaddingSize;
47
61
 
48
62
  var useEuiPaddingCSS = function useEuiPaddingCSS(side) {
49
- var property = side ? "padding-".concat(_functions.logicalSide[side]) : 'padding';
50
- return {
51
- none: null,
52
- xs: /*#__PURE__*/(0, _react.css)(property, ":", useEuiPaddingSize('xs'), ";;label:xs;"),
53
- s: /*#__PURE__*/(0, _react.css)(property, ":", useEuiPaddingSize('s'), ";;label:s;"),
54
- m: /*#__PURE__*/(0, _react.css)(property, ":", useEuiPaddingSize('m'), ";;label:m;"),
55
- l: /*#__PURE__*/(0, _react.css)(property, ":", useEuiPaddingSize('l'), ";;label:l;"),
56
- xl: /*#__PURE__*/(0, _react.css)(property, ":", useEuiPaddingSize('xl'), ";;label:xl;")
57
- };
63
+ var euiTheme = (0, _theme.useEuiTheme)();
64
+ return euiPaddingSizeCSS(euiTheme, side);
58
65
  };
59
66
 
60
67
  exports.useEuiPaddingCSS = useEuiPaddingCSS;
@@ -1,15 +0,0 @@
1
- /*
2
- * 1. Size the code against the text its embedded within.
3
- */
4
- .euiCode {
5
- @include euiCodeFont;
6
- font-size: .9em; /* 1 */
7
- padding: .2em .5em; /* 1 */
8
- background: $euiCodeBlockBackgroundColor;
9
-
10
- &.euiCode--transparentBackground {
11
- background: transparent;
12
- }
13
-
14
- @include euiCodeSyntaxTokens;
15
- }