@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 _react = _interopRequireWildcard(require("react"));
20
15
  var _common = require("../../common");
@@ -22,19 +17,19 @@ var _i18n = require("../../i18n");
22
17
  var _icon = require("../../icon");
23
18
  var _accessibility = require("../../accessibility");
24
19
  var _badge = require("../../badge");
20
+ var _tool_tip = require("../../tool_tip");
25
21
  var _react2 = require("@emotion/react");
26
- var _excluded = ["children", "className", "disabled", "checked", "isFocused", "showIcons", "prepend", "append", "allowExclusions", "onFocusBadge", "paddingSize", "role", "searchable", "textWrap"],
22
+ var _excluded = ["children", "className", "disabled", "checked", "isFocused", "showIcons", "prepend", "append", "allowExclusions", "onFocusBadge", "paddingSize", "role", "searchable", "textWrap", "toolTipContent", "toolTipProps", "aria-describedby"],
27
23
  _excluded2 = ["children", "className"];
24
+ /*
25
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
26
+ * or more contributor license agreements. Licensed under the Elastic License
27
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
28
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
29
+ * Side Public License, v 1.
30
+ */
28
31
  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); }
29
32
  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; }
30
- 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); }; }
31
- 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; } } /*
32
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
33
- * or more contributor license agreements. Licensed under the Elastic License
34
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
35
- * in compliance with, at your election, the Elastic License 2.0 or the Server
36
- * Side Public License, v 1.
37
- */
38
33
  function resolveIconAndColor(checked) {
39
34
  switch (checked) {
40
35
  case 'on':
@@ -65,195 +60,220 @@ var paddingSizeToClassNameMap = {
65
60
  };
66
61
  var PADDING_SIZES = (0, _common.keysOf)(paddingSizeToClassNameMap);
67
62
  exports.PADDING_SIZES = PADDING_SIZES;
68
- var EuiSelectableListItem = /*#__PURE__*/function (_Component) {
69
- (0, _inherits2.default)(EuiSelectableListItem, _Component);
70
- var _super = _createSuper(EuiSelectableListItem);
71
- function EuiSelectableListItem(props) {
72
- var _this;
73
- (0, _classCallCheck2.default)(this, EuiSelectableListItem);
74
- _this = _super.call(this, props);
75
- // aria-checked is intended to be used with role="checkbox" but
76
- // the MDN documentation lists it as a possibility for role="option".
77
- // See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
78
- // and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role
79
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isChecked", function (role, checked) {
80
- var rolesThatCanBeMixed = ['option', 'checkbox', 'menuitemcheckbox'];
81
- var rolesThatCanBeChecked = [].concat(rolesThatCanBeMixed, ['radio', 'menuitemradio', 'switch']);
82
- if (!rolesThatCanBeChecked.includes(role)) return undefined;
83
- switch (checked) {
84
- case 'on':
85
- case 'off':
86
- return true;
87
- case 'mixed':
88
- if (rolesThatCanBeMixed.includes(role)) {
89
- return 'mixed';
90
- } else {
91
- return false;
92
- }
93
- default:
94
- return false;
95
- }
96
- });
97
- return _this;
98
- }
99
- (0, _createClass2.default)(EuiSelectableListItem, [{
100
- key: "render",
101
- value: function render() {
102
- var _this$props = this.props,
103
- children = _this$props.children,
104
- className = _this$props.className,
105
- disabled = _this$props.disabled,
106
- checked = _this$props.checked,
107
- isFocused = _this$props.isFocused,
108
- showIcons = _this$props.showIcons,
109
- prepend = _this$props.prepend,
110
- append = _this$props.append,
111
- allowExclusions = _this$props.allowExclusions,
112
- onFocusBadge = _this$props.onFocusBadge,
113
- _this$props$paddingSi = _this$props.paddingSize,
114
- paddingSize = _this$props$paddingSi === void 0 ? 's' : _this$props$paddingSi,
115
- _this$props$role = _this$props.role,
116
- role = _this$props$role === void 0 ? 'option' : _this$props$role,
117
- searchable = _this$props.searchable,
118
- textWrap = _this$props.textWrap,
119
- rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
120
- var classes = (0, _classnames.default)('euiSelectableListItem', {
121
- 'euiSelectableListItem-isFocused': isFocused
122
- }, paddingSizeToClassNameMap[paddingSize], className);
123
- var textClasses = (0, _classnames.default)('euiSelectableListItem__text', (0, _defineProperty2.default)({}, "euiSelectableListItem__text--".concat(textWrap), textWrap));
124
- var optionIcon;
125
- if (showIcons) {
126
- var _resolveIconAndColor = resolveIconAndColor(checked),
127
- icon = _resolveIconAndColor.icon,
128
- color = _resolveIconAndColor.color;
129
- optionIcon = (0, _react2.jsx)(_icon.EuiIcon, {
130
- className: "euiSelectableListItem__icon",
131
- color: color,
132
- type: icon
133
- });
134
- }
135
- var state;
136
- var instructions;
137
- var screenReaderStrings = {
138
- checked: {
139
- state: (0, _react2.jsx)(_i18n.EuiI18n, {
140
- token: "euiSelectableListItem.checkedOption",
141
- default: "Checked option."
142
- }),
143
- instructions: (0, _react2.jsx)(_i18n.EuiI18n, {
144
- token: "euiSelectableListItem.checkOptionInstructions",
145
- default: "To check this option, press Enter."
146
- })
147
- },
148
- unchecked: {
149
- instructions: (0, _react2.jsx)(_i18n.EuiI18n, {
150
- token: "euiSelectableListItem.uncheckOptionInstructions",
151
- default: "To uncheck this option, press Enter."
152
- })
153
- },
154
- excluded: {
155
- state: (0, _react2.jsx)(_i18n.EuiI18n, {
156
- token: "euiSelectableListItem.excludedOption",
157
- default: "Excluded option."
158
- }),
159
- instructions: (0, _react2.jsx)(_i18n.EuiI18n, {
160
- token: "euiSelectableListItem.excludeOptionInstructions",
161
- default: "To exclude this option, press Enter."
162
- })
163
- },
164
- mixed: {
165
- state: (0, _react2.jsx)(_i18n.EuiI18n, {
166
- token: "euiSelectableListItem.mixedOption",
167
- default: "Mixed (indeterminate) option."
168
- }),
169
- instructions: (0, _react2.jsx)(_i18n.EuiI18n, {
170
- token: "euiSelectableListItem.mixedOptionInstructions",
171
- default: "To check this option for all, press Enter once."
172
- }),
173
- uncheckInstructions: (0, _react2.jsx)(_i18n.EuiI18n, {
174
- token: "euiSelectableListItem.mixedOptionUncheckInstructions",
175
- default: "To uncheck this option for all, press Enter twice."
176
- }),
177
- excludeInstructions: (0, _react2.jsx)(_i18n.EuiI18n, {
178
- token: "euiSelectableListItem.mixedOptionExcludeInstructions",
179
- default: "To exclude this option for all, press Enter twice."
180
- })
181
- }
182
- };
183
- switch (checked) {
184
- case 'on':
185
- state = screenReaderStrings.checked.state;
186
- instructions = allowExclusions ? screenReaderStrings.excluded.instructions : searchable ? screenReaderStrings.unchecked.instructions : undefined;
187
- break;
188
- case 'off':
189
- state = screenReaderStrings.excluded.state;
190
- instructions = screenReaderStrings.unchecked.instructions;
191
- break;
192
- case 'mixed':
193
- state = screenReaderStrings.mixed.state;
194
- instructions = (0, _react2.jsx)(_react.default.Fragment, null, screenReaderStrings.mixed.instructions, ' ', allowExclusions ? screenReaderStrings.mixed.excludeInstructions : screenReaderStrings.mixed.uncheckInstructions);
195
- break;
196
- case undefined:
197
- default:
198
- instructions = allowExclusions || searchable ? screenReaderStrings.checked.instructions : undefined;
199
- break;
200
- }
201
- var prependNode;
202
- if (prepend) {
203
- prependNode = (0, _react2.jsx)("span", {
204
- className: "euiSelectableListItem__prepend"
205
- }, prepend);
63
+ var EuiSelectableListItem = function EuiSelectableListItem(_ref) {
64
+ var children = _ref.children,
65
+ className = _ref.className,
66
+ disabled = _ref.disabled,
67
+ checked = _ref.checked,
68
+ isFocused = _ref.isFocused,
69
+ _ref$showIcons = _ref.showIcons,
70
+ showIcons = _ref$showIcons === void 0 ? true : _ref$showIcons,
71
+ prepend = _ref.prepend,
72
+ append = _ref.append,
73
+ allowExclusions = _ref.allowExclusions,
74
+ _ref$onFocusBadge = _ref.onFocusBadge,
75
+ onFocusBadge = _ref$onFocusBadge === void 0 ? true : _ref$onFocusBadge,
76
+ _ref$paddingSize = _ref.paddingSize,
77
+ paddingSize = _ref$paddingSize === void 0 ? 's' : _ref$paddingSize,
78
+ _ref$role = _ref.role,
79
+ role = _ref$role === void 0 ? 'option' : _ref$role,
80
+ searchable = _ref.searchable,
81
+ _ref$textWrap = _ref.textWrap,
82
+ textWrap = _ref$textWrap === void 0 ? 'truncate' : _ref$textWrap,
83
+ toolTipContent = _ref.toolTipContent,
84
+ toolTipProps = _ref.toolTipProps,
85
+ _ariaDescribedBy = _ref['aria-describedby'],
86
+ rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
87
+ var classes = (0, _classnames.default)('euiSelectableListItem', {
88
+ 'euiSelectableListItem-isFocused': isFocused
89
+ }, paddingSizeToClassNameMap[paddingSize], className);
90
+ var textClasses = (0, _classnames.default)('euiSelectableListItem__text', (0, _defineProperty2.default)({}, "euiSelectableListItem__text--".concat(textWrap), textWrap));
91
+ var optionIcon = (0, _react.useMemo)(function () {
92
+ if (showIcons) {
93
+ var _resolveIconAndColor = resolveIconAndColor(checked),
94
+ icon = _resolveIconAndColor.icon,
95
+ color = _resolveIconAndColor.color;
96
+ return (0, _react2.jsx)(_icon.EuiIcon, {
97
+ className: "euiSelectableListItem__icon",
98
+ color: color,
99
+ type: icon
100
+ });
101
+ }
102
+ }, [showIcons, checked]);
103
+ var prependNode = (0, _react.useMemo)(function () {
104
+ if (prepend) {
105
+ return (0, _react2.jsx)("span", {
106
+ className: "euiSelectableListItem__prepend"
107
+ }, prepend);
108
+ }
109
+ }, [prepend]);
110
+ var onFocusBadgeNode = (0, _react.useMemo)(function () {
111
+ var defaultOnFocusBadgeProps = {
112
+ 'aria-hidden': true,
113
+ iconType: 'returnKey',
114
+ iconSide: 'left',
115
+ color: 'hollow'
116
+ };
117
+ if (onFocusBadge === true) {
118
+ return (0, _react2.jsx)(_badge.EuiBadge, (0, _extends2.default)({
119
+ className: "euiSelectableListItem__onFocusBadge"
120
+ }, defaultOnFocusBadgeProps));
121
+ } else if (typeof onFocusBadge !== 'boolean' && !!onFocusBadge) {
122
+ var _children = onFocusBadge.children,
123
+ _className = onFocusBadge.className,
124
+ restBadgeProps = (0, _objectWithoutProperties2.default)(onFocusBadge, _excluded2);
125
+ return (0, _react2.jsx)(_badge.EuiBadge, (0, _extends2.default)({
126
+ className: (0, _classnames.default)('euiSelectableListItem__onFocusBadge', _className)
127
+ }, defaultOnFocusBadgeProps, restBadgeProps), _children);
128
+ }
129
+ }, [onFocusBadge]);
130
+ var showOnFocusBadge = !!(isFocused && !disabled && onFocusBadgeNode);
131
+ var appendNode = (0, _react.useMemo)(function () {
132
+ if (append || showOnFocusBadge) {
133
+ return (0, _react2.jsx)("span", {
134
+ className: "euiSelectableListItem__append"
135
+ }, append, " ", showOnFocusBadge ? onFocusBadgeNode : null);
136
+ }
137
+ }, [append, showOnFocusBadge, onFocusBadgeNode]);
138
+ var screenReaderText = (0, _react.useMemo)(function () {
139
+ var state;
140
+ var instructions;
141
+ var screenReaderStrings = {
142
+ checked: {
143
+ state: (0, _react2.jsx)(_i18n.EuiI18n, {
144
+ token: "euiSelectableListItem.checkedOption",
145
+ default: "Checked option."
146
+ }),
147
+ instructions: (0, _react2.jsx)(_i18n.EuiI18n, {
148
+ token: "euiSelectableListItem.checkOptionInstructions",
149
+ default: "To check this option, press Enter."
150
+ })
151
+ },
152
+ unchecked: {
153
+ instructions: (0, _react2.jsx)(_i18n.EuiI18n, {
154
+ token: "euiSelectableListItem.uncheckOptionInstructions",
155
+ default: "To uncheck this option, press Enter."
156
+ })
157
+ },
158
+ excluded: {
159
+ state: (0, _react2.jsx)(_i18n.EuiI18n, {
160
+ token: "euiSelectableListItem.excludedOption",
161
+ default: "Excluded option."
162
+ }),
163
+ instructions: (0, _react2.jsx)(_i18n.EuiI18n, {
164
+ token: "euiSelectableListItem.excludeOptionInstructions",
165
+ default: "To exclude this option, press Enter."
166
+ })
167
+ },
168
+ mixed: {
169
+ state: (0, _react2.jsx)(_i18n.EuiI18n, {
170
+ token: "euiSelectableListItem.mixedOption",
171
+ default: "Mixed (indeterminate) option."
172
+ }),
173
+ instructions: (0, _react2.jsx)(_i18n.EuiI18n, {
174
+ token: "euiSelectableListItem.mixedOptionInstructions",
175
+ default: "To check this option for all, press Enter once."
176
+ }),
177
+ uncheckInstructions: (0, _react2.jsx)(_i18n.EuiI18n, {
178
+ token: "euiSelectableListItem.mixedOptionUncheckInstructions",
179
+ default: "To uncheck this option for all, press Enter twice."
180
+ }),
181
+ excludeInstructions: (0, _react2.jsx)(_i18n.EuiI18n, {
182
+ token: "euiSelectableListItem.mixedOptionExcludeInstructions",
183
+ default: "To exclude this option for all, press Enter twice."
184
+ })
206
185
  }
207
- var appendNode;
208
- if (append || !!onFocusBadge) {
209
- var onFocusBadgeNode;
210
- var defaultOnFocusBadgeProps = {
211
- 'aria-hidden': true,
212
- iconType: 'returnKey',
213
- iconSide: 'left',
214
- color: 'hollow'
215
- };
216
- if (onFocusBadge === true) {
217
- onFocusBadgeNode = (0, _react2.jsx)(_badge.EuiBadge, (0, _extends2.default)({
218
- className: "euiSelectableListItem__onFocusBadge"
219
- }, defaultOnFocusBadgeProps));
220
- } else if (typeof onFocusBadge !== 'boolean' && !!onFocusBadge) {
221
- var _children = onFocusBadge.children,
222
- _className = onFocusBadge.className,
223
- restBadgeProps = (0, _objectWithoutProperties2.default)(onFocusBadge, _excluded2);
224
- onFocusBadgeNode = (0, _react2.jsx)(_badge.EuiBadge, (0, _extends2.default)({
225
- className: (0, _classnames.default)('euiSelectableListItem__onFocusBadge', _className)
226
- }, defaultOnFocusBadgeProps, restBadgeProps), _children);
227
- }
186
+ };
187
+ switch (checked) {
188
+ case 'on':
189
+ state = screenReaderStrings.checked.state;
190
+ instructions = allowExclusions ? screenReaderStrings.excluded.instructions : searchable ? screenReaderStrings.unchecked.instructions : undefined;
191
+ break;
192
+ case 'off':
193
+ state = screenReaderStrings.excluded.state;
194
+ instructions = screenReaderStrings.unchecked.instructions;
195
+ break;
196
+ case 'mixed':
197
+ state = screenReaderStrings.mixed.state;
198
+ instructions = (0, _react2.jsx)(_react.default.Fragment, null, screenReaderStrings.mixed.instructions, ' ', allowExclusions ? screenReaderStrings.mixed.excludeInstructions : screenReaderStrings.mixed.uncheckInstructions);
199
+ break;
200
+ case undefined:
201
+ default:
202
+ instructions = allowExclusions || searchable ? screenReaderStrings.checked.instructions : undefined;
203
+ break;
204
+ }
205
+ return state || instructions ? (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("div", null, state || instructions ? '. ' : null, state, state && instructions ? ' ' : null, instructions)) : null;
206
+ }, [checked, searchable, allowExclusions]);
228
207
 
229
- // Only display the append wrapper if append exists or isFocused
230
- if (append || isFocused && !disabled) {
231
- appendNode = (0, _react2.jsx)("span", {
232
- className: "euiSelectableListItem__append"
233
- }, append, " ", isFocused && !disabled ? onFocusBadgeNode : null);
208
+ // aria-checked is intended to be used with role="checkbox" but
209
+ // the MDN documentation lists it as a possibility for role="option".
210
+ // See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
211
+ // and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role
212
+ var ariaChecked = (0, _react.useMemo)(function () {
213
+ var rolesThatCanBeMixed = ['option', 'checkbox', 'menuitemcheckbox'];
214
+ var rolesThatCanBeChecked = [].concat(rolesThatCanBeMixed, ['radio', 'menuitemradio', 'switch']);
215
+ if (!rolesThatCanBeChecked.includes(role)) return undefined;
216
+ switch (checked) {
217
+ case 'on':
218
+ case 'off':
219
+ return true;
220
+ case 'mixed':
221
+ if (rolesThatCanBeMixed.includes(role)) {
222
+ return 'mixed';
223
+ } else {
224
+ return false;
234
225
  }
235
- }
236
- var screenReaderText = (state || instructions) && (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("div", null, state || instructions ? '. ' : null, state, state && instructions ? ' ' : null, instructions));
237
- return (0, _react2.jsx)("li", (0, _extends2.default)({
238
- role: role,
239
- "aria-disabled": disabled,
240
- "aria-checked": this.isChecked(role, checked) // Whether the item is "checked"
241
- ,
242
- "aria-selected": !disabled && isFocused // Whether the item has keyboard focus per W3 spec
243
- ,
244
- className: classes
245
- }, rest), (0, _react2.jsx)("span", {
246
- className: "euiSelectableListItem__content"
247
- }, optionIcon, prependNode, (0, _react2.jsx)("span", {
248
- className: textClasses
249
- }, children, screenReaderText), appendNode));
226
+ default:
227
+ return false;
250
228
  }
251
- }]);
252
- return EuiSelectableListItem;
253
- }(_react.Component);
254
- exports.EuiSelectableListItem = EuiSelectableListItem;
255
- (0, _defineProperty2.default)(EuiSelectableListItem, "defaultProps", {
256
- showIcons: true,
257
- onFocusBadge: true,
258
- textWrap: 'truncate'
259
- });
229
+ }, [role, checked]);
230
+ var hasToolTip = !!toolTipContent && !disabled;
231
+ var _useState = (0, _react.useState)(null),
232
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
233
+ tooltipRef = _useState2[0],
234
+ setTooltipRef = _useState2[1]; // Needs to be state and not a ref to trigger useEffect
235
+ var _useState3 = (0, _react.useState)(_ariaDescribedBy),
236
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
237
+ ariaDescribedBy = _useState4[0],
238
+ setAriaDescribedBy = _useState4[1];
239
+
240
+ // Manually trigger the tooltip on keyboard focus
241
+ (0, _react.useEffect)(function () {
242
+ if (!tooltipRef) return;
243
+ if (isFocused) {
244
+ tooltipRef.showToolTip();
245
+ } else {
246
+ tooltipRef.hideToolTip();
247
+ }
248
+ }, [isFocused, tooltipRef]);
249
+
250
+ // Manually set the `aria-describedby` id on the <li> wrapper
251
+ (0, _react.useEffect)(function () {
252
+ if (tooltipRef) {
253
+ var tooltipId = tooltipRef.state.id;
254
+ setAriaDescribedBy((0, _classnames.default)(tooltipId, _ariaDescribedBy));
255
+ }
256
+ }, [tooltipRef, _ariaDescribedBy]);
257
+ var content = (0, _react2.jsx)("span", {
258
+ className: "euiSelectableListItem__content"
259
+ }, optionIcon, prependNode, (0, _react2.jsx)("span", {
260
+ className: textClasses
261
+ }, children, screenReaderText), appendNode);
262
+ return (0, _react2.jsx)("li", (0, _extends2.default)({
263
+ role: role,
264
+ "aria-disabled": disabled,
265
+ "aria-checked": ariaChecked // Whether the item is "checked"
266
+ ,
267
+ "aria-selected": !disabled && isFocused // Whether the item has keyboard focus per W3 spec
268
+ ,
269
+ className: classes
270
+ }, rest, {
271
+ "aria-describedby": ariaDescribedBy
272
+ }), hasToolTip ? (0, _react2.jsx)(_tool_tip.EuiToolTip, (0, _extends2.default)({
273
+ ref: setTooltipRef,
274
+ content: toolTipContent,
275
+ anchorClassName: "euiSelectableListItem__tooltipAnchor",
276
+ position: "left"
277
+ }, toolTipProps), content) : content);
278
+ };
279
+ exports.EuiSelectableListItem = EuiSelectableListItem;
@@ -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;
@@ -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"));
@@ -26,6 +26,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
26
26
  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; }
27
27
  var COLORS = ['default', 'subdued', 'success', 'accent', 'danger', 'warning', 'ghost', 'inherit'];
28
28
  exports.COLORS = COLORS;
29
+ var _isNamedColor = function _isNamedColor(color) {
30
+ return COLORS.includes(color);
31
+ };
32
+ exports._isNamedColor = _isNamedColor;
29
33
  var EuiTextColor = function EuiTextColor(_ref) {
30
34
  var children = _ref.children,
31
35
  _ref$color = _ref.color,
@@ -36,7 +40,7 @@ var EuiTextColor = function EuiTextColor(_ref) {
36
40
  cloneElement = _ref$cloneElement === void 0 ? false : _ref$cloneElement,
37
41
  style = _ref.style,
38
42
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
39
- var isNamedColor = COLORS.includes(color);
43
+ var isNamedColor = _isNamedColor(color);
40
44
  var styles = (0, _services.useEuiMemoizedStyles)(_text_color.euiTextColorStyles);
41
45
  var cssStyles = [styles.euiTextColor, isNamedColor ? styles[color] : styles.customColor];
42
46
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elastic/eui",
3
3
  "description": "Elastic UI Component Library",
4
- "version": "94.3.0",
4
+ "version": "94.4.1",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "lib",
7
7
  "module": "es",
@@ -43,21 +43,13 @@
43
43
  "release-backport": "node ./scripts/release.js --type=backport",
44
44
  "release-rc": "node ./scripts/release.js --type=prerelease",
45
45
  "storybook": "yarn compile-scss && storybook dev -p 6006",
46
- "build-storybook": "yarn compile-scss && storybook build"
46
+ "build-storybook": "yarn compile-scss && storybook build",
47
+ "pre-push": "yarn test-staged"
47
48
  },
48
49
  "repository": {
49
50
  "type": "git",
50
51
  "url": "https://github.com/elastic/eui.git"
51
52
  },
52
- "resolutions": {
53
- "**/prismjs": "1.27.0",
54
- "**/react": "^18",
55
- "**/@types/react": "^18",
56
- "react-focus-lock": "^2.9.5"
57
- },
58
- "pre-push": [
59
- "test-staged"
60
- ],
61
53
  "dependencies": {
62
54
  "@hello-pangea/dnd": "^16.6.0",
63
55
  "@types/lodash": "^4.14.202",
@@ -118,6 +110,8 @@
118
110
  "@emotion/jest": "^11.11.0",
119
111
  "@emotion/react": "^11.11.0",
120
112
  "@faker-js/faker": "^8.0.2",
113
+ "@loki/create-async-callback": "^0.35.0",
114
+ "@loki/is-loki-running": "^0.35.0",
121
115
  "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
122
116
  "@storybook/addon-essentials": "^8.0.5",
123
117
  "@storybook/addon-interactions": "^8.0.5",
@@ -212,7 +206,6 @@
212
206
  "postcss-inline-svg": "^4.1.0",
213
207
  "postcss-loader": "^7.0.1",
214
208
  "postcss-styled-syntax": "^0.4.0",
215
- "pre-push": "^0.1.4",
216
209
  "prettier": "^2.8.8",
217
210
  "process": "^0.11.10",
218
211
  "raw-loader": "^4.0.1",
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2018 HackerOne Inc and individual contributors
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.