@elastic/eui 88.5.4 → 89.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (206) hide show
  1. package/dist/eui_theme_dark.css +26 -526
  2. package/dist/eui_theme_dark.min.css +1 -1
  3. package/dist/eui_theme_light.css +26 -526
  4. package/dist/eui_theme_light.min.css +1 -1
  5. package/es/components/basic_table/basic_table.js +7 -2
  6. package/es/components/basic_table/in_memory_table.js +7 -2
  7. package/es/components/collapsible_nav/collapsible_nav.js +5 -0
  8. package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -2
  9. package/es/components/color_picker/index.js +0 -4
  10. package/es/components/combo_box/combo_box.js +142 -304
  11. package/es/components/combo_box/combo_box_input/combo_box_input.js +0 -13
  12. package/es/components/combo_box/combo_box_options_list/combo_box_options_list.js +34 -118
  13. package/es/components/context_menu/context_menu_panel.js +6 -6
  14. package/es/components/flex/flex_grid.styles.js +1 -1
  15. package/es/components/flex/flex_group.styles.js +1 -1
  16. package/es/components/flyout/flyout.js +32 -33
  17. package/es/components/flyout/flyout.styles.js +13 -3
  18. package/es/components/form/range/dual_range.js +4 -0
  19. package/es/components/form/range/range.js +4 -0
  20. package/es/components/index.js +0 -1
  21. package/es/components/popover/input_popover.js +47 -3
  22. package/es/components/popover/popover.js +2 -2
  23. package/es/components/table/table_row_cell.js +27 -9
  24. package/es/components/text_truncate/index.js +1 -0
  25. package/es/components/text_truncate/text_block_truncate.js +78 -0
  26. package/es/global_styling/reset/global_styles.js +16 -2
  27. package/es/services/accessibility/index.js +0 -3
  28. package/es/services/index.js +1 -1
  29. package/es/test/rtl/component_helpers.d.ts +2 -0
  30. package/es/test/rtl/component_helpers.js +29 -1
  31. package/eui.d.ts +375 -667
  32. package/i18ntokens.json +52 -286
  33. package/lib/components/basic_table/basic_table.js +7 -2
  34. package/lib/components/basic_table/in_memory_table.js +7 -2
  35. package/lib/components/collapsible_nav/collapsible_nav.js +5 -0
  36. package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -2
  37. package/lib/components/color_picker/index.js +0 -7
  38. package/lib/components/combo_box/combo_box.js +141 -303
  39. package/lib/components/combo_box/combo_box_input/combo_box_input.js +0 -13
  40. package/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js +34 -118
  41. package/lib/components/context_menu/context_menu_panel.js +5 -5
  42. package/lib/components/flex/flex_grid.styles.js +1 -1
  43. package/lib/components/flex/flex_group.styles.js +1 -1
  44. package/lib/components/flyout/flyout.js +31 -32
  45. package/lib/components/flyout/flyout.styles.js +19 -10
  46. package/lib/components/form/range/dual_range.js +4 -0
  47. package/lib/components/index.js +0 -11
  48. package/lib/components/popover/input_popover.js +48 -3
  49. package/lib/components/popover/popover.js +1 -1
  50. package/lib/components/table/table_row_cell.js +26 -8
  51. package/lib/components/text_truncate/index.js +7 -0
  52. package/lib/components/text_truncate/text_block_truncate.js +85 -0
  53. package/lib/global_styling/reset/global_styles.js +16 -2
  54. package/lib/services/accessibility/index.js +0 -21
  55. package/lib/services/index.js +0 -21
  56. package/lib/test/rtl/component_helpers.d.ts +2 -0
  57. package/lib/test/rtl/component_helpers.js +31 -2
  58. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -2
  59. package/optimize/es/components/color_picker/index.js +0 -4
  60. package/optimize/es/components/combo_box/combo_box.js +137 -304
  61. package/optimize/es/components/combo_box/combo_box_input/combo_box_input.js +0 -12
  62. package/optimize/es/components/combo_box/combo_box_options_list/combo_box_options_list.js +28 -107
  63. package/optimize/es/components/context_menu/context_menu_panel.js +6 -6
  64. package/optimize/es/components/flex/flex_grid.styles.js +1 -1
  65. package/optimize/es/components/flex/flex_group.styles.js +1 -1
  66. package/optimize/es/components/flyout/flyout.js +32 -33
  67. package/optimize/es/components/flyout/flyout.styles.js +13 -3
  68. package/optimize/es/components/index.js +0 -1
  69. package/optimize/es/components/popover/input_popover.js +43 -3
  70. package/optimize/es/components/popover/popover.js +2 -2
  71. package/optimize/es/components/table/table_row_cell.js +13 -5
  72. package/optimize/es/components/text_truncate/index.js +1 -0
  73. package/optimize/es/components/text_truncate/text_block_truncate.js +58 -0
  74. package/optimize/es/global_styling/reset/global_styles.js +13 -2
  75. package/optimize/es/services/accessibility/index.js +0 -3
  76. package/optimize/es/services/index.js +1 -1
  77. package/optimize/es/test/rtl/component_helpers.d.ts +2 -0
  78. package/optimize/es/test/rtl/component_helpers.js +29 -1
  79. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -2
  80. package/optimize/lib/components/color_picker/index.js +0 -7
  81. package/optimize/lib/components/combo_box/combo_box.js +136 -303
  82. package/optimize/lib/components/combo_box/combo_box_input/combo_box_input.js +0 -12
  83. package/optimize/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js +28 -107
  84. package/optimize/lib/components/context_menu/context_menu_panel.js +5 -5
  85. package/optimize/lib/components/flex/flex_grid.styles.js +1 -1
  86. package/optimize/lib/components/flex/flex_group.styles.js +1 -1
  87. package/optimize/lib/components/flyout/flyout.js +31 -32
  88. package/optimize/lib/components/flyout/flyout.styles.js +19 -10
  89. package/optimize/lib/components/index.js +0 -11
  90. package/optimize/lib/components/popover/input_popover.js +44 -3
  91. package/optimize/lib/components/popover/popover.js +1 -1
  92. package/optimize/lib/components/table/table_row_cell.js +12 -4
  93. package/optimize/lib/components/text_truncate/index.js +7 -0
  94. package/optimize/lib/components/text_truncate/text_block_truncate.js +66 -0
  95. package/optimize/lib/global_styling/reset/global_styles.js +19 -10
  96. package/optimize/lib/services/accessibility/index.js +0 -21
  97. package/optimize/lib/services/index.js +0 -21
  98. package/optimize/lib/test/rtl/component_helpers.d.ts +2 -0
  99. package/optimize/lib/test/rtl/component_helpers.js +31 -2
  100. package/package.json +1 -1
  101. package/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss +5 -15
  102. package/src/components/context_menu/_context_menu_panel.scss +4 -0
  103. package/src/components/index.scss +0 -1
  104. package/src/global_styling/mixins/_index.scss +0 -1
  105. package/src/global_styling/variables/_index.scss +0 -1
  106. package/src/test/README.md +0 -15
  107. package/src/themes/amsterdam/global_styling/mixins/_index.scss +0 -1
  108. package/test-env/components/basic_table/basic_table.js +7 -2
  109. package/test-env/components/basic_table/in_memory_table.js +7 -2
  110. package/test-env/components/collapsible_nav/collapsible_nav.js +5 -0
  111. package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -2
  112. package/test-env/components/color_picker/index.js +0 -7
  113. package/test-env/components/combo_box/combo_box.js +141 -303
  114. package/test-env/components/combo_box/combo_box_input/combo_box_input.js +0 -13
  115. package/test-env/components/combo_box/combo_box_options_list/combo_box_options_list.js +33 -117
  116. package/test-env/components/context_menu/context_menu_panel.js +5 -5
  117. package/test-env/components/flex/flex_grid.styles.js +1 -1
  118. package/test-env/components/flex/flex_group.styles.js +1 -1
  119. package/test-env/components/flyout/flyout.styles.js +19 -10
  120. package/test-env/components/form/range/dual_range.js +4 -0
  121. package/test-env/components/index.js +0 -11
  122. package/test-env/components/popover/input_popover.js +48 -3
  123. package/test-env/components/popover/popover.js +1 -1
  124. package/test-env/components/table/table_row_cell.js +26 -8
  125. package/test-env/components/text_truncate/index.js +7 -0
  126. package/test-env/components/text_truncate/text_block_truncate.js +82 -0
  127. package/test-env/global_styling/reset/global_styles.js +19 -10
  128. package/test-env/services/accessibility/index.js +0 -21
  129. package/test-env/services/index.js +0 -21
  130. package/test-env/test/rtl/component_helpers.js +31 -2
  131. package/es/components/color_picker/color_stops/color_stop_thumb.js +0 -371
  132. package/es/components/color_picker/color_stops/color_stop_thumb.styles.js +0 -55
  133. package/es/components/color_picker/color_stops/color_stops.js +0 -499
  134. package/es/components/color_picker/color_stops/color_stops.styles.js +0 -61
  135. package/es/components/color_picker/color_stops/index.js +0 -9
  136. package/es/components/color_picker/color_stops/utils.js +0 -95
  137. package/es/components/suggest/index.js +0 -10
  138. package/es/components/suggest/suggest.a11y.js +0 -70
  139. package/es/components/suggest/suggest.js +0 -347
  140. package/es/components/suggest/suggest_item.js +0 -123
  141. package/es/components/suggest/types.js +0 -9
  142. package/es/services/accessibility/accessible_click_keys.js +0 -17
  143. package/es/services/accessibility/cascading_menu_keys.js +0 -28
  144. package/es/services/accessibility/combo_box_keys.js +0 -25
  145. package/lib/components/color_picker/color_stops/color_stop_thumb.js +0 -380
  146. package/lib/components/color_picker/color_stops/color_stop_thumb.styles.js +0 -62
  147. package/lib/components/color_picker/color_stops/color_stops.js +0 -505
  148. package/lib/components/color_picker/color_stops/color_stops.styles.js +0 -67
  149. package/lib/components/color_picker/color_stops/index.js +0 -12
  150. package/lib/components/color_picker/color_stops/utils.js +0 -108
  151. package/lib/components/suggest/index.js +0 -19
  152. package/lib/components/suggest/suggest.a11y.js +0 -73
  153. package/lib/components/suggest/suggest.js +0 -356
  154. package/lib/components/suggest/suggest_item.js +0 -130
  155. package/lib/components/suggest/types.js +0 -16
  156. package/lib/services/accessibility/accessible_click_keys.js +0 -21
  157. package/lib/services/accessibility/cascading_menu_keys.js +0 -35
  158. package/lib/services/accessibility/combo_box_keys.js +0 -32
  159. package/optimize/es/components/color_picker/color_stops/color_stop_thumb.js +0 -329
  160. package/optimize/es/components/color_picker/color_stops/color_stop_thumb.styles.js +0 -55
  161. package/optimize/es/components/color_picker/color_stops/color_stops.js +0 -444
  162. package/optimize/es/components/color_picker/color_stops/color_stops.styles.js +0 -61
  163. package/optimize/es/components/color_picker/color_stops/index.js +0 -9
  164. package/optimize/es/components/color_picker/color_stops/utils.js +0 -90
  165. package/optimize/es/components/suggest/index.js +0 -10
  166. package/optimize/es/components/suggest/suggest.a11y.js +0 -70
  167. package/optimize/es/components/suggest/suggest.js +0 -256
  168. package/optimize/es/components/suggest/suggest_item.js +0 -89
  169. package/optimize/es/components/suggest/types.js +0 -9
  170. package/optimize/es/services/accessibility/accessible_click_keys.js +0 -14
  171. package/optimize/es/services/accessibility/cascading_menu_keys.js +0 -28
  172. package/optimize/es/services/accessibility/combo_box_keys.js +0 -25
  173. package/optimize/lib/components/color_picker/color_stops/color_stop_thumb.js +0 -339
  174. package/optimize/lib/components/color_picker/color_stops/color_stop_thumb.styles.js +0 -62
  175. package/optimize/lib/components/color_picker/color_stops/color_stops.js +0 -451
  176. package/optimize/lib/components/color_picker/color_stops/color_stops.styles.js +0 -67
  177. package/optimize/lib/components/color_picker/color_stops/index.js +0 -12
  178. package/optimize/lib/components/color_picker/color_stops/utils.js +0 -106
  179. package/optimize/lib/components/suggest/index.js +0 -19
  180. package/optimize/lib/components/suggest/suggest.a11y.js +0 -73
  181. package/optimize/lib/components/suggest/suggest.js +0 -266
  182. package/optimize/lib/components/suggest/suggest_item.js +0 -96
  183. package/optimize/lib/components/suggest/types.js +0 -16
  184. package/optimize/lib/services/accessibility/accessible_click_keys.js +0 -20
  185. package/optimize/lib/services/accessibility/cascading_menu_keys.js +0 -35
  186. package/optimize/lib/services/accessibility/combo_box_keys.js +0 -32
  187. package/src/components/suggest/_index.scss +0 -5
  188. package/src/components/suggest/_suggest_input.scss +0 -4
  189. package/src/components/suggest/_suggest_item.scss +0 -103
  190. package/src/components/suggest/_variables.scss +0 -13
  191. package/src/global_styling/mixins/_header.scss +0 -29
  192. package/src/global_styling/variables/_header.scss +0 -3
  193. package/test-env/components/color_picker/color_stops/color_stop_thumb.js +0 -372
  194. package/test-env/components/color_picker/color_stops/color_stop_thumb.styles.js +0 -62
  195. package/test-env/components/color_picker/color_stops/color_stops.js +0 -494
  196. package/test-env/components/color_picker/color_stops/color_stops.styles.js +0 -67
  197. package/test-env/components/color_picker/color_stops/index.js +0 -12
  198. package/test-env/components/color_picker/color_stops/utils.js +0 -106
  199. package/test-env/components/suggest/index.js +0 -19
  200. package/test-env/components/suggest/suggest.a11y.js +0 -73
  201. package/test-env/components/suggest/suggest.js +0 -348
  202. package/test-env/components/suggest/suggest_item.js +0 -129
  203. package/test-env/components/suggest/types.js +0 -16
  204. package/test-env/services/accessibility/accessible_click_keys.js +0 -20
  205. package/test-env/services/accessibility/cascading_menu_keys.js +0 -35
  206. package/test-env/services/accessibility/combo_box_keys.js +0 -32
@@ -1,444 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
- import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
5
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
6
- var _excluded = ["addColor", "max", "min", "mode", "colorStops", "onChange", "disabled", "readOnly", "compressed", "fullWidth", "className", "label", "stopType", "stepNumber", "swatches", "showAlpha", "valueInputProps"];
7
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
8
- 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) { _defineProperty(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; }
9
- /*
10
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
11
- * or more contributor license agreements. Licensed under the Elastic License
12
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
13
- * in compliance with, at your election, the Elastic License 2.0 or the Server
14
- * Side Public License, v 1.
15
- */
16
-
17
- import React, { useCallback, useEffect, useMemo, useState } from 'react';
18
- import classNames from 'classnames';
19
- import { keys, DEFAULT_VISUALIZATION_COLOR, getSteppedGradient, useEuiTheme } from '../../../services';
20
- import { EuiColorStopThumb } from './color_stop_thumb';
21
- import { addStop, addDefinedStop, getPositionFromStop, getStopFromMouseLocation, isInvalid, removeStop } from './utils';
22
- import { getChromaColor } from '../utils';
23
- import { EuiI18n } from '../../i18n';
24
- import { EuiScreenReaderOnly } from '../../accessibility';
25
- import { EuiRangeHighlight } from '../../form/range/range_highlight';
26
- import { EuiRangeTrack } from '../../form/range/range_track';
27
- import { EuiRangeWrapper } from '../../form/range/range_wrapper';
28
- import { euiColorStopsStyles, euiColorStopsAddContainerStyles } from './color_stops.styles';
29
-
30
- /**
31
- * @deprecated
32
- */
33
- import { jsx as ___EmotionJSX } from "@emotion/react";
34
- // Because of how the thumbs are rendered in the popover, using ref results in an infinite loop.
35
- // We'll instead use old fashioned namespaced DOM selectors to get references
36
- var STOP_ATTR = 'euiColorStop_';
37
- var DEFAULT_MIN = 0;
38
- var DEFAULT_MAX = 100;
39
- function isTargetAThumb(target) {
40
- var element = target;
41
- var attr = element.getAttribute('data-index');
42
- return attr && attr.indexOf(STOP_ATTR) > -1;
43
- }
44
- function sortStops(colorStops) {
45
- return colorStops.map(function (el, index) {
46
- return _objectSpread(_objectSpread({}, el), {}, {
47
- id: index
48
- });
49
- }).sort(function (a, b) {
50
- return a.stop - b.stop;
51
- });
52
- }
53
- function getValidStops(colorStops) {
54
- return colorStops.map(function (el) {
55
- return el.stop;
56
- }).filter(function (stop) {
57
- return !isNaN(stop);
58
- });
59
- }
60
- function getRangeMin(colorStops, min) {
61
- var rangeMin = min || DEFAULT_MIN;
62
- var stops = getValidStops(colorStops);
63
- var first = Math.min.apply(Math, _toConsumableArray(stops)); // https://johnresig.com/blog/fast-javascript-maxmin/
64
-
65
- if (first < rangeMin) {
66
- if (stops.length === 1) {
67
- return first - DEFAULT_MIN;
68
- } else if (stops.length >= 2) {
69
- return first;
70
- }
71
- }
72
- return DEFAULT_MIN;
73
- }
74
- function getRangeMax(colorStops, max) {
75
- var rangeMax = max || DEFAULT_MAX;
76
- var stops = getValidStops(colorStops);
77
- var last = Math.max.apply(Math, _toConsumableArray(stops)); // https://johnresig.com/blog/fast-javascript-maxmin/
78
-
79
- if (last > rangeMax) {
80
- if (stops.length === 1) {
81
- return last + DEFAULT_MAX;
82
- } else if (stops.length >= 2) {
83
- return last;
84
- }
85
- }
86
- return DEFAULT_MAX;
87
- }
88
-
89
- /**
90
- * @deprecated - EuiColorStops is scheduled for deprecation due to low internal usage and high
91
- * maintenance requirements. If necessary, we recommend copying this component into your own application.
92
- *
93
- * The component will be permanently removed in October 2023.
94
- */
95
- export var EuiColorStops = function EuiColorStops(_ref) {
96
- var _ref$addColor = _ref.addColor,
97
- addColor = _ref$addColor === void 0 ? DEFAULT_VISUALIZATION_COLOR : _ref$addColor,
98
- max = _ref.max,
99
- min = _ref.min,
100
- _ref$mode = _ref.mode,
101
- mode = _ref$mode === void 0 ? 'default' : _ref$mode,
102
- colorStops = _ref.colorStops,
103
- onChange = _ref.onChange,
104
- disabled = _ref.disabled,
105
- readOnly = _ref.readOnly,
106
- compressed = _ref.compressed,
107
- fullWidth = _ref.fullWidth,
108
- className = _ref.className,
109
- label = _ref.label,
110
- _ref$stopType = _ref.stopType,
111
- stopType = _ref$stopType === void 0 ? 'gradient' : _ref$stopType,
112
- _ref$stepNumber = _ref.stepNumber,
113
- stepNumber = _ref$stepNumber === void 0 ? 10 : _ref$stepNumber,
114
- swatches = _ref.swatches,
115
- _ref$showAlpha = _ref.showAlpha,
116
- showAlpha = _ref$showAlpha === void 0 ? false : _ref$showAlpha,
117
- valueInputProps = _ref.valueInputProps,
118
- rest = _objectWithoutProperties(_ref, _excluded);
119
- var sortedStops = useMemo(function () {
120
- return sortStops(colorStops);
121
- }, [colorStops]);
122
- var rangeMax = useMemo(function () {
123
- var result = max != null ? max : getRangeMax(colorStops, max);
124
- var width = max != null ? 0 : Math.round(result * 0.05);
125
- return !isNaN(result) ? result + width : DEFAULT_MAX;
126
- }, [colorStops, max]);
127
- var rangeMin = useMemo(function () {
128
- var result = min != null ? min : getRangeMin(colorStops, min);
129
- var width = min != null ? 0 : Math.round(rangeMax * 0.05);
130
- return !isNaN(result) ? result - width : DEFAULT_MIN;
131
- }, [colorStops, min, rangeMax]);
132
- var _useState = useState(false),
133
- _useState2 = _slicedToArray(_useState, 2),
134
- hasFocus = _useState2[0],
135
- setHasFocus = _useState2[1];
136
- var _useState3 = useState(null),
137
- _useState4 = _slicedToArray(_useState3, 2),
138
- focusedStopIndex = _useState4[0],
139
- setFocusedStopIndex = _useState4[1];
140
- var _useState5 = useState(null),
141
- _useState6 = _slicedToArray(_useState5, 2),
142
- openedStopId = _useState6[0],
143
- setOpenedStopId = _useState6[1];
144
- var _useState7 = useState(null),
145
- _useState8 = _slicedToArray(_useState7, 2),
146
- wrapperRef = _useState8[0],
147
- setWrapperRef = _useState8[1];
148
- var _useState9 = useState(0),
149
- _useState10 = _slicedToArray(_useState9, 2),
150
- addTargetPosition = _useState10[0],
151
- setAddTargetPosition = _useState10[1];
152
- var _useState11 = useState(false),
153
- _useState12 = _slicedToArray(_useState11, 2),
154
- isHoverDisabled = _useState12[0],
155
- setIsHoverDisabled = _useState12[1];
156
- var _useState13 = useState(null),
157
- _useState14 = _slicedToArray(_useState13, 2),
158
- focusStopOnUpdate = _useState14[0],
159
- setFocusStopOnUpdate = _useState14[1];
160
- var isNotInteractive = disabled || readOnly;
161
- var isDragging = isHoverDisabled && !isNotInteractive;
162
- var addContainerIsDisabled = isHoverDisabled || isNotInteractive;
163
- var classes = classNames('euiColorStops', className);
164
- var euiTheme = useEuiTheme();
165
- var styles = euiColorStopsStyles(euiTheme);
166
- var cssPopoverStyles = [styles.euiColorStops, !disabled ? styles.isEnabled : styles.isDisabled, readOnly && styles.isReadOnly, isDragging && styles.isDragging];
167
- var cssTrackStyles = [styles.euiColorStops__track];
168
- var cssAddTargetStyles = [styles.euiColorStops__addTarget];
169
- var addContainerStyles = euiColorStopsAddContainerStyles(euiTheme);
170
- var cssAddContainerStyles = [addContainerStyles.euiColorStopsAddContainer, !addContainerIsDisabled ? addContainerStyles.isEnabled : addContainerStyles.isDisabled];
171
- var getStopFromMouseLocationFn = function getStopFromMouseLocationFn(location) {
172
- // Guard against `null` ref in usage
173
- return getStopFromMouseLocation(location, wrapperRef, min || rangeMin, max || rangeMax);
174
- };
175
- var getPositionFromStopFn = function getPositionFromStopFn(stop) {
176
- // Guard against `null` ref in usage
177
- return getPositionFromStop(stop, wrapperRef, min || rangeMin, max || rangeMax);
178
- };
179
- var handleOnChange = useCallback(function (colorStops) {
180
- onChange(colorStops, isInvalid(colorStops, showAlpha));
181
- }, [onChange, showAlpha]);
182
- var onFocusStop = useCallback(function (index) {
183
- if (disabled || !wrapperRef) return;
184
- var toFocus = wrapperRef.querySelector("[data-index=".concat(STOP_ATTR).concat(index, "]"));
185
- if (toFocus) {
186
- setHasFocus(false);
187
- setFocusedStopIndex(index);
188
- toFocus.focus();
189
- }
190
- }, [disabled, wrapperRef]);
191
- useEffect(function () {
192
- if (focusStopOnUpdate !== null) {
193
- var toFocusIndex = sortedStops.map(function (el) {
194
- return el.stop;
195
- }).indexOf(focusStopOnUpdate);
196
- var toFocusId = toFocusIndex > -1 ? sortedStops[toFocusIndex].id : null;
197
- onFocusStop(toFocusIndex);
198
- setOpenedStopId(toFocusId);
199
- setFocusStopOnUpdate(null);
200
- }
201
- }, [sortedStops, onFocusStop, setFocusStopOnUpdate, focusStopOnUpdate]);
202
- var onFocusWrapper = useCallback(function () {
203
- setFocusedStopIndex(null);
204
- if (wrapperRef) {
205
- wrapperRef.focus();
206
- }
207
- }, [wrapperRef]);
208
- var setWrapperHasFocus = function setWrapperHasFocus(e) {
209
- if (e.target === wrapperRef) {
210
- setHasFocus(true);
211
- }
212
- };
213
- var removeWrapperFocus = function removeWrapperFocus() {
214
- setHasFocus(false);
215
- };
216
- var onAdd = function onAdd() {
217
- var stops = sortedStops.map(function (_ref2) {
218
- var color = _ref2.color,
219
- stop = _ref2.stop;
220
- return {
221
- color: color,
222
- stop: stop
223
- };
224
- });
225
- var newColorStops = addStop(stops, addColor, max || rangeMax);
226
- setFocusStopOnUpdate(newColorStops[colorStops.length].stop);
227
- handleOnChange(newColorStops);
228
- };
229
- var onRemove = useCallback(function (index) {
230
- var newColorStops = removeStop(colorStops, index);
231
- onFocusWrapper();
232
- handleOnChange(newColorStops);
233
- }, [colorStops, handleOnChange, onFocusWrapper]);
234
- var disableHover = function disableHover() {
235
- if (disabled) return;
236
- setIsHoverDisabled(true);
237
- };
238
- var enableHover = function enableHover() {
239
- if (disabled) return;
240
- setIsHoverDisabled(false);
241
- };
242
- var handleAddHover = function handleAddHover(e) {
243
- if (isNotInteractive || !wrapperRef) return;
244
- var stop = getStopFromMouseLocationFn({
245
- x: e.pageX,
246
- y: e.pageY
247
- });
248
- var position = getPositionFromStopFn(stop);
249
- setAddTargetPosition(position);
250
- };
251
- var handleAddClick = function handleAddClick(e) {
252
- if (isNotInteractive || isTargetAThumb(e.target) || !wrapperRef) return;
253
- var newStop = getStopFromMouseLocationFn({
254
- x: e.pageX,
255
- y: e.pageY
256
- });
257
- var newColorStops = addDefinedStop(colorStops, newStop, addColor);
258
- setFocusStopOnUpdate(newStop);
259
- handleOnChange(newColorStops);
260
- };
261
- var handleKeyDown = function handleKeyDown(event) {
262
- if (disabled) return;
263
- switch (event.key) {
264
- case keys.ESCAPE:
265
- onFocusWrapper();
266
- break;
267
- case keys.ENTER:
268
- if (readOnly || !hasFocus) return;
269
- onAdd();
270
- break;
271
- case keys.BACKSPACE:
272
- if (readOnly || hasFocus || focusedStopIndex == null) return;
273
- if (isTargetAThumb(event.target)) {
274
- if (min == null && focusedStopIndex === 0 || max == null && focusedStopIndex === sortedStops.length - 1) {
275
- return;
276
- }
277
- var index = sortedStops[focusedStopIndex].id;
278
- onRemove(index);
279
- }
280
- break;
281
- case keys.ARROW_DOWN:
282
- if (event.target === wrapperRef || isTargetAThumb(event.target)) {
283
- event.preventDefault();
284
- if (focusedStopIndex == null) {
285
- onFocusStop(0);
286
- } else {
287
- var next = focusedStopIndex === sortedStops.length - 1 ? focusedStopIndex : focusedStopIndex + 1;
288
- onFocusStop(next);
289
- }
290
- }
291
- break;
292
- case keys.ARROW_UP:
293
- if (event.target === wrapperRef || isTargetAThumb(event.target)) {
294
- event.preventDefault();
295
- if (focusedStopIndex == null) {
296
- onFocusStop(0);
297
- } else {
298
- var _next = focusedStopIndex === 0 ? focusedStopIndex : focusedStopIndex - 1;
299
- onFocusStop(_next);
300
- }
301
- }
302
- break;
303
- }
304
- };
305
- var thumbs = useMemo(function () {
306
- var handleStopChange = function handleStopChange(stop, id) {
307
- var newColorStops = _toConsumableArray(colorStops);
308
- newColorStops.splice(id, 1, stop);
309
- handleOnChange(newColorStops);
310
- };
311
- return sortedStops.map(function (colorStop, index) {
312
- return ___EmotionJSX(EuiColorStopThumb, {
313
- isRangeMin: min == null && colorStop.stop === rangeMin,
314
- isRangeMax: max == null && colorStop.stop === rangeMax,
315
- "data-index": "".concat(STOP_ATTR).concat(index),
316
- key: colorStop.id,
317
- globalMin: min || rangeMin,
318
- globalMax: max || rangeMax,
319
- min: min,
320
- max: max,
321
- localMin: index === 0 ? min || rangeMin : sortedStops[index - 1].stop + 1,
322
- localMax: index === sortedStops.length - 1 ? max || rangeMax : sortedStops[index + 1].stop - 1,
323
- stop: colorStop.stop,
324
- color: colorStop.color,
325
- onRemove: sortedStops.length > 1 ? function () {
326
- return onRemove(colorStop.id);
327
- } : undefined,
328
- onChange: function onChange(stop) {
329
- return handleStopChange(stop, colorStop.id);
330
- },
331
- onFocus: function onFocus() {
332
- return setFocusedStopIndex(index);
333
- },
334
- parentRef: wrapperRef,
335
- colorPickerMode: mode,
336
- colorPickerShowAlpha: showAlpha,
337
- colorPickerSwatches: swatches,
338
- disabled: disabled,
339
- readOnly: readOnly,
340
- "aria-valuetext": "Stop: ".concat(colorStop.stop, ", Color: ").concat(colorStop.color, " (").concat(index + 1, " of ").concat(colorStops.length, ")"),
341
- isPopoverOpen: !isDragging && colorStop.id === openedStopId,
342
- openPopover: function openPopover() {
343
- setOpenedStopId(colorStop.id);
344
- },
345
- closePopover: function closePopover() {
346
- setOpenedStopId(null);
347
- },
348
- valueInputProps: valueInputProps
349
- });
350
- });
351
- }, [colorStops, disabled, handleOnChange, isDragging, max, min, mode, onRemove, openedStopId, rangeMax, rangeMin, readOnly, showAlpha, sortedStops, swatches, wrapperRef, valueInputProps]);
352
- var positions = wrapperRef ? sortedStops.map(function (_ref3) {
353
- var stop = _ref3.stop;
354
- return getPositionFromStopFn(stop);
355
- }) : [];
356
- var gradientStop = function gradientStop(colorStop, index) {
357
- var color = getChromaColor(colorStop.color, showAlpha);
358
- var rgba = color ? color.css() : 'transparent';
359
- if (index === 0) {
360
- return "transparent, transparent ".concat(positions[index], "%, ").concat(rgba, " ").concat(positions[index], "%");
361
- }
362
- return "".concat(rgba, " ").concat(positions[index], "%");
363
- };
364
- var fixedStop = function fixedStop(colorStop, index) {
365
- if (index === sortedStops.length - 1) {
366
- return gradientStop(colorStop, index);
367
- } else {
368
- return "".concat(gradientStop(colorStop, index), ", ").concat(gradientStop(colorStop, index + 1));
369
- }
370
- };
371
- var gradient = '';
372
- if (stopType === 'stepped' && positions.length > 0) {
373
- var trailingPercentage = positions[0];
374
- var endingPercentage = positions[positions.length - 1];
375
- var steppedColors = getSteppedGradient(colorStops, stepNumber);
376
- var steppedGradient = '';
377
- var percentage = (endingPercentage - trailingPercentage) / steppedColors.length;
378
- var percentageSteps = (endingPercentage - trailingPercentage) / steppedColors.length + trailingPercentage;
379
- steppedColors.forEach(function (color) {
380
- steppedGradient = steppedGradient.concat("".concat(color, " ").concat(percentageSteps - percentage, "% ").concat(percentageSteps, "%, "));
381
- percentageSteps = percentageSteps + percentage;
382
- });
383
- steppedGradient = steppedGradient.substring(0, steppedGradient.length - 2);
384
- gradient = "linear-gradient(to right, transparent ".concat(trailingPercentage, "%, ").concat(steppedGradient, ")");
385
- } else {
386
- var linearGradient = sortedStops.map(stopType === 'gradient' ? gradientStop : fixedStop);
387
- gradient = "linear-gradient(to right,".concat(linearGradient, ")");
388
- }
389
- return ___EmotionJSX(EuiRangeWrapper, _extends({
390
- css: cssPopoverStyles
391
- }, rest, {
392
- "data-test-subj": classNames('euiColorStops', rest['data-test-subj']),
393
- ref: setWrapperRef,
394
- className: classes,
395
- fullWidth: fullWidth,
396
- tabIndex: disabled ? -1 : 0,
397
- onMouseDown: disableHover,
398
- onMouseUp: enableHover,
399
- onMouseLeave: enableHover,
400
- onKeyDown: handleKeyDown,
401
- onFocus: setWrapperHasFocus,
402
- onBlur: removeWrapperFocus
403
- }), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
404
- "aria-live": "polite"
405
- }, ___EmotionJSX(EuiI18n, {
406
- values: {
407
- label: label,
408
- disabled: disabled ? 'Disabled.' : '',
409
- readOnly: readOnly ? 'Read-only.' : ''
410
- },
411
- token: "euiColorStops.screenReaderAnnouncement",
412
- default: "{label}: {readOnly} {disabled} Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop."
413
- }))), ___EmotionJSX(EuiRangeTrack, {
414
- className: "euiColorStops__track",
415
- css: cssTrackStyles,
416
- min: min || rangeMin,
417
- max: max || rangeMax,
418
- compressed: compressed,
419
- disabled: disabled,
420
- step: 1
421
- }, function (trackWidth) {
422
- return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiRangeHighlight, {
423
- className: "euiColorStops__highlight",
424
- min: min || rangeMin,
425
- max: max || rangeMax,
426
- lowerValue: min || rangeMin,
427
- upperValue: max || rangeMax,
428
- background: gradient,
429
- trackWidth: trackWidth
430
- }), ___EmotionJSX("div", {
431
- "data-test-subj": "euiColorStopsAdd",
432
- className: "euiColorStops__addContainer",
433
- css: cssAddContainerStyles,
434
- onClick: handleAddClick,
435
- onMouseMove: handleAddHover
436
- }, ___EmotionJSX("div", {
437
- className: "euiColorStops__addTarget",
438
- css: cssAddTargetStyles,
439
- style: {
440
- left: "".concat(addTargetPosition, "%")
441
- }
442
- })), thumbs);
443
- }));
444
- };
@@ -1,61 +0,0 @@
1
- function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
2
- /*
3
- * 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 { css } from '@emotion/react';
11
- import { darken, brighten, hexToRgb } from '../../../services';
12
- import { mathWithUnits, euiCanAnimate } from '../../../global_styling';
13
- import { euiCustomControl } from '../../form/form.styles';
14
- import { euiRangeThumbStyle, euiRangeVariables } from '../../form/range/range.styles';
15
- var _ref2 = process.env.NODE_ENV === "production" ? {
16
- name: "uu65b3-isDragging",
17
- styles: "cursor:grabbing;label:isDragging;"
18
- } : {
19
- name: "uu65b3-isDragging",
20
- styles: "cursor:grabbing;label:isDragging;",
21
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
22
- };
23
- export var euiColorStopsStyles = function euiColorStopsStyles(euiThemeContext) {
24
- var range = euiRangeVariables(euiThemeContext);
25
- var euiTheme = euiThemeContext.euiTheme,
26
- colorMode = euiThemeContext.colorMode;
27
- var isDarkMode = colorMode === 'DARK';
28
- var stripeColor = isDarkMode ? brighten(range.trackColor, 0.5) : darken(range.trackColor, 0.5);
29
- var stripesBackground = "repeating-linear-gradient(\n -45deg,\n ".concat(range.trackColor, ",\n ").concat(range.trackColor, " 25%,\n ").concat(stripeColor, " 25%,\n ").concat(stripeColor, " 50%,\n ").concat(range.trackColor, " 50%\n )");
30
- return {
31
- // Base
32
- euiColorStops: /*#__PURE__*/css(";label:euiColorStops;"),
33
- isEnabled: /*#__PURE__*/css("&:focus{outline:none;}&:focus-visible{.euiColorStops__track::after{box-shadow:0 0 0 1px rgba(", hexToRgb(euiTheme.colors.emptyShade).join(', '), ", 0.8),0 0 0 3px ", range.focusColor, ";}};label:isEnabled;"),
34
- isDisabled: /*#__PURE__*/css(";label:isDisabled;"),
35
- isHoverDisabled: /*#__PURE__*/css(";label:isHoverDisabled;"),
36
- isReadOnly: /*#__PURE__*/css(";label:isReadOnly;"),
37
- isDragging: _ref2,
38
- euiColorStops__track: /*#__PURE__*/css("&::after{background:", stripesBackground, ";background-size:", euiTheme.size.xs, " ", euiTheme.size.xs, ";};label:euiColorStops__track;"),
39
- euiColorStops__addTarget: /*#__PURE__*/css(euiCustomControl(euiThemeContext, {
40
- type: 'round'
41
- }), " ", euiRangeThumbStyle(euiThemeContext), " position:absolute;inset-block-start:0;block-size:", range.thumbHeight, ";inline-size:", range.thumbHeight, ";background-color:", euiTheme.colors.lightestShade, ";pointer-events:none;opacity:0;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.darkShade, ";box-shadow:none;z-index:", range.thumbZIndex, ";", euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ease-in;};label:euiColorStops__addTarget;")
42
- };
43
- };
44
- var _ref = process.env.NODE_ENV === "production" ? {
45
- name: "1173em8-isEnabled",
46
- styles: "&:hover{cursor:pointer;.euiColorStops__addTarget{opacity:0.7;}};label:isEnabled;"
47
- } : {
48
- name: "1173em8-isEnabled",
49
- styles: "&:hover{cursor:pointer;.euiColorStops__addTarget{opacity:0.7;}};label:isEnabled;",
50
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
51
- };
52
- export var euiColorStopsAddContainerStyles = function euiColorStopsAddContainerStyles(euiThemeContext) {
53
- var range = euiRangeVariables(euiThemeContext);
54
- return {
55
- euiColorStopsAddContainer: /*#__PURE__*/css("display:block;position:absolute;inset-inline-start:0;inset-inline-end:0;inset-block-start:50%;block-size:", range.thumbHeight, ";margin-block-start:", mathWithUnits(range.thumbHeight, function (x) {
56
- return x * -0.5;
57
- }), ";z-index:", range.thumbZIndex, ";;label:euiColorStopsAddContainer;"),
58
- isEnabled: _ref,
59
- isDisabled: /*#__PURE__*/css(";label:isDisabled;")
60
- };
61
- };
@@ -1,9 +0,0 @@
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
- export { EuiColorStops } from './color_stops';
@@ -1,90 +0,0 @@
1
- import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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 { getEventPosition, getChromaColor } from '../utils';
11
- import { DEFAULT_VISUALIZATION_COLOR } from '../../../services';
12
- import { EUI_THUMB_SIZE } from '../../form/range/utils';
13
- export var removeStop = function removeStop(colorStops, index) {
14
- if (colorStops.length === 1) {
15
- return colorStops;
16
- }
17
- return [].concat(_toConsumableArray(colorStops.slice(0, index)), _toConsumableArray(colorStops.slice(index + 1)));
18
- };
19
- export var addDefinedStop = function addDefinedStop(colorStops, stop) {
20
- var color = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_VISUALIZATION_COLOR;
21
- var newStop = {
22
- stop: stop,
23
- color: color
24
- };
25
- colorStops = [].concat(_toConsumableArray(colorStops), [newStop]);
26
- colorStops.sort(function (a, b) {
27
- if (a.stop < b.stop) {
28
- return -1;
29
- }
30
- if (a.stop > b.stop) {
31
- return 1;
32
- }
33
- return 0;
34
- });
35
- return colorStops;
36
- };
37
- export var addStop = function addStop(colorStops) {
38
- var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_VISUALIZATION_COLOR;
39
- var max = arguments.length > 2 ? arguments[2] : undefined;
40
- var index = colorStops.length ? colorStops.length - 1 : 0;
41
- var stops = colorStops.map(function (el) {
42
- return el.stop;
43
- });
44
- var currentStop = stops[index] != null ? stops[index] : max;
45
- var delta = 1;
46
- if (index !== 0) {
47
- var prevStop = stops[index - 1];
48
- delta = currentStop - prevStop;
49
- }
50
- var stop = currentStop + delta;
51
- if (stop > max) {
52
- stop = max;
53
- }
54
-
55
- // We've reached the max, so start working backwards
56
- while (stops.indexOf(stop) > -1) {
57
- stop--;
58
- }
59
- var newStop = {
60
- stop: stop,
61
- color: color
62
- };
63
- return [].concat(_toConsumableArray(colorStops.slice(0, index + 1)), [newStop], _toConsumableArray(colorStops.slice(index + 1)));
64
- };
65
- export var isColorInvalid = function isColorInvalid(color) {
66
- var showAlpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
67
- return getChromaColor(color, showAlpha) == null || color === '';
68
- };
69
- export var isStopInvalid = function isStopInvalid(stop) {
70
- return stop == null || isNaN(stop);
71
- };
72
- export var isInvalid = function isInvalid(colorStops) {
73
- var showAlpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
74
- return colorStops.some(function (colorStop) {
75
- return isColorInvalid(colorStop.color, showAlpha) || isStopInvalid(colorStop.stop);
76
- });
77
- };
78
- export var calculateScale = function calculateScale(trackWidth) {
79
- var thumbToTrackRatio = EUI_THUMB_SIZE / trackWidth;
80
- return (1 - thumbToTrackRatio) * 100;
81
- };
82
- export var getStopFromMouseLocation = function getStopFromMouseLocation(location, ref, min, max) {
83
- var box = getEventPosition(location, ref);
84
- return Math.round(box.left / box.width * (max - min) + min);
85
- };
86
- export var getPositionFromStop = function getPositionFromStop(stop, ref, min, max) {
87
- // For wide implementations, integer percentages can be visually off.
88
- // Use 1 decimal place for more accuracy
89
- return parseFloat(((stop - min) / (max - min) * calculateScale(ref && ref.clientWidth > 0 ? ref.clientWidth : 100)).toFixed(1));
90
- };
@@ -1,10 +0,0 @@
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
- export { EuiSuggestItem } from './suggest_item';
10
- export { EuiSuggest } from './suggest';