@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
@@ -400,7 +400,7 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
400
400
  sortName = _this$state2.sortName,
401
401
  pageIndex = _this$state2.pageIndex,
402
402
  pageSize = _this$state2.pageSize;
403
- var matchingItems = query ? EuiSearchBar.Query.execute(query, items, executeQueryOptions) : items;
403
+ var matchingItems = query !== null && (executeQueryOptions === null || executeQueryOptions === void 0 ? void 0 : executeQueryOptions.enabled) !== false ? EuiSearchBar.Query.execute(query, items, executeQueryOptions) : items;
404
404
  var sortedItems = sortName ? matchingItems.slice(0) // avoid mutating the source array
405
405
  .sort(this.getItemSorter()) // sort, causes mutation
406
406
  : matchingItems;
@@ -1204,7 +1204,13 @@ EuiInMemoryTable.propTypes = {
1204
1204
  executeQueryOptions: PropTypes.shape({
1205
1205
  defaultFields: PropTypes.arrayOf(PropTypes.string.isRequired),
1206
1206
  isClauseMatcher: PropTypes.func,
1207
- explain: PropTypes.bool
1207
+ explain: PropTypes.bool,
1208
+
1209
+ /**
1210
+ * When the search bar Query is controlled and passed to the `search` prop it is by default executed against the items passed to the table to filter them out.
1211
+ * If the filtering is already done before passing the `items` to the table we can disable the execution by setting `enabled` to `false`.
1212
+ */
1213
+ enabled: PropTypes.bool
1208
1214
  }),
1209
1215
 
1210
1216
  /**
@@ -18,6 +18,8 @@ import PropTypes from "prop-types";
18
18
  import { highlight } from 'refractor';
19
19
  import classNames from 'classnames';
20
20
  import { DEFAULT_LANGUAGE, checkSupportedLanguage, getHtmlContent } from './utils';
21
+ import { useEuiTheme } from '../../services';
22
+ import { euiCodeStyles } from './code.styles';
21
23
  import { jsx as ___EmotionJSX } from "@emotion/react";
22
24
  export var EuiCode = function EuiCode(_ref) {
23
25
  var _ref$transparentBackg = _ref.transparentBackground,
@@ -41,11 +43,13 @@ export var EuiCode = function EuiCode(_ref) {
41
43
  var content = useMemo(function () {
42
44
  return getHtmlContent(data, children);
43
45
  }, [data, children]);
44
- var classes = classNames('euiCode', {
45
- 'euiCode--transparentBackground': transparentBackground
46
- }, className);
46
+ var classes = classNames('euiCode', className);
47
+ var euiTheme = useEuiTheme();
48
+ var styles = euiCodeStyles(euiTheme);
49
+ var cssStyles = [styles.euiCode, transparentBackground && styles.transparentBackground];
47
50
  return ___EmotionJSX("code", _extends({
48
51
  className: classes,
52
+ css: cssStyles,
49
53
  "data-code-language": language
50
54
  }, rest), content);
51
55
  };
@@ -0,0 +1,32 @@
1
+ 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)."; }
2
+
3
+ /*
4
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
5
+ * or more contributor license agreements. Licensed under the Elastic License
6
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
7
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
8
+ * Side Public License, v 1.
9
+ */
10
+ import { css } from '@emotion/react';
11
+ import { euiCodeSyntaxColors, euiCodeSyntaxTokens } from './code_syntax.styles';
12
+
13
+ var _ref = process.env.NODE_ENV === "production" ? {
14
+ name: "gfiv3z-transparentBackground",
15
+ styles: "background:transparent;label:transparentBackground;"
16
+ } : {
17
+ name: "gfiv3z-transparentBackground",
18
+ styles: "background:transparent;label:transparentBackground;",
19
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
20
+ };
21
+
22
+ export var euiCodeStyles = function euiCodeStyles(euiThemeContext) {
23
+ var euiTheme = euiThemeContext.euiTheme;
24
+ var euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);
25
+ return {
26
+ /*
27
+ * 1. Size the code against the text its embedded within.
28
+ */
29
+ euiCode: /*#__PURE__*/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, ";", euiCodeSyntaxTokens(euiThemeContext), ";;label:euiCode;"),
30
+ transparentBackground: _ref
31
+ };
32
+ };
@@ -33,22 +33,17 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
33
33
  * in compliance with, at your election, the Elastic License 2.0 or the Server
34
34
  * Side Public License, v 1.
35
35
  */
36
- import React, { forwardRef, useEffect, useMemo, useState, useCallback } from 'react';
36
+ import React, { useMemo } from 'react';
37
37
  import PropTypes from "prop-types";
38
38
  import classNames from 'classnames';
39
- import { FixedSizeList } from 'react-window';
40
- import { keys, useCombinedRefs } from '../../services';
41
- import { EuiAutoSizer } from '../auto_sizer';
42
- import { EuiButtonIcon } from '../button';
43
- import { keysOf } from '../common';
44
- import { EuiCopy } from '../copy';
45
- import { EuiFocusTrap } from '../focus_trap';
46
- import { useEuiI18n } from '../i18n';
47
- import { useInnerText } from '../inner_text';
48
- import { useMutationObserver } from '../observer/mutation_observer';
49
- import { useResizeObserver } from '../observer/resize_observer';
50
- import { EuiOverlayMask } from '../overlay_mask';
51
- import { DEFAULT_LANGUAGE, checkSupportedLanguage, getHtmlContent, nodeToHtml, highlightByLine } from './utils'; // Based on observed line height for non-virtualized code blocks
39
+ import { useCombinedRefs, useEuiTheme } from '../../services';
40
+ import { DEFAULT_LANGUAGE, checkSupportedLanguage, getHtmlContent, highlightByLine } from './utils';
41
+ import { useOverflow } from './code_block_overflow';
42
+ import { useCopy } from './code_block_copy';
43
+ import { useFullScreen, EuiCodeBlockFullScreenWrapper } from './code_block_full_screen';
44
+ import { EuiCodeBlockControls } from './code_block_controls';
45
+ import { EuiCodeBlockVirtualized } from './code_block_virtualized';
46
+ import { euiCodeBlockStyles, euiCodeBlockPreStyles, euiCodeBlockCodeStyles } from './code_block.styles'; // Based on observed line height for non-virtualized code blocks
52
47
 
53
48
  import { jsx as ___EmotionJSX } from "@emotion/react";
54
49
  var fontSizeToRowHeightMap = {
@@ -56,20 +51,8 @@ var fontSizeToRowHeightMap = {
56
51
  m: 21,
57
52
  l: 24
58
53
  };
59
- var fontSizeToClassNameMap = {
60
- s: 'euiCodeBlock--fontSmall',
61
- m: 'euiCodeBlock--fontMedium',
62
- l: 'euiCodeBlock--fontLarge'
63
- };
64
- export var FONT_SIZES = keysOf(fontSizeToClassNameMap);
65
- var paddingSizeToClassNameMap = {
66
- none: '',
67
- s: 'euiCodeBlock--paddingSmall',
68
- m: 'euiCodeBlock--paddingMedium',
69
- l: 'euiCodeBlock--paddingLarge'
70
- };
71
- export var PADDING_SIZES = keysOf(paddingSizeToClassNameMap); // This exclusive union enforces specific props based on isVirtualized
72
-
54
+ export var FONT_SIZES = ['s', 'm', 'l'];
55
+ export var PADDING_SIZES = ['none', 's', 'm', 'l'];
73
56
  export var EuiCodeBlock = function EuiCodeBlock(_ref) {
74
57
  var _ref$language = _ref.language,
75
58
  _language = _ref$language === void 0 ? DEFAULT_LANGUAGE : _ref$language,
@@ -91,6 +74,7 @@ export var EuiCodeBlock = function EuiCodeBlock(_ref) {
91
74
  lineNumbers = _ref$lineNumbers === void 0 ? false : _ref$lineNumbers,
92
75
  rest = _objectWithoutProperties(_ref, _excluded);
93
76
 
77
+ var euiTheme = useEuiTheme();
94
78
  var language = useMemo(function () {
95
79
  return checkSupportedLanguage(_language);
96
80
  }, [_language]);
@@ -110,8 +94,8 @@ export var EuiCodeBlock = function EuiCodeBlock(_ref) {
110
94
  return [];
111
95
  }
112
96
 
113
- return highlightByLine(children, language, lineNumbersConfig);
114
- }, [children, language, lineNumbersConfig]); // Used by `pre` when `isVirtualized=false` or `children` is not parsable
97
+ return highlightByLine(children, language, lineNumbersConfig, euiTheme);
98
+ }, [children, language, lineNumbersConfig, euiTheme]); // Used by `pre` when `isVirtualized=false` or `children` is not parsable
115
99
 
116
100
  var content = useMemo(function () {
117
101
  return getHtmlContent(data, children);
@@ -126,106 +110,86 @@ export var EuiCodeBlock = function EuiCodeBlock(_ref) {
126
110
  children: children
127
111
  }),
128
112
  innerTextRef = _useCopy.innerTextRef,
129
- showCopyButton = _useCopy.showCopyButton,
130
- textToCopy = _useCopy.textToCopy;
113
+ copyButton = _useCopy.copyButton;
131
114
 
132
- var _useOverflowDetection = useOverflowDetection(),
133
- setWrapperRef = _useOverflowDetection.setWrapperRef,
134
- tabIndex = _useOverflowDetection.tabIndex;
115
+ var _useOverflow = useOverflow({
116
+ overflowHeight: overflowHeight
117
+ }),
118
+ setWrapperRef = _useOverflow.setWrapperRef,
119
+ tabIndex = _useOverflow.tabIndex,
120
+ overflowHeightStyles = _useOverflow.overflowHeightStyles;
135
121
 
136
122
  var combinedRef = useCombinedRefs([innerTextRef, setWrapperRef]);
137
123
 
138
124
  var _useFullScreen = useFullScreen({
139
125
  overflowHeight: overflowHeight
140
126
  }),
141
- showFullScreenButton = _useFullScreen.showFullScreenButton,
142
- onKeyDown = _useFullScreen.onKeyDown,
127
+ fullScreenButton = _useFullScreen.fullScreenButton,
143
128
  isFullScreen = _useFullScreen.isFullScreen,
144
- toggleFullScreen = _useFullScreen.toggleFullScreen; // Classes used in both fullscreen and non-fullscreen mode
145
-
146
-
147
- var wrapperClasses = classNames(className, 'euiCodeBlock', {
148
- 'euiCodeBlock--hasControl': showCopyButton || showFullScreenButton,
149
- 'euiCodeBlock--hasBothControls': showCopyButton && showFullScreenButton,
150
- 'euiCodeBlock--hasLineNumbers': lineNumbersConfig.show
151
- }); // Classes used in non-fullscreen mode only
129
+ onKeyDown = _useFullScreen.onKeyDown;
130
+
131
+ var hasControls = !!(copyButton || fullScreenButton);
132
+ var hasBothControls = !!(copyButton && fullScreenButton);
133
+ var styles = euiCodeBlockStyles(euiTheme);
134
+ var cssStyles = [styles.euiCodeBlock, styles[fontSize], transparentBackground && styles.transparentBackground, hasControls && (hasBothControls ? styles.hasBothControls[paddingSize] : styles.hasControls[paddingSize])];
135
+
136
+ var _useMemo = useMemo(function () {
137
+ var isWhiteSpacePre = whiteSpace === 'pre' || isVirtualized;
138
+ var styles = euiCodeBlockPreStyles(euiTheme);
139
+ var cssStyles = [styles.euiCodeBlock__pre, isWhiteSpacePre ? styles.whiteSpace.pre.pre : styles.whiteSpace.preWrap.preWrap];
140
+ var preProps = {
141
+ className: 'euiCodeBlock__pre',
142
+ css: [].concat(cssStyles, [styles.padding[paddingSize], hasControls && (isWhiteSpacePre ? styles.whiteSpace.pre.controlsOffset[paddingSize] : styles.whiteSpace.preWrap.controlsOffset[paddingSize])]),
143
+ tabIndex: isVirtualized ? 0 : tabIndex
144
+ };
145
+ var preFullscreenProps = {
146
+ className: 'euiCodeBlock__pre',
147
+ css: [].concat(cssStyles, [// Force fullscreen to use xl padding
148
+ styles.padding.xl, hasControls && (isWhiteSpacePre ? styles.whiteSpace.pre.controlsOffset.xl : styles.whiteSpace.preWrap.controlsOffset.xl)]),
149
+ tabIndex: 0,
150
+ onKeyDown: onKeyDown
151
+ };
152
+ return [preProps, preFullscreenProps];
153
+ }, [euiTheme, whiteSpace, isVirtualized, hasControls, paddingSize, onKeyDown, tabIndex]),
154
+ _useMemo2 = _slicedToArray(_useMemo, 2),
155
+ preProps = _useMemo2[0],
156
+ preFullscreenProps = _useMemo2[1];
152
157
 
153
- var classes = classNames(wrapperClasses, fontSizeToClassNameMap[fontSize], paddingSizeToClassNameMap[paddingSize], {
154
- 'euiCodeBlock--transparentBackground': transparentBackground
155
- });
156
158
  var codeProps = useMemo(function () {
159
+ var styles = euiCodeBlockCodeStyles(euiTheme);
160
+ var cssStyles = [styles.euiCodeBlock__code, isVirtualized && styles.isVirtualized];
157
161
  return _objectSpread({
158
162
  className: 'euiCodeBlock__code',
163
+ css: cssStyles,
159
164
  'data-code-language': language
160
165
  }, rest);
161
- }, [language, rest]);
162
- var preClasses = classNames('euiCodeBlock__pre', {
163
- 'euiCodeBlock__pre--whiteSpacePre': whiteSpace === 'pre' || isVirtualized,
164
- 'euiCodeBlock__pre--whiteSpacePreWrap': whiteSpace === 'pre-wrap' && !isVirtualized,
165
- 'euiCodeBlock__pre--isVirtualized': isVirtualized
166
- });
167
- var preFullscreenProps = useMemo(function () {
168
- return {
169
- className: preClasses,
170
- tabIndex: 0,
171
- onKeyDown: onKeyDown
172
- };
173
- }, [preClasses, onKeyDown]);
174
- var overflowHeightStyles = useMemo(function () {
175
- if (overflowHeight) {
176
- var property = typeof overflowHeight === 'string' ? 'height' : 'maxHeight';
177
- return _defineProperty({}, property, overflowHeight);
178
- }
179
-
180
- return {};
181
- }, [overflowHeight]);
182
- var wrapperProps = useMemo(function () {
183
- return {
184
- className: classes,
185
- style: overflowHeightStyles
186
- };
187
- }, [classes, overflowHeightStyles]);
188
- var codeBlockControls = useMemo(function () {
189
- if (showCopyButton || showFullScreenButton) {
190
- return ___EmotionJSX("div", {
191
- className: "euiCodeBlock__controls"
192
- }, showFullScreenButton && ___EmotionJSX(FullScreenButton, {
193
- isFullScreen: isFullScreen,
194
- toggleFullScreen: toggleFullScreen
195
- }), showCopyButton && ___EmotionJSX(CopyButton, {
196
- textToCopy: textToCopy
197
- }));
198
- }
199
- }, [isFullScreen, toggleFullScreen, showCopyButton, showFullScreenButton, textToCopy]);
200
- return ___EmotionJSX("div", wrapperProps, isVirtualized ? ___EmotionJSX(VirtualizedCodeBlock, {
166
+ }, [language, euiTheme, isVirtualized, rest]);
167
+ return ___EmotionJSX("div", {
168
+ css: cssStyles,
169
+ className: classNames('euiCodeBlock', className),
170
+ style: overflowHeightStyles
171
+ }, isVirtualized ? ___EmotionJSX(EuiCodeBlockVirtualized, {
201
172
  data: data,
202
173
  rowHeight: fontSizeToRowHeightMap[fontSize],
203
174
  overflowHeight: overflowHeight,
204
- preProps: preFullscreenProps // Note: the virtualized codeblock always sets a tabIndex of 0
205
- ,
175
+ preProps: preProps,
206
176
  codeProps: codeProps
207
- }) : ___EmotionJSX("pre", {
177
+ }) : ___EmotionJSX("pre", _extends({}, preProps, {
208
178
  ref: combinedRef,
209
- style: overflowHeightStyles,
210
- className: preClasses,
211
- tabIndex: tabIndex
212
- }, ___EmotionJSX("code", codeProps, content)), codeBlockControls, isFullScreen && ___EmotionJSX(FullScreenDisplay, {
213
- className: wrapperClasses
214
- }, isVirtualized ? ___EmotionJSX(VirtualizedCodeBlock, {
179
+ style: overflowHeightStyles
180
+ }), ___EmotionJSX("code", codeProps, content)), ___EmotionJSX(EuiCodeBlockControls, {
181
+ controls: [fullScreenButton, copyButton],
182
+ paddingSize: paddingSize
183
+ }), isFullScreen && ___EmotionJSX(EuiCodeBlockFullScreenWrapper, null, isVirtualized ? ___EmotionJSX(EuiCodeBlockVirtualized, {
215
184
  data: data,
216
185
  rowHeight: fontSizeToRowHeightMap.l,
217
186
  preProps: preFullscreenProps,
218
187
  codeProps: codeProps
219
- }) : ___EmotionJSX("pre", preFullscreenProps, ___EmotionJSX("code", codeProps, content)), codeBlockControls));
188
+ }) : ___EmotionJSX("pre", preFullscreenProps, ___EmotionJSX("code", codeProps, content)), ___EmotionJSX(EuiCodeBlockControls, {
189
+ controls: [fullScreenButton, copyButton],
190
+ paddingSize: "l"
191
+ })));
220
192
  };
221
- /**
222
- * Overflow logic
223
- *
224
- * Detects whether the code block overflows and returns a tabIndex of 0 if so,
225
- * which allows keyboard users to use the up/down arrow keys to scroll through
226
- * the container.
227
- */
228
-
229
193
  EuiCodeBlock.propTypes = {
230
194
  className: PropTypes.string,
231
195
  "aria-label": PropTypes.string,
@@ -238,8 +202,8 @@ EuiCodeBlock.propTypes = {
238
202
  */
239
203
  language: PropTypes.string,
240
204
  transparentBackground: PropTypes.bool,
241
- paddingSize: PropTypes.oneOf(["none", "s", "m", "l"]),
242
- fontSize: PropTypes.oneOf(["s", "m", "l"]),
205
+ paddingSize: PropTypes.any,
206
+ fontSize: PropTypes.any,
243
207
 
244
208
  /**
245
209
  * Specify how `white-space` inside the element is handled.
@@ -278,211 +242,4 @@ EuiCodeBlock.propTypes = {
278
242
  * `whiteSpace` can only be `pre`.
279
243
  */
280
244
  isVirtualized: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOfType([PropTypes.oneOf([true]).isRequired, PropTypes.oneOf([false])])])
281
- };
282
-
283
- var useOverflowDetection = function useOverflowDetection() {
284
- var _useState = useState(null),
285
- _useState2 = _slicedToArray(_useState, 2),
286
- wrapperRef = _useState2[0],
287
- setWrapperRef = _useState2[1];
288
-
289
- var _useState3 = useState(-1),
290
- _useState4 = _slicedToArray(_useState3, 2),
291
- tabIndex = _useState4[0],
292
- setTabIndex = _useState4[1];
293
-
294
- var _useResizeObserver = useResizeObserver(wrapperRef),
295
- width = _useResizeObserver.width,
296
- height = _useResizeObserver.height;
297
-
298
- var doesOverflow = function doesOverflow() {
299
- if (!wrapperRef) return;
300
- var clientWidth = wrapperRef.clientWidth,
301
- clientHeight = wrapperRef.clientHeight,
302
- scrollWidth = wrapperRef.scrollWidth,
303
- scrollHeight = wrapperRef.scrollHeight;
304
- var doesOverflow = scrollHeight > clientHeight || scrollWidth > clientWidth;
305
- setTabIndex(doesOverflow ? 0 : -1);
306
- };
307
-
308
- useMutationObserver(wrapperRef, doesOverflow, {
309
- subtree: true,
310
- childList: true
311
- });
312
- useEffect(doesOverflow, [width, height, wrapperRef]);
313
- return {
314
- setWrapperRef: setWrapperRef,
315
- tabIndex: tabIndex
316
- };
317
- };
318
- /**
319
- * Copy logic
320
- */
321
-
322
-
323
- var CopyButton = function CopyButton(_ref3) {
324
- var textToCopy = _ref3.textToCopy;
325
- var copyButton = useEuiI18n('euiCodeBlock.copyButton', 'Copy');
326
- return ___EmotionJSX("div", {
327
- className: "euiCodeBlock__copyButton"
328
- }, ___EmotionJSX(EuiCopy, {
329
- textToCopy: textToCopy
330
- }, function (copy) {
331
- return ___EmotionJSX(EuiButtonIcon, {
332
- onClick: copy,
333
- iconType: "copyClipboard",
334
- color: "text",
335
- "aria-label": copyButton
336
- });
337
- }));
338
- };
339
-
340
- CopyButton.propTypes = {
341
- textToCopy: PropTypes.string.isRequired
342
- };
343
-
344
- var useCopy = function useCopy(_ref4) {
345
- var isCopyable = _ref4.isCopyable,
346
- isVirtualized = _ref4.isVirtualized,
347
- children = _ref4.children;
348
-
349
- var _useInnerText = useInnerText(''),
350
- _useInnerText2 = _slicedToArray(_useInnerText, 2),
351
- innerTextRef = _useInnerText2[0],
352
- _innerText = _useInnerText2[1];
353
-
354
- var innerText = useMemo(function () {
355
- return (_innerText === null || _innerText === void 0 ? void 0 : _innerText.replace(/[\r\n?]{2}|\n\n/g, '\n')) || '';
356
- }, [_innerText]);
357
- var textToCopy = isVirtualized ? "".concat(children) : innerText; // Virtualized code blocks do not have inner text
358
-
359
- var showCopyButton = isCopyable && textToCopy;
360
- return {
361
- innerTextRef: innerTextRef,
362
- showCopyButton: showCopyButton,
363
- textToCopy: textToCopy
364
- };
365
- };
366
- /**
367
- * Fullscreen logic
368
- */
369
-
370
-
371
- var FullScreenButton = function FullScreenButton(_ref5) {
372
- var isFullScreen = _ref5.isFullScreen,
373
- toggleFullScreen = _ref5.toggleFullScreen;
374
-
375
- var _useEuiI18n = useEuiI18n(['euiCodeBlock.fullscreenCollapse', 'euiCodeBlock.fullscreenExpand'], ['Collapse', 'Expand']),
376
- _useEuiI18n2 = _slicedToArray(_useEuiI18n, 2),
377
- fullscreenCollapse = _useEuiI18n2[0],
378
- fullscreenExpand = _useEuiI18n2[1];
379
-
380
- return ___EmotionJSX(EuiButtonIcon, {
381
- className: "euiCodeBlock__fullScreenButton",
382
- onClick: toggleFullScreen,
383
- iconType: isFullScreen ? 'fullScreenExit' : 'fullScreen',
384
- color: "text",
385
- "aria-label": isFullScreen ? fullscreenCollapse : fullscreenExpand
386
- });
387
- };
388
-
389
- FullScreenButton.propTypes = {
390
- isFullScreen: PropTypes.bool.isRequired,
391
- toggleFullScreen: PropTypes.func.isRequired
392
- };
393
-
394
- var FullScreenDisplay = function FullScreenDisplay(_ref6) {
395
- var children = _ref6.children,
396
- className = _ref6.className;
397
- // Force fullscreen to use large font and padding.
398
- var fullScreenClasses = classNames(className, 'euiCodeBlock--fontLarge', 'euiCodeBlock--paddingLarge', 'euiCodeBlock-isFullScreen'); // Attaches to the body because of EuiOverlayMask's React portal usage.
399
-
400
- return ___EmotionJSX(EuiOverlayMask, null, ___EmotionJSX(EuiFocusTrap, {
401
- clickOutsideDisables: true
402
- }, ___EmotionJSX("div", {
403
- className: fullScreenClasses
404
- }, children)));
405
- };
406
-
407
- FullScreenDisplay.propTypes = {
408
- className: PropTypes.string.isRequired
409
- };
410
-
411
- var useFullScreen = function useFullScreen(_ref7) {
412
- var overflowHeight = _ref7.overflowHeight;
413
-
414
- var _useState5 = useState(false),
415
- _useState6 = _slicedToArray(_useState5, 2),
416
- isFullScreen = _useState6[0],
417
- setIsFullScreen = _useState6[1];
418
-
419
- var toggleFullScreen = useCallback(function () {
420
- setIsFullScreen(function (isFullScreen) {
421
- return !isFullScreen;
422
- });
423
- }, []);
424
- var onKeyDown = useCallback(function (event) {
425
- if (event.key === keys.ESCAPE) {
426
- event.preventDefault();
427
- event.stopPropagation();
428
- setIsFullScreen(false);
429
- }
430
- }, []);
431
- var showFullScreenButton = !!overflowHeight;
432
- return {
433
- showFullScreenButton: showFullScreenButton,
434
- isFullScreen: isFullScreen,
435
- toggleFullScreen: toggleFullScreen,
436
- onKeyDown: onKeyDown
437
- };
438
- };
439
- /**
440
- * Virtualization logic
441
- */
442
-
443
-
444
- var ListRow = function ListRow(_ref8) {
445
- var data = _ref8.data,
446
- index = _ref8.index,
447
- style = _ref8.style;
448
- var row = data[index];
449
- row.properties.style = style;
450
- return nodeToHtml(row, index, data, 0);
451
- };
452
-
453
- var VirtualizedCodeBlock = function VirtualizedCodeBlock(_ref9) {
454
- var data = _ref9.data,
455
- rowHeight = _ref9.rowHeight,
456
- overflowHeight = _ref9.overflowHeight,
457
- preProps = _ref9.preProps,
458
- codeProps = _ref9.codeProps;
459
- var VirtualizedOuterElement = useMemo(function () {
460
- return /*#__PURE__*/forwardRef(function (props, ref) {
461
- return ___EmotionJSX("pre", _extends({}, props, {
462
- ref: ref
463
- }, preProps));
464
- });
465
- }, [preProps]);
466
- var VirtualizedInnerElement = useMemo(function () {
467
- return /*#__PURE__*/forwardRef(function (props, ref) {
468
- return ___EmotionJSX("code", _extends({}, props, {
469
- ref: ref
470
- }, codeProps));
471
- });
472
- }, [codeProps]);
473
- return ___EmotionJSX(EuiAutoSizer, {
474
- disableHeight: typeof overflowHeight === 'number'
475
- }, function (_ref10) {
476
- var height = _ref10.height,
477
- width = _ref10.width;
478
- return ___EmotionJSX(FixedSizeList, {
479
- height: height !== null && height !== void 0 ? height : overflowHeight,
480
- width: width,
481
- itemData: data,
482
- itemSize: rowHeight,
483
- itemCount: data.length,
484
- outerElementType: VirtualizedOuterElement,
485
- innerElementType: VirtualizedInnerElement
486
- }, ListRow);
487
- });
488
245
  };