@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.
- package/dist/eui_theme_dark.css +0 -375
- package/dist/eui_theme_dark.json +0 -27
- package/dist/eui_theme_dark.json.d.ts +0 -27
- package/dist/eui_theme_dark.min.css +1 -1
- package/dist/eui_theme_light.css +0 -375
- package/dist/eui_theme_light.json +0 -27
- package/dist/eui_theme_light.json.d.ts +0 -27
- package/dist/eui_theme_light.min.css +1 -1
- package/es/components/basic_table/in_memory_table.js +8 -2
- package/es/components/code/code.js +7 -3
- package/es/components/code/code.styles.js +32 -0
- package/es/components/code/code_block.js +72 -315
- package/es/components/code/code_block.styles.js +153 -0
- package/es/components/code/code_block_controls.js +29 -0
- package/es/components/code/code_block_controls.styles.js +43 -0
- package/es/components/code/code_block_copy.js +65 -0
- package/es/components/code/code_block_full_screen.js +90 -0
- package/es/components/code/code_block_line.styles.js +49 -0
- package/es/components/code/code_block_overflow.js +78 -0
- package/es/components/code/code_block_virtualized.js +59 -0
- package/es/components/code/code_syntax.styles.js +43 -0
- package/es/components/code/utils.js +43 -37
- package/es/components/collapsible_nav/collapsible_nav.js +0 -5
- package/es/components/overlay_mask/overlay_mask.js +8 -14
- package/es/components/overlay_mask/overlay_mask.styles.js +4 -14
- package/es/components/overlay_mask/overlay_mask_body.styles.js +18 -0
- package/es/components/provider/provider.js +1 -5
- package/es/components/resizable_container/helpers.js +2 -2
- package/es/components/resizable_container/resizable_container.js +6 -9
- package/es/components/resizable_container/resizable_container.styles.js +28 -0
- package/es/components/resizable_container/resizable_panel.js +25 -48
- package/es/components/resizable_container/resizable_panel.styles.js +69 -0
- package/es/components/search_bar/query/ast.js +14 -3
- package/es/components/tool_tip/tool_tip.js +3 -2
- package/es/components/tool_tip/tool_tip.styles.js +17 -22
- package/es/components/tool_tip/tool_tip_arrow.js +17 -3
- package/es/components/tool_tip/tool_tip_popover.js +7 -7
- package/es/components/tour/tour.styles.js +4 -3
- package/es/components/tour/tour_step.js +7 -5
- package/es/global_styling/functions/logicals.js +5 -3
- package/es/global_styling/functions/math.js +37 -19
- package/es/global_styling/mixins/_padding.js +13 -9
- package/eui.d.ts +291 -37
- package/i18ntokens.json +22 -22
- package/lib/components/basic_table/in_memory_table.js +8 -2
- package/lib/components/code/code.js +9 -3
- package/lib/components/code/code.styles.js +35 -0
- package/lib/components/code/code_block.js +72 -320
- package/lib/components/code/code_block.styles.js +154 -0
- package/lib/components/code/code_block_controls.js +48 -0
- package/lib/components/code/code_block_controls.styles.js +39 -0
- package/lib/components/code/code_block_copy.js +78 -0
- package/lib/components/code/code_block_full_screen.js +108 -0
- package/lib/components/code/code_block_line.styles.js +45 -0
- package/lib/components/code/code_block_overflow.js +82 -0
- package/lib/components/code/code_block_virtualized.js +72 -0
- package/lib/components/code/code_syntax.styles.js +57 -0
- package/lib/components/code/utils.js +40 -39
- package/lib/components/collapsible_nav/collapsible_nav.js +0 -5
- package/lib/components/overlay_mask/overlay_mask.js +9 -14
- package/lib/components/overlay_mask/overlay_mask.styles.js +13 -17
- package/lib/components/overlay_mask/overlay_mask_body.styles.js +20 -0
- package/lib/components/provider/provider.js +7 -12
- package/lib/components/resizable_container/helpers.js +2 -2
- package/lib/components/resizable_container/resizable_container.js +7 -9
- package/lib/components/resizable_container/resizable_container.styles.js +31 -0
- package/lib/components/resizable_container/resizable_panel.js +28 -49
- package/lib/components/resizable_container/resizable_panel.styles.js +74 -0
- package/lib/components/search_bar/query/ast.js +14 -3
- package/lib/components/tool_tip/tool_tip.js +3 -2
- package/lib/components/tool_tip/tool_tip.styles.js +18 -26
- package/lib/components/tool_tip/tool_tip_arrow.js +19 -4
- package/lib/components/tool_tip/tool_tip_popover.js +6 -6
- package/lib/components/tour/tour.styles.js +3 -2
- package/lib/components/tour/tour_step.js +7 -5
- package/lib/global_styling/functions/logicals.js +5 -3
- package/lib/global_styling/functions/math.js +37 -19
- package/lib/global_styling/mixins/_padding.js +17 -10
- package/optimize/es/components/basic_table/in_memory_table.js +1 -1
- package/optimize/es/components/code/code.js +7 -3
- package/optimize/es/components/code/code.styles.js +32 -0
- package/optimize/es/components/code/code_block.js +70 -299
- package/optimize/es/components/code/code_block.styles.js +153 -0
- package/optimize/es/components/code/code_block_controls.js +29 -0
- package/optimize/es/components/code/code_block_controls.styles.js +43 -0
- package/optimize/es/components/code/code_block_copy.js +55 -0
- package/optimize/es/components/code/code_block_full_screen.js +80 -0
- package/optimize/es/components/code/code_block_line.styles.js +49 -0
- package/optimize/es/components/code/code_block_overflow.js +67 -0
- package/optimize/es/components/code/code_block_virtualized.js +59 -0
- package/optimize/es/components/code/code_syntax.styles.js +43 -0
- package/optimize/es/components/code/utils.js +43 -37
- package/optimize/es/components/overlay_mask/overlay_mask.js +8 -9
- package/optimize/es/components/overlay_mask/overlay_mask.styles.js +4 -14
- package/optimize/es/components/overlay_mask/overlay_mask_body.styles.js +18 -0
- package/optimize/es/components/provider/provider.js +1 -5
- package/optimize/es/components/resizable_container/helpers.js +2 -2
- package/optimize/es/components/resizable_container/resizable_container.js +6 -9
- package/optimize/es/components/resizable_container/resizable_container.styles.js +28 -0
- package/optimize/es/components/resizable_container/resizable_panel.js +25 -48
- package/optimize/es/components/resizable_container/resizable_panel.styles.js +69 -0
- package/optimize/es/components/search_bar/query/ast.js +14 -3
- package/optimize/es/components/tool_tip/tool_tip.js +3 -2
- package/optimize/es/components/tool_tip/tool_tip.styles.js +17 -22
- package/optimize/es/components/tool_tip/tool_tip_arrow.js +9 -3
- package/optimize/es/components/tool_tip/tool_tip_popover.js +7 -7
- package/optimize/es/components/tour/tour.styles.js +4 -3
- package/optimize/es/components/tour/tour_step.js +7 -5
- package/optimize/es/global_styling/functions/logicals.js +5 -3
- package/optimize/es/global_styling/functions/math.js +35 -17
- package/optimize/es/global_styling/mixins/_padding.js +13 -9
- package/optimize/lib/components/basic_table/in_memory_table.js +1 -1
- package/optimize/lib/components/code/code.js +9 -3
- package/optimize/lib/components/code/code.styles.js +35 -0
- package/optimize/lib/components/code/code_block.js +71 -306
- package/optimize/lib/components/code/code_block.styles.js +156 -0
- package/optimize/lib/components/code/code_block_controls.js +48 -0
- package/optimize/lib/components/code/code_block_controls.styles.js +39 -0
- package/optimize/lib/components/code/code_block_copy.js +78 -0
- package/optimize/lib/components/code/code_block_full_screen.js +108 -0
- package/optimize/lib/components/code/code_block_line.styles.js +45 -0
- package/optimize/lib/components/code/code_block_overflow.js +82 -0
- package/optimize/lib/components/code/code_block_virtualized.js +81 -0
- package/optimize/lib/components/code/code_syntax.styles.js +57 -0
- package/optimize/lib/components/code/utils.js +40 -37
- package/optimize/lib/components/overlay_mask/overlay_mask.js +9 -9
- package/optimize/lib/components/overlay_mask/overlay_mask.styles.js +13 -17
- package/optimize/lib/components/overlay_mask/overlay_mask_body.styles.js +20 -0
- package/optimize/lib/components/provider/provider.js +7 -12
- package/optimize/lib/components/resizable_container/helpers.js +2 -2
- package/optimize/lib/components/resizable_container/resizable_container.js +7 -9
- package/optimize/lib/components/resizable_container/resizable_container.styles.js +31 -0
- package/optimize/lib/components/resizable_container/resizable_panel.js +28 -49
- package/optimize/lib/components/resizable_container/resizable_panel.styles.js +76 -0
- package/optimize/lib/components/search_bar/query/ast.js +14 -3
- package/optimize/lib/components/tool_tip/tool_tip.js +3 -2
- package/optimize/lib/components/tool_tip/tool_tip.styles.js +18 -26
- package/optimize/lib/components/tool_tip/tool_tip_arrow.js +10 -10
- package/optimize/lib/components/tool_tip/tool_tip_popover.js +6 -6
- package/optimize/lib/components/tour/tour.styles.js +3 -2
- package/optimize/lib/components/tour/tour_step.js +7 -5
- package/optimize/lib/global_styling/functions/logicals.js +4 -10
- package/optimize/lib/global_styling/functions/math.js +37 -19
- package/optimize/lib/global_styling/mixins/_padding.js +17 -10
- package/package.json +8 -7
- package/src/components/index.scss +0 -1
- package/src/components/resizable_container/_index.scss +0 -2
- package/src/global_styling/mixins/_header.scss +1 -1
- package/src/global_styling/variables/_index.scss +0 -1
- package/src/themes/amsterdam/overrides/_index.scss +0 -1
- package/test-env/components/basic_table/in_memory_table.js +8 -2
- package/test-env/components/code/code.styles.js +35 -0
- package/test-env/components/code/code_block.styles.js +156 -0
- package/test-env/components/code/code_block_controls.js +48 -0
- package/test-env/components/code/code_block_controls.styles.js +39 -0
- package/test-env/components/code/code_block_copy.js +78 -0
- package/test-env/components/code/code_block_full_screen.js +108 -0
- package/test-env/components/code/code_block_line.styles.js +45 -0
- package/test-env/components/code/code_block_overflow.js +82 -0
- package/test-env/components/code/code_block_virtualized.js +81 -0
- package/test-env/components/code/code_syntax.styles.js +57 -0
- package/test-env/components/code/utils.js +40 -37
- package/test-env/components/collapsible_nav/collapsible_nav.js +0 -5
- package/test-env/components/overlay_mask/overlay_mask.js +9 -14
- package/test-env/components/overlay_mask/overlay_mask.styles.js +13 -17
- package/test-env/components/overlay_mask/overlay_mask_body.styles.js +20 -0
- package/test-env/components/provider/provider.js +7 -12
- package/test-env/components/resizable_container/helpers.js +2 -2
- package/test-env/components/resizable_container/resizable_container.js +7 -9
- package/test-env/components/resizable_container/resizable_container.styles.js +31 -0
- package/test-env/components/resizable_container/resizable_panel.js +28 -49
- package/test-env/components/resizable_container/resizable_panel.styles.js +76 -0
- package/test-env/components/search_bar/query/ast.js +14 -3
- package/test-env/components/tool_tip/tool_tip.js +3 -2
- package/test-env/components/tool_tip/tool_tip.styles.js +18 -26
- package/test-env/components/tool_tip/tool_tip_arrow.js +16 -11
- package/test-env/components/tool_tip/tool_tip_popover.js +6 -6
- package/test-env/components/tour/tour.styles.js +3 -2
- package/test-env/components/tour/tour_step.js +7 -5
- package/test-env/global_styling/functions/logicals.js +4 -10
- package/test-env/global_styling/functions/math.js +37 -19
- package/test-env/global_styling/mixins/_padding.js +17 -10
- package/src/components/code/_code.scss +0 -15
- package/src/components/code/_code_block.scss +0 -177
- package/src/components/code/_index.scss +0 -4
- package/src/components/code/_mixins.scss +0 -127
- package/src/components/code/_variables.scss +0 -5
- package/src/components/resizable_container/_resizable_container.scss +0 -8
- package/src/components/resizable_container/_resizable_panel.scss +0 -51
- package/src/global_styling/variables/_colors_code.scss +0 -23
- 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
|
-
|
|
46
|
-
|
|
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, {
|
|
36
|
+
import React, { useMemo } from 'react';
|
|
37
37
|
import PropTypes from "prop-types";
|
|
38
38
|
import classNames from 'classnames';
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
import {
|
|
43
|
-
import {
|
|
44
|
-
import {
|
|
45
|
-
import {
|
|
46
|
-
import {
|
|
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
|
|
60
|
-
|
|
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
|
-
|
|
130
|
-
textToCopy = _useCopy.textToCopy;
|
|
113
|
+
copyButton = _useCopy.copyButton;
|
|
131
114
|
|
|
132
|
-
var
|
|
133
|
-
|
|
134
|
-
|
|
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
|
-
|
|
142
|
-
onKeyDown = _useFullScreen.onKeyDown,
|
|
127
|
+
fullScreenButton = _useFullScreen.fullScreenButton,
|
|
143
128
|
isFullScreen = _useFullScreen.isFullScreen,
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
var
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
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
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
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:
|
|
205
|
-
,
|
|
175
|
+
preProps: preProps,
|
|
206
176
|
codeProps: codeProps
|
|
207
|
-
}) : ___EmotionJSX("pre", {
|
|
177
|
+
}) : ___EmotionJSX("pre", _extends({}, preProps, {
|
|
208
178
|
ref: combinedRef,
|
|
209
|
-
style: overflowHeightStyles
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
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)),
|
|
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.
|
|
242
|
-
fontSize: PropTypes.
|
|
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
|
};
|