@elastic/eui 106.1.0 → 106.2.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 (67) hide show
  1. package/es/components/call_out/call_out.js +2 -1
  2. package/es/components/card/checkable_card/checkable_card.js +30 -5
  3. package/es/components/code/code_block.js +5 -2
  4. package/es/components/code/code_block_virtualized.js +5 -3
  5. package/es/components/markdown_editor/index.js +1 -0
  6. package/es/components/markdown_editor/markdown_editor.js +15 -4
  7. package/es/components/markdown_editor/markdown_editor_drop_zone.js +5 -3
  8. package/es/components/markdown_editor/markdown_editor_footer.js +12 -120
  9. package/es/components/markdown_editor/markdown_editor_footer.styles.js +0 -2
  10. package/es/components/markdown_editor/markdown_editor_help_button.js +144 -0
  11. package/es/components/markdown_editor/markdown_editor_help_button.styles.js +16 -0
  12. package/es/components/markdown_editor/markdown_editor_toolbar.js +28 -23
  13. package/es/components/popover/popover.js +2 -1
  14. package/eui.d.ts +84 -52
  15. package/i18ntokens.json +624 -624
  16. package/lib/components/call_out/call_out.js +3 -2
  17. package/lib/components/card/checkable_card/checkable_card.js +29 -4
  18. package/lib/components/code/code_block.js +5 -2
  19. package/lib/components/code/code_block_virtualized.js +5 -3
  20. package/lib/components/markdown_editor/index.js +7 -0
  21. package/lib/components/markdown_editor/markdown_editor.js +15 -4
  22. package/lib/components/markdown_editor/markdown_editor_drop_zone.js +5 -3
  23. package/lib/components/markdown_editor/markdown_editor_footer.js +10 -117
  24. package/lib/components/markdown_editor/markdown_editor_footer.styles.js +0 -2
  25. package/lib/components/markdown_editor/markdown_editor_help_button.js +151 -0
  26. package/lib/components/markdown_editor/markdown_editor_help_button.styles.js +22 -0
  27. package/lib/components/markdown_editor/markdown_editor_toolbar.js +28 -23
  28. package/lib/components/popover/popover.js +2 -1
  29. package/optimize/es/components/call_out/call_out.js +1 -0
  30. package/optimize/es/components/card/checkable_card/checkable_card.js +25 -5
  31. package/optimize/es/components/code/code_block.js +5 -2
  32. package/optimize/es/components/code/code_block_virtualized.js +5 -3
  33. package/optimize/es/components/markdown_editor/index.js +1 -0
  34. package/optimize/es/components/markdown_editor/markdown_editor.js +7 -3
  35. package/optimize/es/components/markdown_editor/markdown_editor_drop_zone.js +3 -2
  36. package/optimize/es/components/markdown_editor/markdown_editor_footer.js +12 -120
  37. package/optimize/es/components/markdown_editor/markdown_editor_footer.styles.js +0 -2
  38. package/optimize/es/components/markdown_editor/markdown_editor_help_button.js +139 -0
  39. package/optimize/es/components/markdown_editor/markdown_editor_help_button.styles.js +16 -0
  40. package/optimize/es/components/markdown_editor/markdown_editor_toolbar.js +20 -16
  41. package/optimize/es/components/popover/popover.js +2 -1
  42. package/optimize/lib/components/call_out/call_out.js +2 -1
  43. package/optimize/lib/components/card/checkable_card/checkable_card.js +24 -4
  44. package/optimize/lib/components/code/code_block.js +5 -2
  45. package/optimize/lib/components/code/code_block_virtualized.js +5 -3
  46. package/optimize/lib/components/markdown_editor/index.js +7 -0
  47. package/optimize/lib/components/markdown_editor/markdown_editor.js +7 -3
  48. package/optimize/lib/components/markdown_editor/markdown_editor_drop_zone.js +3 -2
  49. package/optimize/lib/components/markdown_editor/markdown_editor_footer.js +9 -118
  50. package/optimize/lib/components/markdown_editor/markdown_editor_footer.styles.js +0 -2
  51. package/optimize/lib/components/markdown_editor/markdown_editor_help_button.js +150 -0
  52. package/optimize/lib/components/markdown_editor/markdown_editor_help_button.styles.js +22 -0
  53. package/optimize/lib/components/markdown_editor/markdown_editor_toolbar.js +20 -16
  54. package/optimize/lib/components/popover/popover.js +2 -1
  55. package/package.json +1 -1
  56. package/test-env/components/call_out/call_out.js +3 -2
  57. package/test-env/components/card/checkable_card/checkable_card.js +24 -4
  58. package/test-env/components/code/code_block_virtualized.js +5 -3
  59. package/test-env/components/markdown_editor/index.js +7 -0
  60. package/test-env/components/markdown_editor/markdown_editor.js +15 -4
  61. package/test-env/components/markdown_editor/markdown_editor_drop_zone.js +5 -3
  62. package/test-env/components/markdown_editor/markdown_editor_footer.js +9 -118
  63. package/test-env/components/markdown_editor/markdown_editor_footer.styles.js +0 -2
  64. package/test-env/components/markdown_editor/markdown_editor_help_button.js +150 -0
  65. package/test-env/components/markdown_editor/markdown_editor_help_button.styles.js +22 -0
  66. package/test-env/components/markdown_editor/markdown_editor_toolbar.js +28 -23
  67. package/test-env/components/popover/popover.js +2 -1
@@ -7,23 +7,17 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
7
7
  * Side Public License, v 1.
8
8
  */
9
9
 
10
- import React, { useState, useMemo, Fragment, forwardRef, useContext } from 'react';
11
- import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
10
+ import React, { useState, useMemo, forwardRef, useContext } from 'react';
11
+ import { useEuiMemoizedStyles } from '../../services';
12
12
  import { EuiLoadingSpinner } from '../loading';
13
- import { EuiButton, EuiButtonEmpty, EuiButtonIcon } from '../button';
14
- import { EuiTitle } from '../title';
15
- import { EuiModal, EuiModalBody, EuiModalFooter, EuiModalHeader } from '../modal';
13
+ import { EuiButtonEmpty, EuiButtonIcon } from '../button';
16
14
  import { EuiI18n, useEuiI18n } from '../i18n';
17
15
  import { EuiPopover, EuiPopoverTitle } from '../popover';
18
16
  import { EuiText } from '../text';
19
- import { EuiSpacer } from '../spacer';
20
17
  import { EuiToolTip } from '../tool_tip';
21
- import { EuiHorizontalRule } from '../horizontal_rule';
22
- import { EuiLink } from '../link';
23
18
  import { EuiMarkdownContext } from './markdown_context';
24
- // @ts-ignore a react svg
25
- import MarkdownLogo from './icons/markdown_logo';
26
19
  import { euiMarkdownEditorFooterStyles } from './markdown_editor_footer.styles';
20
+ import { EuiMarkdownEditorHelpButton } from './markdown_editor_help_button';
27
21
  import { jsx as ___EmotionJSX } from "@emotion/react";
28
22
  export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, ref) {
29
23
  var uiPlugins = props.uiPlugins,
@@ -35,16 +29,8 @@ export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, re
35
29
  var styles = useEuiMemoizedStyles(euiMarkdownEditorFooterStyles);
36
30
  var _useState = useState(false),
37
31
  _useState2 = _slicedToArray(_useState, 2),
38
- isShowingHelpModal = _useState2[0],
39
- setIsShowingHelpModal = _useState2[1];
40
- var _useState3 = useState(false),
41
- _useState4 = _slicedToArray(_useState3, 2),
42
- isShowingHelpPopover = _useState4[0],
43
- setIsShowingHelpPopover = _useState4[1];
44
- var _useState5 = useState(false),
45
- _useState6 = _slicedToArray(_useState5, 2),
46
- isPopoverOpen = _useState6[0],
47
- setIsPopoverOpen = _useState6[1];
32
+ isPopoverOpen = _useState2[0],
33
+ setIsPopoverOpen = _useState2[1];
48
34
  var onButtonClick = function onButtonClick() {
49
35
  return setIsPopoverOpen(function (isPopoverOpen) {
50
36
  return !isPopoverOpen;
@@ -67,13 +53,10 @@ export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, re
67
53
  supportedFileTypes: useEuiI18n('euiMarkdownEditorFooter.supportedFileTypes', 'Supported files: {supportedFileTypes}', {
68
54
  supportedFileTypes: supportedFileTypes
69
55
  }),
70
- showSyntaxErrors: useEuiI18n('euiMarkdownEditorFooter.showSyntaxErrors', 'Show errors'),
71
- showMarkdownHelp: useEuiI18n('euiMarkdownEditorFooter.showMarkdownHelp', 'Show markdown help')
56
+ showSyntaxErrors: useEuiI18n('euiMarkdownEditorFooter.showSyntaxErrors', 'Show errors')
72
57
  };
73
- var syntaxTitle = useEuiI18n('euiMarkdownEditorFooter.syntaxTitle', 'Syntax help');
74
58
  var _useContext = useContext(EuiMarkdownContext),
75
59
  readOnly = _useContext.readOnly;
76
- var helpModalTitleId = useGeneratedHtmlId();
77
60
  if (isUploadingFiles) {
78
61
  uploadButton = ___EmotionJSX(EuiButtonIcon, {
79
62
  size: "s",
@@ -133,107 +116,16 @@ export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, re
133
116
  }, message.toString());
134
117
  })));
135
118
  }
136
- var uiPluginsWithHelpText = uiPlugins.filter(function (_ref2) {
137
- var helpText = _ref2.helpText;
138
- return !!helpText;
139
- });
140
- var hasUiPluginsWithHelpText = uiPluginsWithHelpText.length > 0;
141
- var mdSyntaxHref = 'https://guides.github.com/features/mastering-markdown/';
142
- var mdSyntaxLink = ___EmotionJSX(EuiLink, {
143
- href: mdSyntaxHref,
144
- target: "_blank"
145
- }, ___EmotionJSX(EuiI18n, {
146
- token: "euiMarkdownEditorFooter.mdSyntaxLink",
147
- default: "GitHub flavored markdown"
148
- }));
149
- var helpSyntaxButton;
150
- if (hasUiPluginsWithHelpText) {
151
- helpSyntaxButton = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiToolTip, {
152
- content: syntaxTitle
153
- }, ___EmotionJSX(EuiButtonIcon, {
154
- size: "s",
155
- css: styles.euiMarkdownEditorFooter__helpButton,
156
- className: "euiMarkdownEditorFooter__helpButton",
157
- iconType: MarkdownLogo,
158
- color: "text",
159
- "aria-label": ariaLabels.showMarkdownHelp,
160
- onClick: function onClick() {
161
- return setIsShowingHelpModal(!isShowingHelpModal);
162
- },
163
- isDisabled: readOnly
164
- })), isShowingHelpModal && ___EmotionJSX(EuiModal, {
165
- onClose: function onClose() {
166
- return setIsShowingHelpModal(false);
167
- },
168
- "aria-labelledby": helpModalTitleId
169
- }, ___EmotionJSX(EuiModalHeader, null, ___EmotionJSX(EuiTitle, null, ___EmotionJSX("h1", {
170
- id: helpModalTitleId
171
- }, syntaxTitle))), ___EmotionJSX(EuiModalBody, null, ___EmotionJSX(EuiText, null, ___EmotionJSX(EuiI18n, {
172
- tokens: ['euiMarkdownEditorFooter.syntaxModalDescriptionPrefix', 'euiMarkdownEditorFooter.syntaxModalDescriptionSuffix'],
173
- defaults: ['This editor uses', 'You can also utilize these additional syntax plugins to add rich content to your text.']
174
- }, function (_ref3) {
175
- var _ref4 = _slicedToArray(_ref3, 2),
176
- syntaxModalDescriptionPrefix = _ref4[0],
177
- syntaxModalDescriptionSuffix = _ref4[1];
178
- return ___EmotionJSX("p", null, syntaxModalDescriptionPrefix, " ", mdSyntaxLink, ".", ' ', syntaxModalDescriptionSuffix);
179
- })), ___EmotionJSX(EuiHorizontalRule, null), uiPluginsWithHelpText.map(function (_ref5) {
180
- var name = _ref5.name,
181
- helpText = _ref5.helpText;
182
- return ___EmotionJSX(Fragment, {
183
- key: name
184
- }, ___EmotionJSX(EuiTitle, {
185
- size: "xxs"
186
- }, ___EmotionJSX("p", null, ___EmotionJSX("strong", null, name))), ___EmotionJSX(EuiSpacer, {
187
- size: "s"
188
- }), helpText, ___EmotionJSX(EuiSpacer, {
189
- size: "l"
190
- }));
191
- }), ___EmotionJSX(EuiHorizontalRule, null)), ___EmotionJSX(EuiModalFooter, null, ___EmotionJSX(EuiButton, {
192
- onClick: function onClick() {
193
- return setIsShowingHelpModal(false);
194
- },
195
- fill: true
196
- }, ___EmotionJSX(EuiI18n, {
197
- token: "euiMarkdownEditorFooter.closeButton",
198
- default: "Close"
199
- })))));
200
- } else {
201
- helpSyntaxButton = ___EmotionJSX(EuiPopover, {
202
- button: ___EmotionJSX(EuiButtonIcon, {
203
- title: syntaxTitle,
204
- size: "s",
205
- css: styles.euiMarkdownEditorFooter__helpButton,
206
- className: "euiMarkdownEditorFooter__helpButton",
207
- iconType: MarkdownLogo,
208
- color: "text",
209
- "aria-label": ariaLabels.showMarkdownHelp,
210
- onClick: function onClick() {
211
- return setIsShowingHelpPopover(!isShowingHelpPopover);
212
- }
213
- }),
214
- isOpen: isShowingHelpPopover,
215
- closePopover: function closePopover() {
216
- return setIsShowingHelpPopover(false);
217
- },
218
- panelPaddingSize: "s",
219
- anchorPosition: "upCenter",
220
- "aria-labelledby": helpModalTitleId
221
- }, ___EmotionJSX(EuiI18n, {
222
- tokens: ['euiMarkdownEditorFooter.syntaxPopoverDescription'],
223
- defaults: ['This editor uses']
224
- }, function (_ref6) {
225
- var _ref7 = _slicedToArray(_ref6, 1),
226
- syntaxPopoverDescription = _ref7[0];
227
- return ___EmotionJSX("p", null, syntaxPopoverDescription, " ", mdSyntaxLink, ".");
228
- }));
229
- }
230
119
  return ___EmotionJSX("div", {
231
120
  ref: ref,
232
121
  css: styles.euiMarkdownEditorFooter,
233
- className: "euiMarkdownEditorFooter"
122
+ className: "euiMarkdownEditorFooter",
123
+ "data-test-subj": "euiMarkdownEditorFooter"
234
124
  }, ___EmotionJSX("div", {
235
125
  css: styles.euiMarkdownEditorFooter__actions,
236
126
  className: "euiMarkdownEditorFooter__actions"
237
- }, uploadButton, errorsButton), helpSyntaxButton);
127
+ }, uploadButton, errorsButton), ___EmotionJSX(EuiMarkdownEditorHelpButton, {
128
+ uiPlugins: uiPlugins
129
+ }));
238
130
  });
239
131
  EuiMarkdownEditorFooter.displayName = 'EuiMarkdownEditorFooter';
@@ -19,8 +19,6 @@ export var euiMarkdownEditorFooterStyles = function euiMarkdownEditorFooterStyle
19
19
  euiMarkdownEditorFooter__actions: /*#__PURE__*/css("flex:1;display:inline-flex;align-items:center;gap:", euiTheme.size.xs, ";;label:euiMarkdownEditorFooter__actions;"),
20
20
  // Override default button border radius to match the overall markdown editor
21
21
  euiMarkdownEditorFooter__uploadError: /*#__PURE__*/css("border-radius:", borderRadius, ";;label:euiMarkdownEditorFooter__uploadError;"),
22
- // Override the default button icon width size
23
- euiMarkdownEditorFooter__helpButton: /*#__PURE__*/css(".euiIcon{", logicalCSS('width', '26px'), ";};label:euiMarkdownEditorFooter__helpButton;"),
24
22
  euiMarkdownEditorFooter__popover: /*#__PURE__*/css(logicalCSS('width', '300px'), ";;label:euiMarkdownEditorFooter__popover;")
25
23
  };
26
24
  };
@@ -0,0 +1,139 @@
1
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
+ /*
3
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
4
+ * or more contributor license agreements. Licensed under the Elastic License
5
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
6
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
7
+ * Side Public License, v 1.
8
+ */
9
+
10
+ import React, { useState, Fragment, useContext } from 'react';
11
+ import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
12
+ import { EuiButton, EuiButtonIcon } from '../button';
13
+ import { EuiTitle } from '../title';
14
+ import { EuiModal, EuiModalBody, EuiModalFooter, EuiModalHeader } from '../modal';
15
+ import { EuiI18n, useEuiI18n } from '../i18n';
16
+ import { EuiPopover } from '../popover';
17
+ import { EuiText } from '../text';
18
+ import { EuiSpacer } from '../spacer';
19
+ import { EuiToolTip } from '../tool_tip';
20
+ import { EuiHorizontalRule } from '../horizontal_rule';
21
+ import { EuiLink } from '../link';
22
+ import { EuiMarkdownContext } from './markdown_context';
23
+ // @ts-ignore a react svg
24
+ import MarkdownLogo from './icons/markdown_logo';
25
+ import { euiMarkdownEditorHelpButtonStyles } from './markdown_editor_help_button.styles';
26
+ import { jsx as ___EmotionJSX } from "@emotion/react";
27
+ var mdSyntaxHref = 'https://guides.github.com/features/mastering-markdown/';
28
+ var mdSyntaxLink = ___EmotionJSX(EuiLink, {
29
+ href: mdSyntaxHref,
30
+ target: "_blank"
31
+ }, ___EmotionJSX(EuiI18n, {
32
+ token: "euiMarkdownEditorHelpButton.mdSyntaxLink",
33
+ default: "GitHub flavored markdown"
34
+ }));
35
+ export var EuiMarkdownEditorHelpButton = function EuiMarkdownEditorHelpButton(_ref) {
36
+ var uiPlugins = _ref.uiPlugins;
37
+ var _useState = useState(false),
38
+ _useState2 = _slicedToArray(_useState, 2),
39
+ isShowingHelpModal = _useState2[0],
40
+ setIsShowingHelpModal = _useState2[1];
41
+ var _useState3 = useState(false),
42
+ _useState4 = _slicedToArray(_useState3, 2),
43
+ isShowingHelpPopover = _useState4[0],
44
+ setIsShowingHelpPopover = _useState4[1];
45
+ var _useContext = useContext(EuiMarkdownContext),
46
+ readOnly = _useContext.readOnly;
47
+ var styles = useEuiMemoizedStyles(euiMarkdownEditorHelpButtonStyles);
48
+ var syntaxTitle = useEuiI18n('euiMarkdownEditorHelpButton.syntaxTitle', 'Syntax help');
49
+ var ariaLabels = {
50
+ showMarkdownHelp: useEuiI18n('euiMarkdownEditorHelpButton.showMarkdownHelp', 'Show markdown help')
51
+ };
52
+ var helpModalTitleId = useGeneratedHtmlId();
53
+ var uiPluginsWithHelpText = uiPlugins.filter(function (_ref2) {
54
+ var helpText = _ref2.helpText;
55
+ return !!helpText;
56
+ });
57
+ var hasUiPluginsWithHelpText = uiPluginsWithHelpText.length > 0;
58
+ if (hasUiPluginsWithHelpText) {
59
+ return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiToolTip, {
60
+ content: syntaxTitle
61
+ }, ___EmotionJSX(EuiButtonIcon, {
62
+ size: "s",
63
+ css: styles.euiMarkdownEditorFooter__helpButton,
64
+ className: "euiMarkdownEditorFooter__helpButton",
65
+ iconType: MarkdownLogo,
66
+ color: "text",
67
+ "aria-label": ariaLabels.showMarkdownHelp,
68
+ onClick: function onClick() {
69
+ return setIsShowingHelpModal(!isShowingHelpModal);
70
+ },
71
+ isDisabled: readOnly
72
+ })), isShowingHelpModal && ___EmotionJSX(EuiModal, {
73
+ onClose: function onClose() {
74
+ return setIsShowingHelpModal(false);
75
+ },
76
+ "aria-labelledby": helpModalTitleId
77
+ }, ___EmotionJSX(EuiModalHeader, null, ___EmotionJSX(EuiTitle, null, ___EmotionJSX("h1", {
78
+ id: helpModalTitleId
79
+ }, syntaxTitle))), ___EmotionJSX(EuiModalBody, null, ___EmotionJSX(EuiText, null, ___EmotionJSX(EuiI18n, {
80
+ tokens: ['euiMarkdownEditorHelpButton.syntaxModalDescriptionPrefix', 'euiMarkdownEditorHelpButton.syntaxModalDescriptionSuffix'],
81
+ defaults: ['This editor uses', 'You can also utilize these additional syntax plugins to add rich content to your text.']
82
+ }, function (_ref3) {
83
+ var _ref4 = _slicedToArray(_ref3, 2),
84
+ syntaxModalDescriptionPrefix = _ref4[0],
85
+ syntaxModalDescriptionSuffix = _ref4[1];
86
+ return ___EmotionJSX("p", null, syntaxModalDescriptionPrefix, " ", mdSyntaxLink, ".", ' ', syntaxModalDescriptionSuffix);
87
+ })), ___EmotionJSX(EuiHorizontalRule, null), uiPluginsWithHelpText.map(function (_ref5) {
88
+ var name = _ref5.name,
89
+ helpText = _ref5.helpText;
90
+ return ___EmotionJSX(Fragment, {
91
+ key: name
92
+ }, ___EmotionJSX(EuiTitle, {
93
+ size: "xxs"
94
+ }, ___EmotionJSX("p", null, ___EmotionJSX("strong", null, name))), ___EmotionJSX(EuiSpacer, {
95
+ size: "s"
96
+ }), helpText, ___EmotionJSX(EuiSpacer, {
97
+ size: "l"
98
+ }));
99
+ }), ___EmotionJSX(EuiHorizontalRule, null)), ___EmotionJSX(EuiModalFooter, null, ___EmotionJSX(EuiButton, {
100
+ onClick: function onClick() {
101
+ return setIsShowingHelpModal(false);
102
+ },
103
+ fill: true
104
+ }, ___EmotionJSX(EuiI18n, {
105
+ token: "euiMarkdownEditorHelpButton.closeButton",
106
+ default: "Close"
107
+ })))));
108
+ } else {
109
+ return ___EmotionJSX(EuiPopover, {
110
+ button: ___EmotionJSX(EuiButtonIcon, {
111
+ title: syntaxTitle,
112
+ size: "s",
113
+ css: styles.euiMarkdownEditorFooter__helpButton,
114
+ className: "euiMarkdownEditorFooter__helpButton",
115
+ iconType: MarkdownLogo,
116
+ color: "text",
117
+ "aria-label": ariaLabels.showMarkdownHelp,
118
+ onClick: function onClick() {
119
+ return setIsShowingHelpPopover(!isShowingHelpPopover);
120
+ }
121
+ }),
122
+ isOpen: isShowingHelpPopover,
123
+ closePopover: function closePopover() {
124
+ return setIsShowingHelpPopover(false);
125
+ },
126
+ panelPaddingSize: "s",
127
+ anchorPosition: "upCenter",
128
+ "aria-labelledby": helpModalTitleId
129
+ }, ___EmotionJSX(EuiI18n, {
130
+ tokens: ['euiMarkdownEditorHelpButton.syntaxPopoverDescription'],
131
+ defaults: ['This editor uses']
132
+ }, function (_ref6) {
133
+ var _ref7 = _slicedToArray(_ref6, 1),
134
+ syntaxPopoverDescription = _ref7[0];
135
+ return ___EmotionJSX("p", null, syntaxPopoverDescription, " ", mdSyntaxLink, ".");
136
+ }));
137
+ }
138
+ };
139
+ EuiMarkdownEditorHelpButton.displayName = 'EuiMarkdownEditorHelpButton';
@@ -0,0 +1,16 @@
1
+ /*
2
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3
+ * or more contributor license agreements. Licensed under the Elastic License
4
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
5
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
6
+ * Side Public License, v 1.
7
+ */
8
+
9
+ import { css } from '@emotion/react';
10
+ import { logicalCSS } from '../../global_styling';
11
+ export var euiMarkdownEditorHelpButtonStyles = function euiMarkdownEditorHelpButtonStyles() {
12
+ return {
13
+ // Override the default button icon width size
14
+ euiMarkdownEditorFooter__helpButton: /*#__PURE__*/css(".euiIcon{", logicalCSS('width', '26px'), ";};label:euiMarkdownEditorFooter__helpButton;")
15
+ };
16
+ };
@@ -90,7 +90,8 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
90
90
  viewMode = _ref2.viewMode,
91
91
  onClickPreview = _ref2.onClickPreview,
92
92
  uiPlugins = _ref2.uiPlugins,
93
- selectedNode = _ref2.selectedNode;
93
+ selectedNode = _ref2.selectedNode,
94
+ right = _ref2.right;
94
95
  var _useContext = useContext(EuiMarkdownContext),
95
96
  openPluginEditor = _useContext.openPluginEditor,
96
97
  readOnly = _useContext.readOnly;
@@ -177,26 +178,29 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
177
178
  label: button.label,
178
179
  icon: button.iconType
179
180
  }));
180
- })) : null), isPreviewing ? ___EmotionJSX(EuiButtonEmpty, {
181
- "data-test-subj": "markdown_editor_edit_button",
182
- iconType: "code",
181
+ })) : null), right !== null && right !== void 0 ? right : ___EmotionJSX(PreviewEditorSwitch, {
182
+ isPreviewing: isPreviewing,
183
+ onClickPreview: onClickPreview,
184
+ readOnly: readOnly
185
+ }));
186
+ });
187
+ var PreviewEditorSwitch = function PreviewEditorSwitch(_ref4) {
188
+ var isPreviewing = _ref4.isPreviewing,
189
+ onClickPreview = _ref4.onClickPreview,
190
+ readOnly = _ref4.readOnly;
191
+ return ___EmotionJSX(EuiButtonEmpty, {
192
+ iconType: isPreviewing ? 'code' : 'eye',
183
193
  color: "text",
184
194
  size: "s",
185
195
  onClick: onClickPreview,
186
- isDisabled: readOnly
187
- }, ___EmotionJSX(EuiI18n, {
196
+ isDisabled: readOnly,
197
+ "data-test-subj": isPreviewing ? 'markdown_editor_preview_button' : 'markdown_editor_edit_button'
198
+ }, isPreviewing ? ___EmotionJSX(EuiI18n, {
188
199
  token: "euiMarkdownEditorToolbar.editor",
189
200
  default: "Editor"
190
- })) : ___EmotionJSX(EuiButtonEmpty, {
191
- "data-test-subj": "markdown_editor_preview_button",
192
- iconType: "eye",
193
- color: "text",
194
- size: "s",
195
- onClick: onClickPreview,
196
- isDisabled: readOnly
197
- }, ___EmotionJSX(EuiI18n, {
201
+ }) : ___EmotionJSX(EuiI18n, {
198
202
  token: "euiMarkdownEditorToolbar.previewMarkdown",
199
203
  default: "Preview"
200
- })));
201
- });
204
+ }));
205
+ };
202
206
  EuiMarkdownEditorToolbar.displayName = 'EuiMarkdownEditorToolbar';
@@ -146,7 +146,8 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
146
146
  // transition can take effect.
147
147
  _this.closingTransitionAnimationFrame = window.requestAnimationFrame(function () {
148
148
  _this.setState({
149
- isOpening: true
149
+ isOpening: true,
150
+ isClosing: false
150
151
  });
151
152
  });
152
153
 
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.HEADINGS = exports.EuiCallOut = exports.COLORS = void 0;
8
+ exports.SIZES = exports.HEADINGS = exports.EuiCallOut = exports.COLORS = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -33,6 +33,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
33
33
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
34
34
  var COLORS = exports.COLORS = ['primary', 'success', 'warning', 'danger', 'accent'];
35
35
  var HEADINGS = exports.HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
36
+ var SIZES = exports.SIZES = ['s', 'm'];
36
37
  var EuiCallOut = exports.EuiCallOut = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
37
38
  var title = _ref.title,
38
39
  _ref$color = _ref.color,
@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.EuiCheckableCard = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
11
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
12
  var _react = _interopRequireWildcard(require("react"));
12
13
  var _classnames = _interopRequireDefault(require("classnames"));
14
+ var _tabbable = require("tabbable");
13
15
  var _form = require("../../form");
14
16
  var _panel = require("../../panel");
15
17
  var _services = require("../../../services");
@@ -49,7 +51,16 @@ var EuiCheckableCard = exports.EuiCheckableCard = function EuiCheckableCard(_ref
49
51
  var id = rest.id;
50
52
  var labelEl = (0, _react.useRef)(null);
51
53
  var inputEl = (0, _react.useRef)(null);
54
+ var childrenWrapperEl = (0, _react.useRef)(null);
52
55
  var classes = (0, _classnames.default)('euiCheckableCard', className);
56
+ var _useState = (0, _react.useState)(false),
57
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
58
+ hasInteractiveChildren = _useState2[0],
59
+ setHasInteractiveChildren = _useState2[1];
60
+ (0, _react.useEffect)(function () {
61
+ var interactiveElements = childrenWrapperEl.current ? (0, _tabbable.tabbable)(childrenWrapperEl.current) : [];
62
+ setHasInteractiveChildren(interactiveElements.length > 0);
63
+ }, [children, childrenWrapperEl]);
53
64
  var checkableElement;
54
65
  if (checkableType === 'radio') {
55
66
  checkableElement = (0, _react2.jsx)(_form.EuiRadio, (0, _extends2.default)({
@@ -65,9 +76,13 @@ var EuiCheckableCard = exports.EuiCheckableCard = function EuiCheckableCard(_ref
65
76
  }
66
77
  var labelClasses = (0, _classnames.default)('euiCheckableCard__label');
67
78
  var onChangeAffordance = function onChangeAffordance(e) {
68
- if (labelEl.current && e.target !== inputEl.current) {
69
- labelEl.current.click();
70
- }
79
+ if (!labelEl.current || e.target === inputEl.current) return;
80
+ labelEl.current.click();
81
+ };
82
+ var onChildrenClick = function onChildrenClick() {
83
+ var _labelEl$current;
84
+ if (hasInteractiveChildren) return;
85
+ (_labelEl$current = labelEl.current) === null || _labelEl$current === void 0 || _labelEl$current.click();
71
86
  };
72
87
  return (0, _react2.jsx)(_panel.EuiSplitPanel.Outer, {
73
88
  responsive: false,
@@ -88,8 +103,13 @@ var EuiCheckableCard = exports.EuiCheckableCard = function EuiCheckableCard(_ref
88
103
  htmlFor: id,
89
104
  "aria-describedby": children ? "".concat(id, "-details") : undefined
90
105
  }), label), children && (0, _react2.jsx)("div", {
106
+ ref: childrenWrapperEl,
91
107
  id: "".concat(id, "-details"),
92
108
  className: "euiCheckableCard__children",
93
- css: childStyles
109
+ css: childStyles,
110
+ onClick: disabled ? undefined : onChildrenClick,
111
+ style: {
112
+ cursor: !disabled && !hasInteractiveChildren ? 'pointer' : undefined
113
+ }
94
114
  }, children)));
95
115
  };
@@ -24,7 +24,7 @@ var _code_block = require("./code_block.styles");
24
24
  var _accessibility = require("../accessibility");
25
25
  var _i18n = require("../i18n");
26
26
  var _react2 = require("@emotion/react");
27
- var _excluded = ["language", "transparentBackground", "paddingSize", "fontSize", "isCopyable", "copyAriaLabel", "whiteSpace", "children", "className", "overflowHeight", "isVirtualized", "lineNumbers"];
27
+ var _excluded = ["language", "transparentBackground", "paddingSize", "fontSize", "isCopyable", "copyAriaLabel", "whiteSpace", "children", "className", "overflowHeight", "isVirtualized", "lineNumbers", "aria-label"];
28
28
  /*
29
29
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
30
30
  * or more contributor license agreements. Licensed under the Elastic License
@@ -67,6 +67,7 @@ var EuiCodeBlock = exports.EuiCodeBlock = function EuiCodeBlock(_ref) {
67
67
  _isVirtualized = _ref.isVirtualized,
68
68
  _ref$lineNumbers = _ref.lineNumbers,
69
69
  lineNumbers = _ref$lineNumbers === void 0 ? false : _ref$lineNumbers,
70
+ ariaLabel = _ref['aria-label'],
70
71
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
71
72
  var euiTheme = (0, _services.useEuiTheme)();
72
73
  var language = (0, _react.useMemo)(function () {
@@ -158,13 +159,14 @@ var EuiCodeBlock = exports.EuiCodeBlock = function EuiCodeBlock(_ref) {
158
159
  });
159
160
  // pre tags don't accept aria-label without an
160
161
  // appropriate role, we add a SR only text instead
161
- var codeBlockLabelElement = (0, _react2.jsx)(_react.default.Fragment, null, _services.tabularCopyMarkers.hiddenNoCopyBoundary, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("div", null, codeBlockLabel)), _services.tabularCopyMarkers.hiddenNoCopyBoundary);
162
+ var codeBlockLabelElement = (0, _react2.jsx)(_react.default.Fragment, null, _services.tabularCopyMarkers.hiddenNoCopyBoundary, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("div", null, ariaLabel ? "".concat(ariaLabel, ", ") : undefined, codeBlockLabel)), _services.tabularCopyMarkers.hiddenNoCopyBoundary);
162
163
  return (0, _react2.jsx)("div", {
163
164
  css: cssStyles,
164
165
  className: (0, _classnames.default)('euiCodeBlock', className),
165
166
  style: overflowHeightStyles
166
167
  }, isVirtualized ? (0, _react2.jsx)(_code_block_virtualized.EuiCodeBlockVirtualized, {
167
168
  data: data,
169
+ label: codeBlockLabelElement,
168
170
  rowHeight: fontSizeToRowHeightMap[fontSize],
169
171
  overflowHeight: overflowHeight,
170
172
  preProps: preProps,
@@ -179,6 +181,7 @@ var EuiCodeBlock = exports.EuiCodeBlock = function EuiCodeBlock(_ref) {
179
181
  onClose: onKeyDown
180
182
  }, isVirtualized ? (0, _react2.jsx)(_code_block_virtualized.EuiCodeBlockVirtualized, {
181
183
  data: data,
184
+ label: codeBlockLabelElement,
182
185
  rowHeight: fontSizeToRowHeightMap.l,
183
186
  preProps: preFullscreenProps,
184
187
  codeProps: codeProps
@@ -14,7 +14,7 @@ var _global_styling = require("../../global_styling");
14
14
  var _auto_sizer = require("../auto_sizer");
15
15
  var _utils = require("./utils");
16
16
  var _react2 = require("@emotion/react");
17
- var _excluded = ["style"],
17
+ var _excluded = ["style", "children"],
18
18
  _excluded2 = ["style"];
19
19
  /*
20
20
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -27,6 +27,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
27
27
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
28
28
  var EuiCodeBlockVirtualized = exports.EuiCodeBlockVirtualized = function EuiCodeBlockVirtualized(_ref) {
29
29
  var data = _ref.data,
30
+ label = _ref.label,
30
31
  rowHeight = _ref.rowHeight,
31
32
  overflowHeight = _ref.overflowHeight,
32
33
  preProps = _ref.preProps,
@@ -34,14 +35,15 @@ var EuiCodeBlockVirtualized = exports.EuiCodeBlockVirtualized = function EuiCode
34
35
  var VirtualizedOuterElement = (0, _react.useMemo)(function () {
35
36
  return /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
36
37
  var style = _ref2.style,
38
+ children = _ref2.children,
37
39
  props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
38
40
  return (0, _react2.jsx)("pre", (0, _extends2.default)({
39
41
  style: (0, _global_styling.logicalStyles)(style)
40
42
  }, props, {
41
43
  ref: ref
42
- }, preProps));
44
+ }, preProps), label, children);
43
45
  });
44
- }, [preProps]);
46
+ }, [preProps, label]);
45
47
  var VirtualizedInnerElement = (0, _react.useMemo)(function () {
46
48
  return /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref) {
47
49
  var style = _ref3.style,
@@ -15,6 +15,12 @@ Object.defineProperty(exports, "EuiMarkdownEditor", {
15
15
  return _markdown_editor.EuiMarkdownEditor;
16
16
  }
17
17
  });
18
+ Object.defineProperty(exports, "EuiMarkdownEditorHelpButton", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _markdown_editor_help_button.EuiMarkdownEditorHelpButton;
22
+ }
23
+ });
18
24
  Object.defineProperty(exports, "EuiMarkdownFormat", {
19
25
  enumerable: true,
20
26
  get: function get() {
@@ -52,6 +58,7 @@ Object.defineProperty(exports, "getDefaultEuiMarkdownUiPlugins", {
52
58
  }
53
59
  });
54
60
  var _markdown_editor = require("./markdown_editor");
61
+ var _markdown_editor_help_button = require("./markdown_editor_help_button");
55
62
  var _markdown_default_plugins = require("./plugins/markdown_default_plugins");
56
63
  var _markdown_context = require("./markdown_context");
57
64
  var _markdown_format = require("./markdown_format");
@@ -26,7 +26,7 @@ var _markdown_context = require("./markdown_context");
26
26
  var _markdown_default_plugins = require("./plugins/markdown_default_plugins");
27
27
  var _markdown_editor = require("./markdown_editor.styles");
28
28
  var _react2 = require("@emotion/react");
29
- var _excluded = ["className", "editorId", "value", "onChange", "height", "maxHeight", "autoExpandPreview", "parsingPluginList", "processingPluginList", "uiPlugins", "onParse", "errors", "aria-label", "aria-labelledby", "aria-describedby", "initialViewMode", "dropHandlers", "markdownFormatProps", "placeholder", "readOnly"];
29
+ var _excluded = ["className", "editorId", "value", "onChange", "height", "maxHeight", "autoExpandPreview", "parsingPluginList", "processingPluginList", "uiPlugins", "onParse", "errors", "aria-label", "aria-labelledby", "aria-describedby", "initialViewMode", "dropHandlers", "markdownFormatProps", "placeholder", "readOnly", "toolbarProps", "showFooter"];
30
30
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
31
31
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
32
32
  function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
@@ -114,6 +114,9 @@ var EuiMarkdownEditor = exports.EuiMarkdownEditor = /*#__PURE__*/(0, _react.forw
114
114
  markdownFormatProps = _ref.markdownFormatProps,
115
115
  placeholder = _ref.placeholder,
116
116
  readOnly = _ref.readOnly,
117
+ toolbarProps = _ref.toolbarProps,
118
+ _ref$showFooter = _ref.showFooter,
119
+ showFooter = _ref$showFooter === void 0 ? true : _ref$showFooter,
117
120
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
118
121
  var _useState = (0, _react.useState)(initialViewMode),
119
122
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -293,7 +296,7 @@ var EuiMarkdownEditor = exports.EuiMarkdownEditor = /*#__PURE__*/(0, _react.forw
293
296
  }, (0, _react2.jsx)("div", (0, _extends2.default)({
294
297
  className: classes,
295
298
  css: cssStyles
296
- }, rest), (0, _react2.jsx)(_markdown_editor_toolbar.EuiMarkdownEditorToolbar, {
299
+ }, rest), (0, _react2.jsx)(_markdown_editor_toolbar.EuiMarkdownEditorToolbar, (0, _extends2.default)({
297
300
  ref: editorToolbarRef,
298
301
  selectedNode: selectedNode,
299
302
  markdownActions: markdownActions,
@@ -302,7 +305,7 @@ var EuiMarkdownEditor = exports.EuiMarkdownEditor = /*#__PURE__*/(0, _react.forw
302
305
  },
303
306
  viewMode: viewMode,
304
307
  uiPlugins: toolbarPlugins
305
- }), isPreviewing && (0, _react2.jsx)("div", {
308
+ }, toolbarProps)), isPreviewing && (0, _react2.jsx)("div", {
306
309
  ref: previewRef,
307
310
  className: classesPreview,
308
311
  css: styles.euiMarkdownEditorPreview,
@@ -334,6 +337,7 @@ var EuiMarkdownEditor = exports.EuiMarkdownEditor = /*#__PURE__*/(0, _react.forw
334
337
  selectionEnd: newSelectionPoint
335
338
  });
336
339
  },
340
+ showFooter: showFooter,
337
341
  uiPlugins: toolbarPlugins,
338
342
  errors: errors,
339
343
  hasUnacceptedItems: hasUnacceptedItems,
@@ -68,7 +68,8 @@ var EuiMarkdownEditorDropZone = exports.EuiMarkdownEditorDropZone = function Eui
68
68
  hasUnacceptedItems = props.hasUnacceptedItems,
69
69
  setHasUnacceptedItems = props.setHasUnacceptedItems,
70
70
  setEditorFooterHeight = props.setEditorFooterHeight,
71
- isEditing = props.isEditing;
71
+ isEditing = props.isEditing,
72
+ showFooter = props.showFooter;
72
73
  var classes = (0, _classnames.default)('euiMarkdownEditorDropZone');
73
74
  var styles = (0, _services.useEuiMemoizedStyles)(_markdown_editor_drop_zone.euiMarkdownEditorDropZoneStyles);
74
75
  var cssStyles = [styles.euiMarkdownEditorDropZone, isDragging && !isDraggingError && styles.isDragging, isDraggingError && styles.isDraggingError, (hasUnacceptedItems || errors.length > 0) && styles.hasError];
@@ -175,7 +176,7 @@ var EuiMarkdownEditorDropZone = exports.EuiMarkdownEditorDropZone = function Eui
175
176
  return (0, _react2.jsx)("div", (0, _extends2.default)({}, rootProps, {
176
177
  css: cssStyles,
177
178
  className: classes
178
- }), children, (0, _react2.jsx)(_markdown_editor_footer.EuiMarkdownEditorFooter, {
179
+ }), children, showFooter && (0, _react2.jsx)(_markdown_editor_footer.EuiMarkdownEditorFooter, {
179
180
  ref: setEditorFooterRef,
180
181
  uiPlugins: uiPlugins,
181
182
  openFiles: function openFiles() {