@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
|
@@ -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
|
|
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
|
-
|
|
56
|
-
|
|
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
|
|
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
|
|
30
|
+
var _code_block_overflow = require("./code_block_overflow");
|
|
41
31
|
|
|
42
|
-
var
|
|
32
|
+
var _code_block_copy = require("./code_block_copy");
|
|
43
33
|
|
|
44
|
-
var
|
|
34
|
+
var _code_block_full_screen = require("./code_block_full_screen");
|
|
45
35
|
|
|
46
|
-
var
|
|
36
|
+
var _code_block_controls = require("./code_block_controls");
|
|
47
37
|
|
|
48
|
-
var
|
|
38
|
+
var _code_block_virtualized = require("./code_block_virtualized");
|
|
49
39
|
|
|
50
|
-
var
|
|
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
|
|
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
|
|
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
|
-
|
|
144
|
-
textToCopy = _useCopy.textToCopy;
|
|
122
|
+
copyButton = _useCopy.copyButton;
|
|
145
123
|
|
|
146
|
-
var
|
|
147
|
-
|
|
148
|
-
|
|
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
|
-
|
|
156
|
-
onKeyDown = _useFullScreen.onKeyDown,
|
|
136
|
+
fullScreenButton = _useFullScreen.fullScreenButton,
|
|
157
137
|
isFullScreen = _useFullScreen.isFullScreen,
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
var
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
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
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
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:
|
|
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
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
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)),
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
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
|
-
|
|
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;
|