@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,29 +0,0 @@
1
- @import '../variables/header';
2
-
3
- @mixin euiHeaderAffordForFixed($headerHeight: $euiHeaderHeightCompensation) {
4
- @warn 'This mixin will shortly be deprecated. Use the CSS variable var(--euiFixedHeadersOffset) instead, which updates dynamically based on the number of fixed headers on the page.';
5
-
6
- // The `@at-root #{&}` allows for grouping alongside another specific body class.
7
- // When not applied inside of another selector, it simply renders with the single class
8
- @at-root #{&}.euiBody--headerIsFixed {
9
- padding-top: $headerHeight;
10
-
11
- // When the EuiHeader is fixed, we need to account for it in the position of the flyout
12
- &:not(.euiDataGrid__restrictBody) .euiFlyout,
13
- .euiCollapsibleNav {
14
- top: $headerHeight;
15
- height: calc(100% - #{$headerHeight});
16
- }
17
-
18
- @include euiBreakpoint('m', 'l', 'xl') {
19
- .euiPageSideBar--sticky {
20
- max-height: calc(100vh - #{$headerHeight});
21
- top: #{$headerHeight};
22
- }
23
- }
24
-
25
- &:not(.euiDataGrid__restrictBody) .euiOverlayMask[data-relative-to-header='below'] {
26
- top: #{$headerHeight};
27
- }
28
- }
29
- }
@@ -1,3 +0,0 @@
1
- $euiHeaderHeight: $euiSizeXXL + $euiSizeS !default;
2
- // Use the following variable in other components to afford for the fixed header
3
- $euiHeaderHeightCompensation: $euiHeaderHeight !default;
@@ -1,372 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.EuiColorStopThumb = void 0;
9
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
12
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
- var _react = _interopRequireWildcard(require("react"));
14
- var _propTypes = _interopRequireDefault(require("prop-types"));
15
- var _classnames = _interopRequireDefault(require("classnames"));
16
- var _utils = require("./utils");
17
- var _utils2 = require("../utils");
18
- var _services = require("../../../services");
19
- var _button = require("../../button");
20
- var _color_picker = require("../color_picker");
21
- var _flex = require("../../flex");
22
- var _form = require("../../form");
23
- var _i18n = require("../../i18n");
24
- var _popover = require("../../popover");
25
- var _accessibility = require("../../accessibility");
26
- var _spacer = require("../../spacer");
27
- var _range_thumb = require("../../form/range/range_thumb");
28
- var _color_stop_thumb = require("./color_stop_thumb.styles");
29
- var _react2 = require("@emotion/react");
30
- var _excluded = ["className", "stop", "color", "onChange", "onFocus", "onRemove", "globalMin", "globalMax", "localMin", "localMax", "min", "max", "isRangeMin", "isRangeMax", "parentRef", "colorPickerMode", "colorPickerShowAlpha", "colorPickerSwatches", "disabled", "readOnly", "isPopoverOpen", "openPopover", "closePopover", "data-index", "aria-valuetext", "style", "valueInputProps"];
31
- /*
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
- 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); }
39
- 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; }
40
- 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; }
41
- 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; }
42
- var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
43
- var className = _ref.className,
44
- stop = _ref.stop,
45
- color = _ref.color,
46
- onChange = _ref.onChange,
47
- onFocus = _ref.onFocus,
48
- onRemove = _ref.onRemove,
49
- globalMin = _ref.globalMin,
50
- globalMax = _ref.globalMax,
51
- localMin = _ref.localMin,
52
- localMax = _ref.localMax,
53
- min = _ref.min,
54
- max = _ref.max,
55
- _ref$isRangeMin = _ref.isRangeMin,
56
- isRangeMin = _ref$isRangeMin === void 0 ? false : _ref$isRangeMin,
57
- _ref$isRangeMax = _ref.isRangeMax,
58
- isRangeMax = _ref$isRangeMax === void 0 ? false : _ref$isRangeMax,
59
- parentRef = _ref.parentRef,
60
- colorPickerMode = _ref.colorPickerMode,
61
- colorPickerShowAlpha = _ref.colorPickerShowAlpha,
62
- colorPickerSwatches = _ref.colorPickerSwatches,
63
- disabled = _ref.disabled,
64
- readOnly = _ref.readOnly,
65
- isPopoverOpen = _ref.isPopoverOpen,
66
- openPopover = _ref.openPopover,
67
- closePopover = _ref.closePopover,
68
- dataIndex = _ref['data-index'],
69
- ariaValueText = _ref['aria-valuetext'],
70
- style = _ref.style,
71
- _ref$valueInputProps = _ref.valueInputProps,
72
- valueInputProps = _ref$valueInputProps === void 0 ? {} : _ref$valueInputProps,
73
- rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
74
- var background = (0, _react.useMemo)(function () {
75
- var chromaColor = (0, _utils2.getChromaColor)(color, colorPickerShowAlpha);
76
- return chromaColor ? chromaColor.css() : undefined;
77
- }, [color, colorPickerShowAlpha]);
78
- var _useState = (0, _react.useState)(isPopoverOpen),
79
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
80
- hasFocus = _useState2[0],
81
- setHasFocus = _useState2[1];
82
- var _useState3 = (0, _react.useState)((0, _utils.isColorInvalid)(color, colorPickerShowAlpha)),
83
- _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
84
- colorIsInvalid = _useState4[0],
85
- setColorIsInvalid = _useState4[1];
86
- var _useState5 = (0, _react.useState)((0, _utils.isStopInvalid)(stop)),
87
- _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
88
- stopIsInvalid = _useState6[0],
89
- setStopIsInvalid = _useState6[1];
90
- var _useState7 = (0, _react.useState)(null),
91
- _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
92
- numberInputRef = _useState8[0],
93
- setNumberInputRef = _useState8[1];
94
- var popoverRef = (0, _react.useRef)(null);
95
- (0, _react.useEffect)(function () {
96
- if (isPopoverOpen && popoverRef && popoverRef.current) {
97
- popoverRef.current.positionPopoverFixed();
98
- }
99
- }, [isPopoverOpen, stop]);
100
- var getStopFromMouseLocationFn = function getStopFromMouseLocationFn(location) {
101
- // Guard against `null` ref in usage
102
- return (0, _utils.getStopFromMouseLocation)(location, parentRef, globalMin, globalMax);
103
- };
104
- var getPositionFromStopFn = function getPositionFromStopFn(stop) {
105
- // Guard against `null` ref in usage
106
- return (0, _utils.getPositionFromStop)(stop, parentRef, globalMin, globalMax);
107
- };
108
- var handleOnRemove = function handleOnRemove() {
109
- if (onRemove) {
110
- closePopover();
111
- onRemove();
112
- }
113
- };
114
- var handleFocus = function handleFocus() {
115
- setHasFocus(true);
116
- if (onFocus) {
117
- onFocus();
118
- }
119
- };
120
- var setHasFocusTrue = function setHasFocusTrue() {
121
- return setHasFocus(true);
122
- };
123
- var setHasFocusFalse = function setHasFocusFalse() {
124
- return setHasFocus(false);
125
- };
126
- var handleColorChange = function handleColorChange(value) {
127
- setColorIsInvalid((0, _utils.isColorInvalid)(value, colorPickerShowAlpha));
128
- onChange({
129
- stop: stop,
130
- color: value
131
- });
132
- };
133
- var handleStopChange = function handleStopChange(value) {
134
- var willBeInvalid = value > localMax || value < localMin;
135
- if (willBeInvalid) {
136
- if (value > localMax) {
137
- value = localMax;
138
- }
139
- if (value < localMin) {
140
- value = localMin;
141
- }
142
- }
143
- setStopIsInvalid((0, _utils.isStopInvalid)(value));
144
- onChange({
145
- stop: value,
146
- color: color
147
- });
148
- };
149
- var handleStopInputChange = function handleStopInputChange(e) {
150
- var value = parseFloat(e.target.value);
151
- var willBeInvalid = value > globalMax || value < globalMin;
152
- if (willBeInvalid) {
153
- if (value > globalMax && max != null) {
154
- value = globalMax;
155
- }
156
- if (value < globalMin && min != null) {
157
- value = globalMin;
158
- }
159
- }
160
- setStopIsInvalid((0, _utils.isStopInvalid)(value));
161
- onChange({
162
- stop: value,
163
- color: color
164
- });
165
- };
166
- var handlePointerChange = function handlePointerChange(location, isFirstInteraction) {
167
- if (isFirstInteraction) return; // Prevents change on the initial MouseDown event
168
- if (parentRef == null) {
169
- return;
170
- }
171
- var newStop = getStopFromMouseLocationFn(location);
172
- handleStopChange(newStop);
173
- };
174
- var handleKeyDown = function handleKeyDown(event) {
175
- switch (event.key) {
176
- case _services.keys.ENTER:
177
- event.preventDefault();
178
- openPopover();
179
- break;
180
- case _services.keys.ARROW_LEFT:
181
- event.preventDefault();
182
- if (readOnly) return;
183
- handleStopChange(stop - 1);
184
- break;
185
- case _services.keys.ARROW_RIGHT:
186
- event.preventDefault();
187
- if (readOnly) return;
188
- handleStopChange(stop + 1);
189
- break;
190
- }
191
- };
192
- var _useMouseMove = (0, _services.useMouseMove)(handlePointerChange),
193
- _useMouseMove2 = (0, _slicedToArray2.default)(_useMouseMove, 2),
194
- handleMouseDown = _useMouseMove2[0],
195
- handleInteraction = _useMouseMove2[1];
196
- var handleOnMouseDown = function handleOnMouseDown(e) {
197
- if (!readOnly) {
198
- handleMouseDown(e);
199
- }
200
- openPopover();
201
- };
202
- var handleTouchInteraction = function handleTouchInteraction(e) {
203
- if (!readOnly) {
204
- handleInteraction(e);
205
- }
206
- };
207
- var handleTouchStart = function handleTouchStart(e) {
208
- handleTouchInteraction(e);
209
- if (!isPopoverOpen) {
210
- openPopover();
211
- }
212
- };
213
- var euiTheme = (0, _services.useEuiTheme)();
214
- var popoverStyles = (0, _color_stop_thumb.euiColorStopThumbPopoverStyles)(euiTheme);
215
- var cssPopoverStyles = [popoverStyles.euiColorStopThumbPopover, (hasFocus || isPopoverOpen) && popoverStyles.hasFocus];
216
- var thumbStyles = (0, _color_stop_thumb.euiColorStopThumbStyles)(euiTheme);
217
- var cssThumbStyles = [thumbStyles.euiColorStopThumb, isPopoverOpen && thumbStyles.isPopoverOpen];
218
- var colorStopStyles = (0, _color_stop_thumb.euiColorStopStyles)(euiTheme);
219
- var cssColorStopStyles = colorStopStyles.euiColorStop;
220
- var classes = (0, _classnames.default)('euiColorStopPopover', className);
221
- return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
222
- css: cssPopoverStyles
223
- }, rest, {
224
- ref: popoverRef,
225
- className: classes,
226
- anchorClassName: "euiColorStopThumbPopover__anchor",
227
- panelPaddingSize: "s",
228
- isOpen: isPopoverOpen,
229
- closePopover: closePopover,
230
- initialFocus: numberInputRef || undefined,
231
- focusTrapProps: {
232
- clickOutsideDisables: false
233
- },
234
- panelProps: {
235
- css: numberInputRef ? undefined : popoverStyles.isLoadingPanel
236
- },
237
- style: _objectSpread(_objectSpread({}, style), {}, {
238
- left: "".concat(getPositionFromStopFn(stop), "%")
239
- }),
240
- button: (0, _react2.jsx)(_i18n.EuiI18n, {
241
- tokens: ['euiColorStopThumb.buttonAriaLabel', 'euiColorStopThumb.buttonTitle'],
242
- defaults: ['Press the Enter key to modify this stop. Press Escape to focus the group', 'Click to edit, drag to reposition']
243
- }, function (_ref2) {
244
- var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
245
- buttonAriaLabel = _ref3[0],
246
- buttonTitle = _ref3[1];
247
- var ariaLabel = buttonAriaLabel;
248
- var title = buttonTitle;
249
- return (0, _react2.jsx)(_range_thumb.EuiRangeThumb, {
250
- "data-test-subj": "euiColorStopThumb",
251
- "data-index": dataIndex,
252
- min: localMin,
253
- max: localMax,
254
- value: stop,
255
- onFocus: handleFocus,
256
- onBlur: setHasFocusFalse,
257
- onMouseOver: setHasFocusTrue,
258
- onMouseOut: setHasFocusFalse,
259
- onKeyDown: handleKeyDown,
260
- onMouseDown: handleOnMouseDown,
261
- onTouchStart: handleTouchStart,
262
- onTouchMove: handleTouchInteraction,
263
- "aria-valuetext": ariaValueText,
264
- "aria-label": ariaLabel,
265
- title: title,
266
- className: "euiColorStopThumb",
267
- css: cssThumbStyles,
268
- tabIndex: -1,
269
- style: {
270
- background: background
271
- },
272
- disabled: disabled
273
- });
274
- })
275
- }), (0, _react2.jsx)("div", {
276
- className: "euiColorStop",
277
- css: cssColorStopStyles,
278
- "data-test-subj": "euiColorStopPopover"
279
- }, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
280
- "aria-live": "polite"
281
- }, (0, _react2.jsx)(_i18n.EuiI18n, {
282
- token: "euiColorStopThumb.screenReaderAnnouncement",
283
- default: "A popup with a color stop edit form opened. Tab forward to cycle through form controls or press escape to close this popup."
284
- }))), (0, _react2.jsx)(_flex.EuiFlexGroup, {
285
- gutterSize: "s",
286
- responsive: false
287
- }, (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_i18n.EuiI18n, {
288
- tokens: ['euiColorStopThumb.stopLabel', 'euiColorStopThumb.stopErrorMessage'],
289
- defaults: ['Stop value', 'Value is out of range']
290
- }, function (_ref4) {
291
- var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
292
- stopLabel = _ref5[0],
293
- stopErrorMessage = _ref5[1];
294
- return (0, _react2.jsx)(_form.EuiFormRow, {
295
- label: stopLabel,
296
- display: "rowCompressed",
297
- isInvalid: stopIsInvalid,
298
- error: stopIsInvalid ? stopErrorMessage : null
299
- }, (0, _react2.jsx)(_form.EuiFieldNumber, (0, _extends2.default)({}, valueInputProps, {
300
- inputRef: setNumberInputRef,
301
- compressed: true,
302
- readOnly: readOnly,
303
- min: isRangeMin || min == null ? undefined : localMin,
304
- max: isRangeMax || max == null ? undefined : localMax,
305
- value: (0, _utils.isStopInvalid)(stop) ? '' : stop,
306
- isInvalid: stopIsInvalid,
307
- onChange: handleStopInputChange
308
- })));
309
- })), !readOnly && (0, _react2.jsx)(_flex.EuiFlexItem, {
310
- grow: false
311
- }, (0, _react2.jsx)(_form.EuiFormRow, {
312
- display: "rowCompressed",
313
- hasEmptyLabelSpace: true
314
- }, (0, _react2.jsx)(_i18n.EuiI18n, {
315
- token: "euiColorStopThumb.removeLabel",
316
- default: "Remove this stop"
317
- }, function (removeLabel) {
318
- return (0, _react2.jsx)(_button.EuiButtonIcon, {
319
- iconType: "trash",
320
- color: "danger",
321
- "aria-label": removeLabel,
322
- title: removeLabel,
323
- disabled: !onRemove,
324
- onClick: handleOnRemove
325
- });
326
- })))), !readOnly && (0, _react2.jsx)(_spacer.EuiSpacer, {
327
- size: "s"
328
- }), (0, _react2.jsx)(_color_picker.EuiColorPicker, {
329
- readOnly: readOnly,
330
- onChange: handleColorChange,
331
- color: color,
332
- mode: readOnly ? 'secondaryInput' : colorPickerMode,
333
- swatches: colorPickerSwatches,
334
- display: "inline",
335
- showAlpha: colorPickerShowAlpha,
336
- isInvalid: colorIsInvalid,
337
- secondaryInputDisplay: colorPickerMode === 'swatch' ? 'none' : 'bottom'
338
- })));
339
- };
340
- exports.EuiColorStopThumb = EuiColorStopThumb;
341
- EuiColorStopThumb.propTypes = {
342
- className: _propTypes.default.string,
343
- onChange: _propTypes.default.func.isRequired,
344
- onFocus: _propTypes.default.func,
345
- onRemove: _propTypes.default.func,
346
- globalMin: _propTypes.default.number.isRequired,
347
- globalMax: _propTypes.default.number.isRequired,
348
- localMin: _propTypes.default.number.isRequired,
349
- localMax: _propTypes.default.number.isRequired,
350
- min: _propTypes.default.number,
351
- max: _propTypes.default.number,
352
- isRangeMin: _propTypes.default.bool,
353
- isRangeMax: _propTypes.default.bool,
354
- parentRef: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([null])]),
355
- colorPickerMode: _propTypes.default.oneOf(["default", "swatch", "picker", "secondaryInput"]).isRequired,
356
- colorPickerShowAlpha: _propTypes.default.bool,
357
- colorPickerSwatches: _propTypes.default.arrayOf(_propTypes.default.string.isRequired),
358
- disabled: _propTypes.default.bool,
359
- readOnly: _propTypes.default.bool,
360
- isPopoverOpen: _propTypes.default.bool.isRequired,
361
- openPopover: _propTypes.default.func.isRequired,
362
- closePopover: _propTypes.default.func.isRequired,
363
- "data-index": _propTypes.default.string,
364
- "aria-valuetext": _propTypes.default.string,
365
- style: _propTypes.default.any,
366
- valueInputProps: _propTypes.default.any,
367
- "aria-label": _propTypes.default.string,
368
- "data-test-subj": _propTypes.default.string,
369
- css: _propTypes.default.any,
370
- stop: _propTypes.default.number.isRequired,
371
- color: _propTypes.default.string.isRequired
372
- };
@@ -1,62 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.euiColorStopThumbStyles = exports.euiColorStopThumbPopoverStyles = exports.euiColorStopStyles = void 0;
7
- var _react = require("@emotion/react");
8
- var _global_styling = require("../../../global_styling");
9
- var _range = require("../../form/range/range.styles");
10
- var _color_picker = require("../color_picker.styles");
11
- 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)."; } /*
12
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
13
- * or more contributor license agreements. Licensed under the Elastic License
14
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
15
- * in compliance with, at your election, the Elastic License 2.0 or the Server
16
- * Side Public License, v 1.
17
- */
18
- var _ref2 = process.env.NODE_ENV === "production" ? {
19
- name: "zrzkfg-euiColorStopThumb",
20
- styles: "&:not(:disabled){inset-block-start:0;margin-block-start:0;pointer-events:auto;cursor:grab;&:active{cursor:grabbing;}};label:euiColorStopThumb;"
21
- } : {
22
- name: "zrzkfg-euiColorStopThumb",
23
- styles: "&:not(:disabled){inset-block-start:0;margin-block-start:0;pointer-events:auto;cursor:grab;&:active{cursor:grabbing;}};label:euiColorStopThumb;",
24
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
25
- };
26
- var euiColorStopThumbStyles = function euiColorStopThumbStyles(euiThemeContext) {
27
- return {
28
- // Base
29
- euiColorStopThumb: _ref2,
30
- isPopoverOpen: /*#__PURE__*/(0, _react.css)((0, _range.euiRangeThumbFocus)(euiThemeContext), ";;label:isPopoverOpen;")
31
- };
32
- };
33
- exports.euiColorStopThumbStyles = euiColorStopThumbStyles;
34
- var _ref = process.env.NODE_ENV === "production" ? {
35
- name: "1wndm4s-isLoadingPanel",
36
- styles: "visibility:hidden!important;label:isLoadingPanel;"
37
- } : {
38
- name: "1wndm4s-isLoadingPanel",
39
- styles: "visibility:hidden!important;label:isLoadingPanel;",
40
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
41
- };
42
- var euiColorStopThumbPopoverStyles = function euiColorStopThumbPopoverStyles(euiThemeContext) {
43
- var range = (0, _range.euiRangeVariables)(euiThemeContext);
44
- var euiTheme = euiThemeContext.euiTheme;
45
- return {
46
- // Base
47
- euiColorStopThumbPopover: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:50%;inline-size:", range.thumbWidth, ";block-size:", range.thumbHeight, ";margin-block-start:", (0, _global_styling.mathWithUnits)(range.thumbHeight, function (x) {
48
- return x * -0.5;
49
- }), ";.euiColorStopThumbPopover__anchor{position:absolute;inline-size:100%;block-size:100%;&::before{content:'';display:block;position:absolute;inset-inline-start:0;inset-block-start:0;block-size:", range.thumbHeight, ";inline-size:", range.thumbWidth, ";border-radius:", range.thumbHeight, ";background:", euiTheme.colors.emptyShade, ";}};label:euiColorStopThumbPopover;"),
50
- isLoadingPanel: _ref,
51
- hasFocus: /*#__PURE__*/(0, _react.css)("z-index:", range.thumbZIndex, ";;label:hasFocus;")
52
- };
53
- };
54
- exports.euiColorStopThumbPopoverStyles = euiColorStopThumbPopoverStyles;
55
- var euiColorStopStyles = function euiColorStopStyles(euiThemeContext) {
56
- var colorPicker = (0, _color_picker.euiColorPickerVariables)(euiThemeContext);
57
- return {
58
- // Base
59
- euiColorStop: /*#__PURE__*/(0, _react.css)("inline-size:", colorPicker.width, ";;label:euiColorStop;")
60
- };
61
- };
62
- exports.euiColorStopStyles = euiColorStopStyles;