@elastic/eui 94.3.0 → 94.4.1

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 (145) hide show
  1. package/README.md +3 -0
  2. package/dist/eui_charts_theme.js +1519 -1519
  3. package/dist/eui_charts_theme.js.map +1 -1
  4. package/dist/eui_theme_dark.css +41 -497
  5. package/dist/eui_theme_dark.min.css +1 -1
  6. package/dist/eui_theme_light.css +41 -497
  7. package/dist/eui_theme_light.min.css +1 -1
  8. package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js +5 -1
  9. package/es/components/date_picker/super_date_picker/date_popover/absolute_tab.js +25 -11
  10. package/es/components/form/form.styles.js +26 -3
  11. package/es/components/markdown_editor/markdown_editor.js +12 -8
  12. package/es/components/markdown_editor/markdown_editor.styles.js +29 -0
  13. package/es/components/markdown_editor/markdown_editor_drop_zone.js +22 -9
  14. package/es/components/markdown_editor/markdown_editor_drop_zone.styles.js +33 -0
  15. package/es/components/markdown_editor/markdown_editor_footer.js +11 -2
  16. package/es/components/markdown_editor/markdown_editor_footer.styles.js +26 -0
  17. package/es/components/markdown_editor/markdown_editor_text_area.js +6 -1
  18. package/es/components/markdown_editor/markdown_editor_text_area.styles.js +22 -0
  19. package/es/components/markdown_editor/markdown_editor_toolbar.js +10 -2
  20. package/es/components/markdown_editor/markdown_editor_toolbar.styles.js +21 -0
  21. package/es/components/markdown_editor/markdown_format.js +9 -6
  22. package/es/components/markdown_editor/markdown_format.styles.js +25 -10
  23. package/es/components/markdown_editor/plugins/markdown_checkbox/renderer.js +9 -3
  24. package/es/components/markdown_editor/plugins/markdown_tooltip/renderer.js +13 -2
  25. package/es/components/selectable/selectable.js +10 -2
  26. package/es/components/selectable/selectable_list/selectable_list.js +95 -42
  27. package/es/components/selectable/selectable_list/selectable_list_item.js +234 -204
  28. package/es/components/selectable/selectable_option.js +9 -1
  29. package/es/components/selectable/selectable_templates/selectable_template_sitewide.js +10 -2
  30. package/es/components/text/text_color.js +4 -1
  31. package/es/components/toast/global_toast_list_item.js +5 -5
  32. package/eui.d.ts +332 -234
  33. package/i18ntokens.json +124 -106
  34. package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js +5 -1
  35. package/lib/components/date_picker/super_date_picker/date_popover/absolute_tab.js +25 -11
  36. package/lib/components/form/form.styles.js +30 -4
  37. package/lib/components/markdown_editor/markdown_editor.js +12 -8
  38. package/lib/components/markdown_editor/markdown_editor.styles.js +37 -0
  39. package/lib/components/markdown_editor/markdown_editor_drop_zone.js +20 -8
  40. package/lib/components/markdown_editor/markdown_editor_drop_zone.styles.js +38 -0
  41. package/lib/components/markdown_editor/markdown_editor_footer.js +10 -1
  42. package/lib/components/markdown_editor/markdown_editor_footer.styles.js +33 -0
  43. package/lib/components/markdown_editor/markdown_editor_text_area.js +6 -1
  44. package/lib/components/markdown_editor/markdown_editor_text_area.styles.js +29 -0
  45. package/lib/components/markdown_editor/markdown_editor_toolbar.js +10 -2
  46. package/lib/components/markdown_editor/markdown_editor_toolbar.styles.js +28 -0
  47. package/lib/components/markdown_editor/markdown_format.js +8 -5
  48. package/lib/components/markdown_editor/markdown_format.styles.js +25 -10
  49. package/lib/components/markdown_editor/plugins/markdown_checkbox/renderer.js +9 -4
  50. package/lib/components/markdown_editor/plugins/markdown_tooltip/renderer.js +19 -10
  51. package/lib/components/selectable/selectable.js +10 -2
  52. package/lib/components/selectable/selectable_list/selectable_list.js +95 -42
  53. package/lib/components/selectable/selectable_list/selectable_list_item.js +241 -210
  54. package/lib/components/selectable/selectable_option.js +12 -1
  55. package/lib/components/selectable/selectable_templates/selectable_template_sitewide.js +10 -2
  56. package/lib/components/text/text_color.js +6 -2
  57. package/lib/components/toast/global_toast_list_item.js +5 -5
  58. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js +5 -1
  59. package/optimize/es/components/date_picker/super_date_picker/date_popover/absolute_tab.js +25 -11
  60. package/optimize/es/components/form/form.styles.js +26 -3
  61. package/optimize/es/components/markdown_editor/markdown_editor.js +12 -8
  62. package/optimize/es/components/markdown_editor/markdown_editor.styles.js +29 -0
  63. package/optimize/es/components/markdown_editor/markdown_editor_drop_zone.js +19 -9
  64. package/optimize/es/components/markdown_editor/markdown_editor_drop_zone.styles.js +33 -0
  65. package/optimize/es/components/markdown_editor/markdown_editor_footer.js +11 -2
  66. package/optimize/es/components/markdown_editor/markdown_editor_footer.styles.js +26 -0
  67. package/optimize/es/components/markdown_editor/markdown_editor_text_area.js +6 -1
  68. package/optimize/es/components/markdown_editor/markdown_editor_text_area.styles.js +22 -0
  69. package/optimize/es/components/markdown_editor/markdown_editor_toolbar.js +10 -2
  70. package/optimize/es/components/markdown_editor/markdown_editor_toolbar.styles.js +21 -0
  71. package/optimize/es/components/markdown_editor/markdown_format.js +9 -6
  72. package/optimize/es/components/markdown_editor/markdown_format.styles.js +25 -10
  73. package/optimize/es/components/markdown_editor/plugins/markdown_checkbox/renderer.js +9 -3
  74. package/optimize/es/components/markdown_editor/plugins/markdown_tooltip/renderer.js +13 -2
  75. package/optimize/es/components/selectable/selectable_list/selectable_list.js +81 -38
  76. package/optimize/es/components/selectable/selectable_list/selectable_list_item.js +217 -198
  77. package/optimize/es/components/selectable/selectable_option.js +9 -1
  78. package/optimize/es/components/text/text_color.js +4 -1
  79. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js +5 -1
  80. package/optimize/lib/components/date_picker/super_date_picker/date_popover/absolute_tab.js +25 -11
  81. package/optimize/lib/components/form/form.styles.js +30 -4
  82. package/optimize/lib/components/markdown_editor/markdown_editor.js +12 -8
  83. package/optimize/lib/components/markdown_editor/markdown_editor.styles.js +37 -0
  84. package/optimize/lib/components/markdown_editor/markdown_editor_drop_zone.js +24 -16
  85. package/optimize/lib/components/markdown_editor/markdown_editor_drop_zone.styles.js +38 -0
  86. package/optimize/lib/components/markdown_editor/markdown_editor_footer.js +10 -1
  87. package/optimize/lib/components/markdown_editor/markdown_editor_footer.styles.js +33 -0
  88. package/optimize/lib/components/markdown_editor/markdown_editor_text_area.js +6 -1
  89. package/optimize/lib/components/markdown_editor/markdown_editor_text_area.styles.js +29 -0
  90. package/optimize/lib/components/markdown_editor/markdown_editor_toolbar.js +10 -2
  91. package/optimize/lib/components/markdown_editor/markdown_editor_toolbar.styles.js +28 -0
  92. package/optimize/lib/components/markdown_editor/markdown_format.js +8 -5
  93. package/optimize/lib/components/markdown_editor/markdown_format.styles.js +25 -10
  94. package/optimize/lib/components/markdown_editor/plugins/markdown_checkbox/renderer.js +9 -4
  95. package/optimize/lib/components/markdown_editor/plugins/markdown_tooltip/renderer.js +19 -10
  96. package/optimize/lib/components/selectable/selectable_list/selectable_list.js +81 -38
  97. package/optimize/lib/components/selectable/selectable_list/selectable_list_item.js +224 -204
  98. package/optimize/lib/components/selectable/selectable_option.js +12 -1
  99. package/optimize/lib/components/text/text_color.js +6 -2
  100. package/package.json +5 -12
  101. package/src/components/date_picker/react-datepicker/LICENSE +21 -0
  102. package/src/components/date_picker/react-datepicker/README.md +168 -0
  103. package/src/components/date_picker/super_date_picker/date_popover/_absolute_tab.scss +13 -18
  104. package/src/components/form/checkbox/_checkbox.scss +23 -6
  105. package/src/components/index.scss +0 -1
  106. package/src/components/selectable/selectable_list/_selectable_list_item.scss +4 -0
  107. package/src/components/selectable/selectable_templates/_selectable_template_sitewide_option.scss +5 -1
  108. package/src/services/theme/README.md +153 -0
  109. package/src/test/README.md +44 -0
  110. package/src/themes/amsterdam/overrides/_index.scss +0 -1
  111. package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js +5 -1
  112. package/test-env/components/date_picker/super_date_picker/date_popover/absolute_tab.js +25 -11
  113. package/test-env/components/form/form.styles.js +30 -4
  114. package/test-env/components/markdown_editor/markdown_editor.js +12 -8
  115. package/test-env/components/markdown_editor/markdown_editor.styles.js +37 -0
  116. package/test-env/components/markdown_editor/markdown_editor_drop_zone.js +24 -16
  117. package/test-env/components/markdown_editor/markdown_editor_drop_zone.styles.js +38 -0
  118. package/test-env/components/markdown_editor/markdown_editor_footer.js +10 -1
  119. package/test-env/components/markdown_editor/markdown_editor_footer.styles.js +33 -0
  120. package/test-env/components/markdown_editor/markdown_editor_text_area.js +6 -1
  121. package/test-env/components/markdown_editor/markdown_editor_text_area.styles.js +29 -0
  122. package/test-env/components/markdown_editor/markdown_editor_toolbar.js +10 -2
  123. package/test-env/components/markdown_editor/markdown_editor_toolbar.styles.js +28 -0
  124. package/test-env/components/markdown_editor/markdown_format.js +8 -5
  125. package/test-env/components/markdown_editor/markdown_format.styles.js +25 -10
  126. package/test-env/components/markdown_editor/plugins/markdown_checkbox/renderer.js +9 -4
  127. package/test-env/components/markdown_editor/plugins/markdown_tooltip/renderer.js +19 -10
  128. package/test-env/components/selectable/selectable.js +10 -2
  129. package/test-env/components/selectable/selectable_list/selectable_list.js +95 -42
  130. package/test-env/components/selectable/selectable_list/selectable_list_item.js +233 -205
  131. package/test-env/components/selectable/selectable_option.js +12 -1
  132. package/test-env/components/selectable/selectable_templates/selectable_template_sitewide.js +10 -2
  133. package/test-env/components/text/text_color.js +6 -2
  134. package/test-env/components/toast/global_toast_list_item.js +5 -5
  135. package/src/components/markdown_editor/_index.scss +0 -9
  136. package/src/components/markdown_editor/_markdown_editor.scss +0 -22
  137. package/src/components/markdown_editor/_markdown_editor_drop_zone.scss +0 -58
  138. package/src/components/markdown_editor/_markdown_editor_footer.scss +0 -42
  139. package/src/components/markdown_editor/_markdown_editor_preview.scss +0 -20
  140. package/src/components/markdown_editor/_markdown_editor_text_area.scss +0 -43
  141. package/src/components/markdown_editor/_markdown_editor_toolbar.scss +0 -29
  142. package/src/components/markdown_editor/_markdown_format.scss +0 -78
  143. package/src/components/markdown_editor/_variables.scss +0 -1
  144. package/src/components/markdown_editor/plugins/markdown_tooltip.scss +0 -4
  145. package/src/themes/amsterdam/overrides/_markdown_editor.scss +0 -18
@@ -6,15 +6,10 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.PADDING_SIZES = exports.EuiSelectableListItem = void 0;
9
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
12
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
13
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
14
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
15
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
16
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
17
11
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
12
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
18
13
  var _classnames = _interopRequireDefault(require("classnames"));
19
14
  var _propTypes = _interopRequireDefault(require("prop-types"));
20
15
  var _react = _interopRequireWildcard(require("react"));
@@ -23,19 +18,19 @@ var _i18n = require("../../i18n");
23
18
  var _icon = require("../../icon");
24
19
  var _accessibility = require("../../accessibility");
25
20
  var _badge = require("../../badge");
21
+ var _tool_tip = require("../../tool_tip");
26
22
  var _react2 = require("@emotion/react");
27
- var _excluded = ["children", "className", "disabled", "checked", "isFocused", "showIcons", "prepend", "append", "allowExclusions", "onFocusBadge", "paddingSize", "role", "searchable", "textWrap"],
23
+ var _excluded = ["children", "className", "disabled", "checked", "isFocused", "showIcons", "prepend", "append", "allowExclusions", "onFocusBadge", "paddingSize", "role", "searchable", "textWrap", "toolTipContent", "toolTipProps", "aria-describedby"],
28
24
  _excluded2 = ["children", "className"];
25
+ /*
26
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
27
+ * or more contributor license agreements. Licensed under the Elastic License
28
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
29
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
30
+ * Side Public License, v 1.
31
+ */
29
32
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
30
33
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
32
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /*
33
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
34
- * or more contributor license agreements. Licensed under the Elastic License
35
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
36
- * in compliance with, at your election, the Elastic License 2.0 or the Server
37
- * Side Public License, v 1.
38
- */
39
34
  function resolveIconAndColor(checked) {
40
35
  switch (checked) {
41
36
  case 'on':
@@ -66,198 +61,223 @@ var paddingSizeToClassNameMap = {
66
61
  };
67
62
  var PADDING_SIZES = (0, _common.keysOf)(paddingSizeToClassNameMap);
68
63
  exports.PADDING_SIZES = PADDING_SIZES;
69
- var EuiSelectableListItem = /*#__PURE__*/function (_Component) {
70
- (0, _inherits2.default)(EuiSelectableListItem, _Component);
71
- var _super = _createSuper(EuiSelectableListItem);
72
- function EuiSelectableListItem(props) {
73
- var _this;
74
- (0, _classCallCheck2.default)(this, EuiSelectableListItem);
75
- _this = _super.call(this, props);
76
- // aria-checked is intended to be used with role="checkbox" but
77
- // the MDN documentation lists it as a possibility for role="option".
78
- // See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
79
- // and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role
80
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isChecked", function (role, checked) {
81
- var rolesThatCanBeMixed = ['option', 'checkbox', 'menuitemcheckbox'];
82
- var rolesThatCanBeChecked = [].concat(rolesThatCanBeMixed, ['radio', 'menuitemradio', 'switch']);
83
- if (!rolesThatCanBeChecked.includes(role)) return undefined;
84
- switch (checked) {
85
- case 'on':
86
- case 'off':
87
- return true;
88
- case 'mixed':
89
- if (rolesThatCanBeMixed.includes(role)) {
90
- return 'mixed';
91
- } else {
92
- return false;
93
- }
94
- default:
95
- return false;
96
- }
97
- });
98
- return _this;
99
- }
100
- (0, _createClass2.default)(EuiSelectableListItem, [{
101
- key: "render",
102
- value: function render() {
103
- var _this$props = this.props,
104
- children = _this$props.children,
105
- className = _this$props.className,
106
- disabled = _this$props.disabled,
107
- checked = _this$props.checked,
108
- isFocused = _this$props.isFocused,
109
- showIcons = _this$props.showIcons,
110
- prepend = _this$props.prepend,
111
- append = _this$props.append,
112
- allowExclusions = _this$props.allowExclusions,
113
- onFocusBadge = _this$props.onFocusBadge,
114
- _this$props$paddingSi = _this$props.paddingSize,
115
- paddingSize = _this$props$paddingSi === void 0 ? 's' : _this$props$paddingSi,
116
- _this$props$role = _this$props.role,
117
- role = _this$props$role === void 0 ? 'option' : _this$props$role,
118
- searchable = _this$props.searchable,
119
- textWrap = _this$props.textWrap,
120
- rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
121
- var classes = (0, _classnames.default)('euiSelectableListItem', {
122
- 'euiSelectableListItem-isFocused': isFocused
123
- }, paddingSizeToClassNameMap[paddingSize], className);
124
- var textClasses = (0, _classnames.default)('euiSelectableListItem__text', (0, _defineProperty2.default)({}, "euiSelectableListItem__text--".concat(textWrap), textWrap));
125
- var optionIcon;
126
- if (showIcons) {
127
- var _resolveIconAndColor = resolveIconAndColor(checked),
128
- icon = _resolveIconAndColor.icon,
129
- color = _resolveIconAndColor.color;
130
- optionIcon = (0, _react2.jsx)(_icon.EuiIcon, {
131
- className: "euiSelectableListItem__icon",
132
- color: color,
133
- type: icon
134
- });
135
- }
136
- var state;
137
- var instructions;
138
- var screenReaderStrings = {
139
- checked: {
140
- state: (0, _react2.jsx)(_i18n.EuiI18n, {
141
- token: "euiSelectableListItem.checkedOption",
142
- default: "Checked option."
143
- }),
144
- instructions: (0, _react2.jsx)(_i18n.EuiI18n, {
145
- token: "euiSelectableListItem.checkOptionInstructions",
146
- default: "To check this option, press Enter."
147
- })
148
- },
149
- unchecked: {
150
- instructions: (0, _react2.jsx)(_i18n.EuiI18n, {
151
- token: "euiSelectableListItem.uncheckOptionInstructions",
152
- default: "To uncheck this option, press Enter."
153
- })
154
- },
155
- excluded: {
156
- state: (0, _react2.jsx)(_i18n.EuiI18n, {
157
- token: "euiSelectableListItem.excludedOption",
158
- default: "Excluded option."
159
- }),
160
- instructions: (0, _react2.jsx)(_i18n.EuiI18n, {
161
- token: "euiSelectableListItem.excludeOptionInstructions",
162
- default: "To exclude this option, press Enter."
163
- })
164
- },
165
- mixed: {
166
- state: (0, _react2.jsx)(_i18n.EuiI18n, {
167
- token: "euiSelectableListItem.mixedOption",
168
- default: "Mixed (indeterminate) option."
169
- }),
170
- instructions: (0, _react2.jsx)(_i18n.EuiI18n, {
171
- token: "euiSelectableListItem.mixedOptionInstructions",
172
- default: "To check this option for all, press Enter once."
173
- }),
174
- uncheckInstructions: (0, _react2.jsx)(_i18n.EuiI18n, {
175
- token: "euiSelectableListItem.mixedOptionUncheckInstructions",
176
- default: "To uncheck this option for all, press Enter twice."
177
- }),
178
- excludeInstructions: (0, _react2.jsx)(_i18n.EuiI18n, {
179
- token: "euiSelectableListItem.mixedOptionExcludeInstructions",
180
- default: "To exclude this option for all, press Enter twice."
181
- })
182
- }
183
- };
184
- switch (checked) {
185
- case 'on':
186
- state = screenReaderStrings.checked.state;
187
- instructions = allowExclusions ? screenReaderStrings.excluded.instructions : searchable ? screenReaderStrings.unchecked.instructions : undefined;
188
- break;
189
- case 'off':
190
- state = screenReaderStrings.excluded.state;
191
- instructions = screenReaderStrings.unchecked.instructions;
192
- break;
193
- case 'mixed':
194
- state = screenReaderStrings.mixed.state;
195
- instructions = (0, _react2.jsx)(_react.default.Fragment, null, screenReaderStrings.mixed.instructions, ' ', allowExclusions ? screenReaderStrings.mixed.excludeInstructions : screenReaderStrings.mixed.uncheckInstructions);
196
- break;
197
- case undefined:
198
- default:
199
- instructions = allowExclusions || searchable ? screenReaderStrings.checked.instructions : undefined;
200
- break;
201
- }
202
- var prependNode;
203
- if (prepend) {
204
- prependNode = (0, _react2.jsx)("span", {
205
- className: "euiSelectableListItem__prepend"
206
- }, prepend);
64
+ var EuiSelectableListItem = function EuiSelectableListItem(_ref) {
65
+ var children = _ref.children,
66
+ className = _ref.className,
67
+ disabled = _ref.disabled,
68
+ checked = _ref.checked,
69
+ isFocused = _ref.isFocused,
70
+ _ref$showIcons = _ref.showIcons,
71
+ showIcons = _ref$showIcons === void 0 ? true : _ref$showIcons,
72
+ prepend = _ref.prepend,
73
+ append = _ref.append,
74
+ allowExclusions = _ref.allowExclusions,
75
+ _ref$onFocusBadge = _ref.onFocusBadge,
76
+ onFocusBadge = _ref$onFocusBadge === void 0 ? true : _ref$onFocusBadge,
77
+ _ref$paddingSize = _ref.paddingSize,
78
+ paddingSize = _ref$paddingSize === void 0 ? 's' : _ref$paddingSize,
79
+ _ref$role = _ref.role,
80
+ role = _ref$role === void 0 ? 'option' : _ref$role,
81
+ searchable = _ref.searchable,
82
+ _ref$textWrap = _ref.textWrap,
83
+ textWrap = _ref$textWrap === void 0 ? 'truncate' : _ref$textWrap,
84
+ toolTipContent = _ref.toolTipContent,
85
+ toolTipProps = _ref.toolTipProps,
86
+ _ariaDescribedBy = _ref['aria-describedby'],
87
+ rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
88
+ var classes = (0, _classnames.default)('euiSelectableListItem', {
89
+ 'euiSelectableListItem-isFocused': isFocused
90
+ }, paddingSizeToClassNameMap[paddingSize], className);
91
+ var textClasses = (0, _classnames.default)('euiSelectableListItem__text', (0, _defineProperty2.default)({}, "euiSelectableListItem__text--".concat(textWrap), textWrap));
92
+ var optionIcon = (0, _react.useMemo)(function () {
93
+ if (showIcons) {
94
+ var _resolveIconAndColor = resolveIconAndColor(checked),
95
+ icon = _resolveIconAndColor.icon,
96
+ color = _resolveIconAndColor.color;
97
+ return (0, _react2.jsx)(_icon.EuiIcon, {
98
+ className: "euiSelectableListItem__icon",
99
+ color: color,
100
+ type: icon
101
+ });
102
+ }
103
+ }, [showIcons, checked]);
104
+ var prependNode = (0, _react.useMemo)(function () {
105
+ if (prepend) {
106
+ return (0, _react2.jsx)("span", {
107
+ className: "euiSelectableListItem__prepend"
108
+ }, prepend);
109
+ }
110
+ }, [prepend]);
111
+ var onFocusBadgeNode = (0, _react.useMemo)(function () {
112
+ var defaultOnFocusBadgeProps = {
113
+ 'aria-hidden': true,
114
+ iconType: 'returnKey',
115
+ iconSide: 'left',
116
+ color: 'hollow'
117
+ };
118
+ if (onFocusBadge === true) {
119
+ return (0, _react2.jsx)(_badge.EuiBadge, (0, _extends2.default)({
120
+ className: "euiSelectableListItem__onFocusBadge"
121
+ }, defaultOnFocusBadgeProps));
122
+ } else if (typeof onFocusBadge !== 'boolean' && !!onFocusBadge) {
123
+ var _children = onFocusBadge.children,
124
+ _className = onFocusBadge.className,
125
+ restBadgeProps = (0, _objectWithoutProperties2.default)(onFocusBadge, _excluded2);
126
+ return (0, _react2.jsx)(_badge.EuiBadge, (0, _extends2.default)({
127
+ className: (0, _classnames.default)('euiSelectableListItem__onFocusBadge', _className)
128
+ }, defaultOnFocusBadgeProps, restBadgeProps), _children);
129
+ }
130
+ }, [onFocusBadge]);
131
+ var showOnFocusBadge = !!(isFocused && !disabled && onFocusBadgeNode);
132
+ var appendNode = (0, _react.useMemo)(function () {
133
+ if (append || showOnFocusBadge) {
134
+ return (0, _react2.jsx)("span", {
135
+ className: "euiSelectableListItem__append"
136
+ }, append, " ", showOnFocusBadge ? onFocusBadgeNode : null);
137
+ }
138
+ }, [append, showOnFocusBadge, onFocusBadgeNode]);
139
+ var screenReaderText = (0, _react.useMemo)(function () {
140
+ var state;
141
+ var instructions;
142
+ var screenReaderStrings = {
143
+ checked: {
144
+ state: (0, _react2.jsx)(_i18n.EuiI18n, {
145
+ token: "euiSelectableListItem.checkedOption",
146
+ default: "Checked option."
147
+ }),
148
+ instructions: (0, _react2.jsx)(_i18n.EuiI18n, {
149
+ token: "euiSelectableListItem.checkOptionInstructions",
150
+ default: "To check this option, press Enter."
151
+ })
152
+ },
153
+ unchecked: {
154
+ instructions: (0, _react2.jsx)(_i18n.EuiI18n, {
155
+ token: "euiSelectableListItem.uncheckOptionInstructions",
156
+ default: "To uncheck this option, press Enter."
157
+ })
158
+ },
159
+ excluded: {
160
+ state: (0, _react2.jsx)(_i18n.EuiI18n, {
161
+ token: "euiSelectableListItem.excludedOption",
162
+ default: "Excluded option."
163
+ }),
164
+ instructions: (0, _react2.jsx)(_i18n.EuiI18n, {
165
+ token: "euiSelectableListItem.excludeOptionInstructions",
166
+ default: "To exclude this option, press Enter."
167
+ })
168
+ },
169
+ mixed: {
170
+ state: (0, _react2.jsx)(_i18n.EuiI18n, {
171
+ token: "euiSelectableListItem.mixedOption",
172
+ default: "Mixed (indeterminate) option."
173
+ }),
174
+ instructions: (0, _react2.jsx)(_i18n.EuiI18n, {
175
+ token: "euiSelectableListItem.mixedOptionInstructions",
176
+ default: "To check this option for all, press Enter once."
177
+ }),
178
+ uncheckInstructions: (0, _react2.jsx)(_i18n.EuiI18n, {
179
+ token: "euiSelectableListItem.mixedOptionUncheckInstructions",
180
+ default: "To uncheck this option for all, press Enter twice."
181
+ }),
182
+ excludeInstructions: (0, _react2.jsx)(_i18n.EuiI18n, {
183
+ token: "euiSelectableListItem.mixedOptionExcludeInstructions",
184
+ default: "To exclude this option for all, press Enter twice."
185
+ })
207
186
  }
208
- var appendNode;
209
- if (append || !!onFocusBadge) {
210
- var onFocusBadgeNode;
211
- var defaultOnFocusBadgeProps = {
212
- 'aria-hidden': true,
213
- iconType: 'returnKey',
214
- iconSide: 'left',
215
- color: 'hollow'
216
- };
217
- if (onFocusBadge === true) {
218
- onFocusBadgeNode = (0, _react2.jsx)(_badge.EuiBadge, (0, _extends2.default)({
219
- className: "euiSelectableListItem__onFocusBadge"
220
- }, defaultOnFocusBadgeProps));
221
- } else if (typeof onFocusBadge !== 'boolean' && !!onFocusBadge) {
222
- var _children = onFocusBadge.children,
223
- _className = onFocusBadge.className,
224
- restBadgeProps = (0, _objectWithoutProperties2.default)(onFocusBadge, _excluded2);
225
- onFocusBadgeNode = (0, _react2.jsx)(_badge.EuiBadge, (0, _extends2.default)({
226
- className: (0, _classnames.default)('euiSelectableListItem__onFocusBadge', _className)
227
- }, defaultOnFocusBadgeProps, restBadgeProps), _children);
228
- }
187
+ };
188
+ switch (checked) {
189
+ case 'on':
190
+ state = screenReaderStrings.checked.state;
191
+ instructions = allowExclusions ? screenReaderStrings.excluded.instructions : searchable ? screenReaderStrings.unchecked.instructions : undefined;
192
+ break;
193
+ case 'off':
194
+ state = screenReaderStrings.excluded.state;
195
+ instructions = screenReaderStrings.unchecked.instructions;
196
+ break;
197
+ case 'mixed':
198
+ state = screenReaderStrings.mixed.state;
199
+ instructions = (0, _react2.jsx)(_react.default.Fragment, null, screenReaderStrings.mixed.instructions, ' ', allowExclusions ? screenReaderStrings.mixed.excludeInstructions : screenReaderStrings.mixed.uncheckInstructions);
200
+ break;
201
+ case undefined:
202
+ default:
203
+ instructions = allowExclusions || searchable ? screenReaderStrings.checked.instructions : undefined;
204
+ break;
205
+ }
206
+ return state || instructions ? (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("div", null, state || instructions ? '. ' : null, state, state && instructions ? ' ' : null, instructions)) : null;
207
+ }, [checked, searchable, allowExclusions]);
229
208
 
230
- // Only display the append wrapper if append exists or isFocused
231
- if (append || isFocused && !disabled) {
232
- appendNode = (0, _react2.jsx)("span", {
233
- className: "euiSelectableListItem__append"
234
- }, append, " ", isFocused && !disabled ? onFocusBadgeNode : null);
209
+ // aria-checked is intended to be used with role="checkbox" but
210
+ // the MDN documentation lists it as a possibility for role="option".
211
+ // See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
212
+ // and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role
213
+ var ariaChecked = (0, _react.useMemo)(function () {
214
+ var rolesThatCanBeMixed = ['option', 'checkbox', 'menuitemcheckbox'];
215
+ var rolesThatCanBeChecked = [].concat(rolesThatCanBeMixed, ['radio', 'menuitemradio', 'switch']);
216
+ if (!rolesThatCanBeChecked.includes(role)) return undefined;
217
+ switch (checked) {
218
+ case 'on':
219
+ case 'off':
220
+ return true;
221
+ case 'mixed':
222
+ if (rolesThatCanBeMixed.includes(role)) {
223
+ return 'mixed';
224
+ } else {
225
+ return false;
235
226
  }
236
- }
237
- var screenReaderText = (state || instructions) && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("div", null, state || instructions ? '. ' : null, state, state && instructions ? ' ' : null, instructions));
238
- return (0, _react2.jsx)("li", (0, _extends2.default)({
239
- role: role,
240
- "aria-disabled": disabled,
241
- "aria-checked": this.isChecked(role, checked) // Whether the item is "checked"
242
- ,
243
- "aria-selected": !disabled && isFocused // Whether the item has keyboard focus per W3 spec
244
- ,
245
- className: classes
246
- }, rest), (0, _react2.jsx)("span", {
247
- className: "euiSelectableListItem__content"
248
- }, optionIcon, prependNode, (0, _react2.jsx)("span", {
249
- className: textClasses
250
- }, children, screenReaderText), appendNode));
227
+ default:
228
+ return false;
229
+ }
230
+ }, [role, checked]);
231
+ var hasToolTip = !!toolTipContent && !disabled;
232
+ var _useState = (0, _react.useState)(null),
233
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
234
+ tooltipRef = _useState2[0],
235
+ setTooltipRef = _useState2[1]; // Needs to be state and not a ref to trigger useEffect
236
+ var _useState3 = (0, _react.useState)(_ariaDescribedBy),
237
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
238
+ ariaDescribedBy = _useState4[0],
239
+ setAriaDescribedBy = _useState4[1];
240
+
241
+ // Manually trigger the tooltip on keyboard focus
242
+ (0, _react.useEffect)(function () {
243
+ if (!tooltipRef) return;
244
+ if (isFocused) {
245
+ tooltipRef.showToolTip();
246
+ } else {
247
+ tooltipRef.hideToolTip();
248
+ }
249
+ }, [isFocused, tooltipRef]);
250
+
251
+ // Manually set the `aria-describedby` id on the <li> wrapper
252
+ (0, _react.useEffect)(function () {
253
+ if (tooltipRef) {
254
+ var tooltipId = tooltipRef.state.id;
255
+ setAriaDescribedBy((0, _classnames.default)(tooltipId, _ariaDescribedBy));
251
256
  }
252
- }]);
253
- return EuiSelectableListItem;
254
- }(_react.Component);
257
+ }, [tooltipRef, _ariaDescribedBy]);
258
+ var content = (0, _react2.jsx)("span", {
259
+ className: "euiSelectableListItem__content"
260
+ }, optionIcon, prependNode, (0, _react2.jsx)("span", {
261
+ className: textClasses
262
+ }, children, screenReaderText), appendNode);
263
+ return (0, _react2.jsx)("li", (0, _extends2.default)({
264
+ role: role,
265
+ "aria-disabled": disabled,
266
+ "aria-checked": ariaChecked // Whether the item is "checked"
267
+ ,
268
+ "aria-selected": !disabled && isFocused // Whether the item has keyboard focus per W3 spec
269
+ ,
270
+ className: classes
271
+ }, rest, {
272
+ "aria-describedby": ariaDescribedBy
273
+ }), hasToolTip ? (0, _react2.jsx)(_tool_tip.EuiToolTip, (0, _extends2.default)({
274
+ ref: setTooltipRef,
275
+ content: toolTipContent,
276
+ anchorClassName: "euiSelectableListItem__tooltipAnchor",
277
+ position: "left"
278
+ }, toolTipProps), content) : content);
279
+ };
255
280
  exports.EuiSelectableListItem = EuiSelectableListItem;
256
- (0, _defineProperty2.default)(EuiSelectableListItem, "defaultProps", {
257
- showIcons: true,
258
- onFocusBadge: true,
259
- textWrap: 'truncate'
260
- });
261
281
  EuiSelectableListItem.propTypes = {
262
282
  className: _propTypes.default.string,
263
283
  "aria-label": _propTypes.default.string,
@@ -267,7 +287,7 @@ EuiSelectableListItem.propTypes = {
267
287
  /**
268
288
  * Applies an icon and visual styling to activated items
269
289
  */
270
- checked: _propTypes.default.oneOf(["on", "off", "mixed", undefined]),
290
+ checked: _propTypes.default.any,
271
291
  /**
272
292
  * Shows icons based on `checked` type
273
293
  */
@@ -350,5 +370,13 @@ EuiSelectableListItem.propTypes = {
350
370
  * How to handle long text within the item.
351
371
  * Wrapping only works if virtualization is off.
352
372
  */
353
- textWrap: _propTypes.default.oneOf(["truncate", "wrap"])
373
+ textWrap: _propTypes.default.oneOf(["truncate", "wrap"]),
374
+ /**
375
+ * Optional custom tooltip content for the button
376
+ */
377
+ toolTipContent: _propTypes.default.node,
378
+ /**
379
+ * Optional props to pass to the underlying **[EuiToolTip](/#/display/tooltip)**
380
+ */
381
+ toolTipProps: _propTypes.default.any
354
382
  };
@@ -2,4 +2,15 @@
2
2
 
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
- });
5
+ });
6
+ exports.OPTION_CHECKED_STATES = void 0;
7
+ /*
8
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
9
+ * or more contributor license agreements. Licensed under the Elastic License
10
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
11
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
12
+ * Side Public License, v 1.
13
+ */
14
+
15
+ var OPTION_CHECKED_STATES = ['on', 'off', 'mixed', undefined];
16
+ exports.OPTION_CHECKED_STATES = OPTION_CHECKED_STATES;
@@ -376,7 +376,7 @@ EuiSelectableTemplateSitewide.propTypes = {
376
376
  * 'on' to indicate inclusion, 'off' to indicate exclusion,
377
377
  * or 'mixed' to indicate inclusion for some.
378
378
  */
379
- checked: _propTypes.default.oneOf(["on", "off", "mixed", undefined]),
379
+ checked: _propTypes.default.any,
380
380
  disabled: _propTypes.default.bool,
381
381
  /**
382
382
  * Node to add between the selection icon and the label
@@ -406,7 +406,15 @@ EuiSelectableTemplateSitewide.propTypes = {
406
406
  * Note: when searching, custom truncation props are ignored. The highlighted search
407
407
  * text will always take precedence.
408
408
  */
409
- truncationProps: _propTypes.default.any
409
+ truncationProps: _propTypes.default.any,
410
+ /**
411
+ * Optional custom tooltip content for the button
412
+ */
413
+ toolTipContent: _propTypes.default.node,
414
+ /**
415
+ * Optional props to pass to the underlying **[EuiToolTip](/#/display/tooltip)**
416
+ */
417
+ toolTipProps: _propTypes.default.any
410
418
  }).isRequired).isRequired,
411
419
  /**
412
420
  * Override some of the EuiPopover props housing the list.
@@ -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.EuiTextColor = exports.COLORS = void 0;
8
+ exports._isNamedColor = exports.EuiTextColor = exports.COLORS = void 0;
9
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
11
  var _react = _interopRequireWildcard(require("react"));
@@ -27,6 +27,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
27
27
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
28
28
  var COLORS = ['default', 'subdued', 'success', 'accent', 'danger', 'warning', 'ghost', 'inherit'];
29
29
  exports.COLORS = COLORS;
30
+ var _isNamedColor = function _isNamedColor(color) {
31
+ return COLORS.includes(color);
32
+ };
33
+ exports._isNamedColor = _isNamedColor;
30
34
  var EuiTextColor = function EuiTextColor(_ref) {
31
35
  var children = _ref.children,
32
36
  _ref$color = _ref.color,
@@ -37,7 +41,7 @@ var EuiTextColor = function EuiTextColor(_ref) {
37
41
  cloneElement = _ref$cloneElement === void 0 ? false : _ref$cloneElement,
38
42
  style = _ref.style,
39
43
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
40
- var isNamedColor = COLORS.includes(color);
44
+ var isNamedColor = _isNamedColor(color);
41
45
  var styles = (0, _services.useEuiMemoizedStyles)(_text_color.euiTextColorStyles);
42
46
  var cssStyles = [styles.euiTextColor, isNamedColor ? styles[color] : styles.customColor];
43
47
 
@@ -36,13 +36,13 @@ var EuiGlobalToastListItem = function EuiGlobalToastListItem(_ref) {
36
36
  };
37
37
  exports.EuiGlobalToastListItem = EuiGlobalToastListItem;
38
38
  EuiGlobalToastListItem.propTypes = {
39
- className: _propTypes.default.string,
40
- "aria-label": _propTypes.default.string,
41
- "data-test-subj": _propTypes.default.string,
42
- css: _propTypes.default.any,
43
39
  isDismissed: _propTypes.default.bool,
44
40
  /**
45
41
  * ReactElement to render as this component's content
46
42
  */
47
- children: _propTypes.default.element
43
+ children: _propTypes.default.element,
44
+ className: _propTypes.default.string,
45
+ "aria-label": _propTypes.default.string,
46
+ "data-test-subj": _propTypes.default.string,
47
+ css: _propTypes.default.any
48
48
  };
@@ -1,9 +0,0 @@
1
- @import 'variables';
2
- @import 'markdown_editor';
3
- @import 'markdown_editor_drop_zone';
4
- @import 'markdown_format';
5
- @import 'markdown_editor_footer';
6
- @import 'markdown_editor_preview';
7
- @import 'markdown_editor_text_area';
8
- @import 'markdown_editor_toolbar';
9
- @import 'plugins/markdown_tooltip';
@@ -1,22 +0,0 @@
1
- .euiMarkdownEditor {
2
- display: flex;
3
- flex-direction: column;
4
-
5
- &--isPreviewing {
6
- .euiMarkdownEditor__toggleContainer {
7
- display: none;
8
- }
9
- }
10
-
11
- &--fullHeight {
12
- height: 100%;
13
-
14
- .euiMarkdownEditorTextArea {
15
- resize: none;
16
- }
17
-
18
- .euiMarkdownEditorDropZone {
19
- height: 100%;
20
- }
21
- }
22
- }