@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
@@ -23,18 +23,22 @@ export var euiPaddingSize = function euiPaddingSize(_ref, size) {
23
23
  return euiTheme.size[size];
24
24
  }
25
25
  };
26
+ export var euiPaddingSizeCSS = function euiPaddingSizeCSS(euiThemeContext, side) {
27
+ var property = side ? "padding-".concat(logicalSide[side]) : 'padding';
28
+ return {
29
+ none: null,
30
+ xs: /*#__PURE__*/css(property, ":", euiPaddingSize(euiThemeContext, 'xs'), ";;label:xs;"),
31
+ s: /*#__PURE__*/css(property, ":", euiPaddingSize(euiThemeContext, 's'), ";;label:s;"),
32
+ m: /*#__PURE__*/css(property, ":", euiPaddingSize(euiThemeContext, 'm'), ";;label:m;"),
33
+ l: /*#__PURE__*/css(property, ":", euiPaddingSize(euiThemeContext, 'l'), ";;label:l;"),
34
+ xl: /*#__PURE__*/css(property, ":", euiPaddingSize(euiThemeContext, 'xl'), ";;label:xl;")
35
+ };
36
+ };
26
37
  export var useEuiPaddingSize = function useEuiPaddingSize(size) {
27
38
  var euiTheme = useEuiTheme();
28
39
  return euiPaddingSize(euiTheme, size);
29
40
  };
30
41
  export var useEuiPaddingCSS = function useEuiPaddingCSS(side) {
31
- var property = side ? "padding-".concat(logicalSide[side]) : 'padding';
32
- return {
33
- none: null,
34
- xs: /*#__PURE__*/css(property, ":", useEuiPaddingSize('xs'), ";;label:xs;"),
35
- s: /*#__PURE__*/css(property, ":", useEuiPaddingSize('s'), ";;label:s;"),
36
- m: /*#__PURE__*/css(property, ":", useEuiPaddingSize('m'), ";;label:m;"),
37
- l: /*#__PURE__*/css(property, ":", useEuiPaddingSize('l'), ";;label:l;"),
38
- xl: /*#__PURE__*/css(property, ":", useEuiPaddingSize('xl'), ";;label:xl;")
39
- };
42
+ var euiTheme = useEuiTheme();
43
+ return euiPaddingSizeCSS(euiTheme, side);
40
44
  };
@@ -401,7 +401,7 @@ var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
401
401
  sortName = _this$state2.sortName,
402
402
  pageIndex = _this$state2.pageIndex,
403
403
  pageSize = _this$state2.pageSize;
404
- var matchingItems = query ? _search_bar.EuiSearchBar.Query.execute(query, items, executeQueryOptions) : items;
404
+ var matchingItems = query !== null && (executeQueryOptions === null || executeQueryOptions === void 0 ? void 0 : executeQueryOptions.enabled) !== false ? _search_bar.EuiSearchBar.Query.execute(query, items, executeQueryOptions) : items;
405
405
  var sortedItems = sortName ? matchingItems.slice(0) // avoid mutating the source array
406
406
  .sort(this.getItemSorter()) // sort, causes mutation
407
407
  : matchingItems;
@@ -21,6 +21,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
21
21
 
22
22
  var _utils = require("./utils");
23
23
 
24
+ var _services = require("../../services");
25
+
26
+ var _code = require("./code.styles");
27
+
24
28
  var _react2 = require("@emotion/react");
25
29
 
26
30
  var _excluded = ["transparentBackground", "language", "children", "className"];
@@ -51,11 +55,13 @@ var EuiCode = function EuiCode(_ref) {
51
55
  var content = (0, _react.useMemo)(function () {
52
56
  return (0, _utils.getHtmlContent)(data, children);
53
57
  }, [data, children]);
54
- var classes = (0, _classnames.default)('euiCode', {
55
- 'euiCode--transparentBackground': transparentBackground
56
- }, className);
58
+ var classes = (0, _classnames.default)('euiCode', className);
59
+ var euiTheme = (0, _services.useEuiTheme)();
60
+ var styles = (0, _code.euiCodeStyles)(euiTheme);
61
+ var cssStyles = [styles.euiCode, transparentBackground && styles.transparentBackground];
57
62
  return (0, _react2.jsx)("code", (0, _extends2.default)({
58
63
  className: classes,
64
+ css: cssStyles,
59
65
  "data-code-language": language
60
66
  }, rest), content);
61
67
  };
@@ -0,0 +1,35 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.euiCodeStyles = void 0;
7
+
8
+ var _react = require("@emotion/react");
9
+
10
+ var _code_syntax = require("./code_syntax.styles");
11
+
12
+ 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)."; }
13
+
14
+ var _ref = process.env.NODE_ENV === "production" ? {
15
+ name: "gfiv3z-transparentBackground",
16
+ styles: "background:transparent;label:transparentBackground;"
17
+ } : {
18
+ name: "gfiv3z-transparentBackground",
19
+ styles: "background:transparent;label:transparentBackground;",
20
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
21
+ };
22
+
23
+ var euiCodeStyles = function euiCodeStyles(euiThemeContext) {
24
+ var euiTheme = euiThemeContext.euiTheme;
25
+ var euiCodeSyntax = (0, _code_syntax.euiCodeSyntaxColors)(euiThemeContext);
26
+ return {
27
+ /*
28
+ * 1. Size the code against the text its embedded within.
29
+ */
30
+ euiCode: /*#__PURE__*/(0, _react.css)("font-family:", euiTheme.font.familyCode, ";font-size:0.9em;padding:0.2em 0.5em;background:", euiCodeSyntax.backgroundColor, ";border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.bold, ";color:", euiCodeSyntax.inlineCodeColor, ";", (0, _code_syntax.euiCodeSyntaxTokens)(euiThemeContext), ";;label:euiCode;"),
31
+ transparentBackground: _ref
32
+ };
33
+ };
34
+
35
+ exports.euiCodeStyles = euiCodeStyles;
@@ -23,31 +23,21 @@ var _react = _interopRequireWildcard(require("react"));
23
23
 
24
24
  var _classnames = _interopRequireDefault(require("classnames"));
25
25
 
26
- var _reactWindow = require("react-window");
27
-
28
26
  var _services = require("../../services");
29
27
 
30
- var _auto_sizer = require("../auto_sizer");
31
-
32
- var _button = require("../button");
33
-
34
- var _common = require("../common");
35
-
36
- var _copy = require("../copy");
37
-
38
- var _focus_trap = require("../focus_trap");
28
+ var _utils = require("./utils");
39
29
 
40
- var _i18n = require("../i18n");
30
+ var _code_block_overflow = require("./code_block_overflow");
41
31
 
42
- var _inner_text = require("../inner_text");
32
+ var _code_block_copy = require("./code_block_copy");
43
33
 
44
- var _mutation_observer = require("../observer/mutation_observer");
34
+ var _code_block_full_screen = require("./code_block_full_screen");
45
35
 
46
- var _resize_observer = require("../observer/resize_observer");
36
+ var _code_block_controls = require("./code_block_controls");
47
37
 
48
- var _overlay_mask = require("../overlay_mask");
38
+ var _code_block_virtualized = require("./code_block_virtualized");
49
39
 
50
- var _utils = require("./utils");
40
+ var _code_block = require("./code_block.styles");
51
41
 
52
42
  var _react2 = require("@emotion/react");
53
43
 
@@ -67,21 +57,9 @@ var fontSizeToRowHeightMap = {
67
57
  m: 21,
68
58
  l: 24
69
59
  };
70
- var fontSizeToClassNameMap = {
71
- s: 'euiCodeBlock--fontSmall',
72
- m: 'euiCodeBlock--fontMedium',
73
- l: 'euiCodeBlock--fontLarge'
74
- };
75
- var FONT_SIZES = (0, _common.keysOf)(fontSizeToClassNameMap);
60
+ var FONT_SIZES = ['s', 'm', 'l'];
76
61
  exports.FONT_SIZES = FONT_SIZES;
77
- var paddingSizeToClassNameMap = {
78
- none: '',
79
- s: 'euiCodeBlock--paddingSmall',
80
- m: 'euiCodeBlock--paddingMedium',
81
- l: 'euiCodeBlock--paddingLarge'
82
- };
83
- var PADDING_SIZES = (0, _common.keysOf)(paddingSizeToClassNameMap); // This exclusive union enforces specific props based on isVirtualized
84
-
62
+ var PADDING_SIZES = ['none', 's', 'm', 'l'];
85
63
  exports.PADDING_SIZES = PADDING_SIZES;
86
64
 
87
65
  var EuiCodeBlock = function EuiCodeBlock(_ref) {
@@ -105,6 +83,7 @@ var EuiCodeBlock = function EuiCodeBlock(_ref) {
105
83
  lineNumbers = _ref$lineNumbers === void 0 ? false : _ref$lineNumbers,
106
84
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
107
85
 
86
+ var euiTheme = (0, _services.useEuiTheme)();
108
87
  var language = (0, _react.useMemo)(function () {
109
88
  return (0, _utils.checkSupportedLanguage)(_language);
110
89
  }, [_language]);
@@ -124,8 +103,8 @@ var EuiCodeBlock = function EuiCodeBlock(_ref) {
124
103
  return [];
125
104
  }
126
105
 
127
- return (0, _utils.highlightByLine)(children, language, lineNumbersConfig);
128
- }, [children, language, lineNumbersConfig]); // Used by `pre` when `isVirtualized=false` or `children` is not parsable
106
+ return (0, _utils.highlightByLine)(children, language, lineNumbersConfig, euiTheme);
107
+ }, [children, language, lineNumbersConfig, euiTheme]); // Used by `pre` when `isVirtualized=false` or `children` is not parsable
129
108
 
130
109
  var content = (0, _react.useMemo)(function () {
131
110
  return (0, _utils.getHtmlContent)(data, children);
@@ -134,305 +113,91 @@ var EuiCodeBlock = function EuiCodeBlock(_ref) {
134
113
  return !!(_isVirtualized && Array.isArray(data));
135
114
  }, [_isVirtualized, data]);
136
115
 
137
- var _useCopy = useCopy({
116
+ var _useCopy = (0, _code_block_copy.useCopy)({
138
117
  isCopyable: isCopyable,
139
118
  isVirtualized: isVirtualized,
140
119
  children: children
141
120
  }),
142
121
  innerTextRef = _useCopy.innerTextRef,
143
- showCopyButton = _useCopy.showCopyButton,
144
- textToCopy = _useCopy.textToCopy;
122
+ copyButton = _useCopy.copyButton;
145
123
 
146
- var _useOverflowDetection = useOverflowDetection(),
147
- setWrapperRef = _useOverflowDetection.setWrapperRef,
148
- tabIndex = _useOverflowDetection.tabIndex;
124
+ var _useOverflow = (0, _code_block_overflow.useOverflow)({
125
+ overflowHeight: overflowHeight
126
+ }),
127
+ setWrapperRef = _useOverflow.setWrapperRef,
128
+ tabIndex = _useOverflow.tabIndex,
129
+ overflowHeightStyles = _useOverflow.overflowHeightStyles;
149
130
 
150
131
  var combinedRef = (0, _services.useCombinedRefs)([innerTextRef, setWrapperRef]);
151
132
 
152
- var _useFullScreen = useFullScreen({
133
+ var _useFullScreen = (0, _code_block_full_screen.useFullScreen)({
153
134
  overflowHeight: overflowHeight
154
135
  }),
155
- showFullScreenButton = _useFullScreen.showFullScreenButton,
156
- onKeyDown = _useFullScreen.onKeyDown,
136
+ fullScreenButton = _useFullScreen.fullScreenButton,
157
137
  isFullScreen = _useFullScreen.isFullScreen,
158
- toggleFullScreen = _useFullScreen.toggleFullScreen; // Classes used in both fullscreen and non-fullscreen mode
159
-
160
-
161
- var wrapperClasses = (0, _classnames.default)(className, 'euiCodeBlock', {
162
- 'euiCodeBlock--hasControl': showCopyButton || showFullScreenButton,
163
- 'euiCodeBlock--hasBothControls': showCopyButton && showFullScreenButton,
164
- 'euiCodeBlock--hasLineNumbers': lineNumbersConfig.show
165
- }); // Classes used in non-fullscreen mode only
138
+ onKeyDown = _useFullScreen.onKeyDown;
139
+
140
+ var hasControls = !!(copyButton || fullScreenButton);
141
+ var hasBothControls = !!(copyButton && fullScreenButton);
142
+ var styles = (0, _code_block.euiCodeBlockStyles)(euiTheme);
143
+ var cssStyles = [styles.euiCodeBlock, styles[fontSize], transparentBackground && styles.transparentBackground, hasControls && (hasBothControls ? styles.hasBothControls[paddingSize] : styles.hasControls[paddingSize])];
144
+
145
+ var _useMemo = (0, _react.useMemo)(function () {
146
+ var isWhiteSpacePre = whiteSpace === 'pre' || isVirtualized;
147
+ var styles = (0, _code_block.euiCodeBlockPreStyles)(euiTheme);
148
+ var cssStyles = [styles.euiCodeBlock__pre, isWhiteSpacePre ? styles.whiteSpace.pre.pre : styles.whiteSpace.preWrap.preWrap];
149
+ var preProps = {
150
+ className: 'euiCodeBlock__pre',
151
+ css: [].concat(cssStyles, [styles.padding[paddingSize], hasControls && (isWhiteSpacePre ? styles.whiteSpace.pre.controlsOffset[paddingSize] : styles.whiteSpace.preWrap.controlsOffset[paddingSize])]),
152
+ tabIndex: isVirtualized ? 0 : tabIndex
153
+ };
154
+ var preFullscreenProps = {
155
+ className: 'euiCodeBlock__pre',
156
+ css: [].concat(cssStyles, [// Force fullscreen to use xl padding
157
+ styles.padding.xl, hasControls && (isWhiteSpacePre ? styles.whiteSpace.pre.controlsOffset.xl : styles.whiteSpace.preWrap.controlsOffset.xl)]),
158
+ tabIndex: 0,
159
+ onKeyDown: onKeyDown
160
+ };
161
+ return [preProps, preFullscreenProps];
162
+ }, [euiTheme, whiteSpace, isVirtualized, hasControls, paddingSize, onKeyDown, tabIndex]),
163
+ _useMemo2 = (0, _slicedToArray2.default)(_useMemo, 2),
164
+ preProps = _useMemo2[0],
165
+ preFullscreenProps = _useMemo2[1];
166
166
 
167
- var classes = (0, _classnames.default)(wrapperClasses, fontSizeToClassNameMap[fontSize], paddingSizeToClassNameMap[paddingSize], {
168
- 'euiCodeBlock--transparentBackground': transparentBackground
169
- });
170
167
  var codeProps = (0, _react.useMemo)(function () {
168
+ var styles = (0, _code_block.euiCodeBlockCodeStyles)(euiTheme);
169
+ var cssStyles = [styles.euiCodeBlock__code, isVirtualized && styles.isVirtualized];
171
170
  return _objectSpread({
172
171
  className: 'euiCodeBlock__code',
172
+ css: cssStyles,
173
173
  'data-code-language': language
174
174
  }, rest);
175
- }, [language, rest]);
176
- var preClasses = (0, _classnames.default)('euiCodeBlock__pre', {
177
- 'euiCodeBlock__pre--whiteSpacePre': whiteSpace === 'pre' || isVirtualized,
178
- 'euiCodeBlock__pre--whiteSpacePreWrap': whiteSpace === 'pre-wrap' && !isVirtualized,
179
- 'euiCodeBlock__pre--isVirtualized': isVirtualized
180
- });
181
- var preFullscreenProps = (0, _react.useMemo)(function () {
182
- return {
183
- className: preClasses,
184
- tabIndex: 0,
185
- onKeyDown: onKeyDown
186
- };
187
- }, [preClasses, onKeyDown]);
188
- var overflowHeightStyles = (0, _react.useMemo)(function () {
189
- if (overflowHeight) {
190
- var property = typeof overflowHeight === 'string' ? 'height' : 'maxHeight';
191
- return (0, _defineProperty2.default)({}, property, overflowHeight);
192
- }
193
-
194
- return {};
195
- }, [overflowHeight]);
196
- var wrapperProps = (0, _react.useMemo)(function () {
197
- return {
198
- className: classes,
199
- style: overflowHeightStyles
200
- };
201
- }, [classes, overflowHeightStyles]);
202
- var codeBlockControls = (0, _react.useMemo)(function () {
203
- if (showCopyButton || showFullScreenButton) {
204
- return (0, _react2.jsx)("div", {
205
- className: "euiCodeBlock__controls"
206
- }, showFullScreenButton && (0, _react2.jsx)(FullScreenButton, {
207
- isFullScreen: isFullScreen,
208
- toggleFullScreen: toggleFullScreen
209
- }), showCopyButton && (0, _react2.jsx)(CopyButton, {
210
- textToCopy: textToCopy
211
- }));
212
- }
213
- }, [isFullScreen, toggleFullScreen, showCopyButton, showFullScreenButton, textToCopy]);
214
- return (0, _react2.jsx)("div", wrapperProps, isVirtualized ? (0, _react2.jsx)(VirtualizedCodeBlock, {
175
+ }, [language, euiTheme, isVirtualized, rest]);
176
+ return (0, _react2.jsx)("div", {
177
+ css: cssStyles,
178
+ className: (0, _classnames.default)('euiCodeBlock', className),
179
+ style: overflowHeightStyles
180
+ }, isVirtualized ? (0, _react2.jsx)(_code_block_virtualized.EuiCodeBlockVirtualized, {
215
181
  data: data,
216
182
  rowHeight: fontSizeToRowHeightMap[fontSize],
217
183
  overflowHeight: overflowHeight,
218
- preProps: preFullscreenProps // Note: the virtualized codeblock always sets a tabIndex of 0
219
- ,
184
+ preProps: preProps,
220
185
  codeProps: codeProps
221
- }) : (0, _react2.jsx)("pre", {
186
+ }) : (0, _react2.jsx)("pre", (0, _extends2.default)({}, preProps, {
222
187
  ref: combinedRef,
223
- style: overflowHeightStyles,
224
- className: preClasses,
225
- tabIndex: tabIndex
226
- }, (0, _react2.jsx)("code", codeProps, content)), codeBlockControls, isFullScreen && (0, _react2.jsx)(FullScreenDisplay, {
227
- className: wrapperClasses
228
- }, isVirtualized ? (0, _react2.jsx)(VirtualizedCodeBlock, {
188
+ style: overflowHeightStyles
189
+ }), (0, _react2.jsx)("code", codeProps, content)), (0, _react2.jsx)(_code_block_controls.EuiCodeBlockControls, {
190
+ controls: [fullScreenButton, copyButton],
191
+ paddingSize: paddingSize
192
+ }), isFullScreen && (0, _react2.jsx)(_code_block_full_screen.EuiCodeBlockFullScreenWrapper, null, isVirtualized ? (0, _react2.jsx)(_code_block_virtualized.EuiCodeBlockVirtualized, {
229
193
  data: data,
230
194
  rowHeight: fontSizeToRowHeightMap.l,
231
195
  preProps: preFullscreenProps,
232
196
  codeProps: codeProps
233
- }) : (0, _react2.jsx)("pre", preFullscreenProps, (0, _react2.jsx)("code", codeProps, content)), codeBlockControls));
234
- };
235
- /**
236
- * Overflow logic
237
- *
238
- * Detects whether the code block overflows and returns a tabIndex of 0 if so,
239
- * which allows keyboard users to use the up/down arrow keys to scroll through
240
- * the container.
241
- */
242
-
243
-
244
- exports.EuiCodeBlock = EuiCodeBlock;
245
-
246
- var useOverflowDetection = function useOverflowDetection() {
247
- var _useState = (0, _react.useState)(null),
248
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
249
- wrapperRef = _useState2[0],
250
- setWrapperRef = _useState2[1];
251
-
252
- var _useState3 = (0, _react.useState)(-1),
253
- _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
254
- tabIndex = _useState4[0],
255
- setTabIndex = _useState4[1];
256
-
257
- var _useResizeObserver = (0, _resize_observer.useResizeObserver)(wrapperRef),
258
- width = _useResizeObserver.width,
259
- height = _useResizeObserver.height;
260
-
261
- var doesOverflow = function doesOverflow() {
262
- if (!wrapperRef) return;
263
- var clientWidth = wrapperRef.clientWidth,
264
- clientHeight = wrapperRef.clientHeight,
265
- scrollWidth = wrapperRef.scrollWidth,
266
- scrollHeight = wrapperRef.scrollHeight;
267
- var doesOverflow = scrollHeight > clientHeight || scrollWidth > clientWidth;
268
- setTabIndex(doesOverflow ? 0 : -1);
269
- };
270
-
271
- (0, _mutation_observer.useMutationObserver)(wrapperRef, doesOverflow, {
272
- subtree: true,
273
- childList: true
274
- });
275
- (0, _react.useEffect)(doesOverflow, [width, height, wrapperRef]);
276
- return {
277
- setWrapperRef: setWrapperRef,
278
- tabIndex: tabIndex
279
- };
280
- };
281
- /**
282
- * Copy logic
283
- */
284
-
285
-
286
- var CopyButton = function CopyButton(_ref3) {
287
- var textToCopy = _ref3.textToCopy;
288
- var copyButton = (0, _i18n.useEuiI18n)('euiCodeBlock.copyButton', 'Copy');
289
- return (0, _react2.jsx)("div", {
290
- className: "euiCodeBlock__copyButton"
291
- }, (0, _react2.jsx)(_copy.EuiCopy, {
292
- textToCopy: textToCopy
293
- }, function (copy) {
294
- return (0, _react2.jsx)(_button.EuiButtonIcon, {
295
- onClick: copy,
296
- iconType: "copyClipboard",
297
- color: "text",
298
- "aria-label": copyButton
299
- });
300
- }));
301
- };
302
-
303
- var useCopy = function useCopy(_ref4) {
304
- var isCopyable = _ref4.isCopyable,
305
- isVirtualized = _ref4.isVirtualized,
306
- children = _ref4.children;
307
-
308
- var _useInnerText = (0, _inner_text.useInnerText)(''),
309
- _useInnerText2 = (0, _slicedToArray2.default)(_useInnerText, 2),
310
- innerTextRef = _useInnerText2[0],
311
- _innerText = _useInnerText2[1];
312
-
313
- var innerText = (0, _react.useMemo)(function () {
314
- return (_innerText === null || _innerText === void 0 ? void 0 : _innerText.replace(/[\r\n?]{2}|\n\n/g, '\n')) || '';
315
- }, [_innerText]);
316
- var textToCopy = isVirtualized ? "".concat(children) : innerText; // Virtualized code blocks do not have inner text
317
-
318
- var showCopyButton = isCopyable && textToCopy;
319
- return {
320
- innerTextRef: innerTextRef,
321
- showCopyButton: showCopyButton,
322
- textToCopy: textToCopy
323
- };
324
- };
325
- /**
326
- * Fullscreen logic
327
- */
328
-
329
-
330
- var FullScreenButton = function FullScreenButton(_ref5) {
331
- var isFullScreen = _ref5.isFullScreen,
332
- toggleFullScreen = _ref5.toggleFullScreen;
333
-
334
- var _useEuiI18n = (0, _i18n.useEuiI18n)(['euiCodeBlock.fullscreenCollapse', 'euiCodeBlock.fullscreenExpand'], ['Collapse', 'Expand']),
335
- _useEuiI18n2 = (0, _slicedToArray2.default)(_useEuiI18n, 2),
336
- fullscreenCollapse = _useEuiI18n2[0],
337
- fullscreenExpand = _useEuiI18n2[1];
338
-
339
- return (0, _react2.jsx)(_button.EuiButtonIcon, {
340
- className: "euiCodeBlock__fullScreenButton",
341
- onClick: toggleFullScreen,
342
- iconType: isFullScreen ? 'fullScreenExit' : 'fullScreen',
343
- color: "text",
344
- "aria-label": isFullScreen ? fullscreenCollapse : fullscreenExpand
345
- });
346
- };
347
-
348
- var FullScreenDisplay = function FullScreenDisplay(_ref6) {
349
- var children = _ref6.children,
350
- className = _ref6.className;
351
- // Force fullscreen to use large font and padding.
352
- var fullScreenClasses = (0, _classnames.default)(className, 'euiCodeBlock--fontLarge', 'euiCodeBlock--paddingLarge', 'euiCodeBlock-isFullScreen'); // Attaches to the body because of EuiOverlayMask's React portal usage.
353
-
354
- return (0, _react2.jsx)(_overlay_mask.EuiOverlayMask, null, (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
355
- clickOutsideDisables: true
356
- }, (0, _react2.jsx)("div", {
357
- className: fullScreenClasses
358
- }, children)));
359
- };
360
-
361
- var useFullScreen = function useFullScreen(_ref7) {
362
- var overflowHeight = _ref7.overflowHeight;
363
-
364
- var _useState5 = (0, _react.useState)(false),
365
- _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
366
- isFullScreen = _useState6[0],
367
- setIsFullScreen = _useState6[1];
368
-
369
- var toggleFullScreen = (0, _react.useCallback)(function () {
370
- setIsFullScreen(function (isFullScreen) {
371
- return !isFullScreen;
372
- });
373
- }, []);
374
- var onKeyDown = (0, _react.useCallback)(function (event) {
375
- if (event.key === _services.keys.ESCAPE) {
376
- event.preventDefault();
377
- event.stopPropagation();
378
- setIsFullScreen(false);
379
- }
380
- }, []);
381
- var showFullScreenButton = !!overflowHeight;
382
- return {
383
- showFullScreenButton: showFullScreenButton,
384
- isFullScreen: isFullScreen,
385
- toggleFullScreen: toggleFullScreen,
386
- onKeyDown: onKeyDown
387
- };
388
- };
389
- /**
390
- * Virtualization logic
391
- */
392
-
393
-
394
- var ListRow = function ListRow(_ref8) {
395
- var data = _ref8.data,
396
- index = _ref8.index,
397
- style = _ref8.style;
398
- var row = data[index];
399
- row.properties.style = style;
400
- return (0, _utils.nodeToHtml)(row, index, data, 0);
197
+ }) : (0, _react2.jsx)("pre", preFullscreenProps, (0, _react2.jsx)("code", codeProps, content)), (0, _react2.jsx)(_code_block_controls.EuiCodeBlockControls, {
198
+ controls: [fullScreenButton, copyButton],
199
+ paddingSize: "l"
200
+ })));
401
201
  };
402
202
 
403
- var VirtualizedCodeBlock = function VirtualizedCodeBlock(_ref9) {
404
- var data = _ref9.data,
405
- rowHeight = _ref9.rowHeight,
406
- overflowHeight = _ref9.overflowHeight,
407
- preProps = _ref9.preProps,
408
- codeProps = _ref9.codeProps;
409
- var VirtualizedOuterElement = (0, _react.useMemo)(function () {
410
- return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
411
- return (0, _react2.jsx)("pre", (0, _extends2.default)({}, props, {
412
- ref: ref
413
- }, preProps));
414
- });
415
- }, [preProps]);
416
- var VirtualizedInnerElement = (0, _react.useMemo)(function () {
417
- return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
418
- return (0, _react2.jsx)("code", (0, _extends2.default)({}, props, {
419
- ref: ref
420
- }, codeProps));
421
- });
422
- }, [codeProps]);
423
- return (0, _react2.jsx)(_auto_sizer.EuiAutoSizer, {
424
- disableHeight: typeof overflowHeight === 'number'
425
- }, function (_ref10) {
426
- var height = _ref10.height,
427
- width = _ref10.width;
428
- return (0, _react2.jsx)(_reactWindow.FixedSizeList, {
429
- height: height !== null && height !== void 0 ? height : overflowHeight,
430
- width: width,
431
- itemData: data,
432
- itemSize: rowHeight,
433
- itemCount: data.length,
434
- outerElementType: VirtualizedOuterElement,
435
- innerElementType: VirtualizedInnerElement
436
- }, ListRow);
437
- });
438
- };
203
+ exports.EuiCodeBlock = EuiCodeBlock;