@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,25 +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
- /**
10
- * These keys are used for navigating combobox UI components.
11
- *
12
- * ARROW_UP: Select the previous item in the list.
13
- * ARROW_DOWN: Select the next item in the list.
14
- * ENTER / TAB: Complete input with the current selection.
15
- * ESC: Deselect the current selection and hide the list.
16
- */
17
-
18
- import { ARROW_DOWN, ENTER, ESCAPE, TAB, ARROW_UP } from '../keys';
19
- export var comboBoxKeys = {
20
- ARROW_DOWN: ARROW_DOWN,
21
- ARROW_UP: ARROW_UP,
22
- ENTER: ENTER,
23
- ESCAPE: ESCAPE,
24
- TAB: TAB
25
- };
@@ -1,380 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.EuiColorStopThumb = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
9
- var _propTypes = _interopRequireDefault(require("prop-types"));
10
- var _classnames = _interopRequireDefault(require("classnames"));
11
- var _utils = require("./utils");
12
- var _utils2 = require("../utils");
13
- var _services = require("../../../services");
14
- var _button = require("../../button");
15
- var _color_picker = require("../color_picker");
16
- var _flex = require("../../flex");
17
- var _form = require("../../form");
18
- var _i18n = require("../../i18n");
19
- var _popover = require("../../popover");
20
- var _accessibility = require("../../accessibility");
21
- var _spacer = require("../../spacer");
22
- var _range_thumb = require("../../form/range/range_thumb");
23
- var _color_stop_thumb = require("./color_stop_thumb.styles");
24
- var _react2 = require("@emotion/react");
25
- 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"];
26
- /*
27
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
28
- * or more contributor license agreements. Licensed under the Elastic License
29
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
30
- * in compliance with, at your election, the Elastic License 2.0 or the Server
31
- * Side Public License, v 1.
32
- */
33
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
34
- 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); }
35
- 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; }
36
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
37
- 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; }
38
- 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; }
39
- function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
40
- function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
41
- function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
42
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
43
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
44
- function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
45
- function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
46
- function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
47
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
48
- function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
49
- function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
50
- var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
51
- var className = _ref.className,
52
- stop = _ref.stop,
53
- color = _ref.color,
54
- onChange = _ref.onChange,
55
- onFocus = _ref.onFocus,
56
- onRemove = _ref.onRemove,
57
- globalMin = _ref.globalMin,
58
- globalMax = _ref.globalMax,
59
- localMin = _ref.localMin,
60
- localMax = _ref.localMax,
61
- min = _ref.min,
62
- max = _ref.max,
63
- _ref$isRangeMin = _ref.isRangeMin,
64
- isRangeMin = _ref$isRangeMin === void 0 ? false : _ref$isRangeMin,
65
- _ref$isRangeMax = _ref.isRangeMax,
66
- isRangeMax = _ref$isRangeMax === void 0 ? false : _ref$isRangeMax,
67
- parentRef = _ref.parentRef,
68
- colorPickerMode = _ref.colorPickerMode,
69
- colorPickerShowAlpha = _ref.colorPickerShowAlpha,
70
- colorPickerSwatches = _ref.colorPickerSwatches,
71
- disabled = _ref.disabled,
72
- readOnly = _ref.readOnly,
73
- isPopoverOpen = _ref.isPopoverOpen,
74
- openPopover = _ref.openPopover,
75
- closePopover = _ref.closePopover,
76
- dataIndex = _ref['data-index'],
77
- ariaValueText = _ref['aria-valuetext'],
78
- style = _ref.style,
79
- _ref$valueInputProps = _ref.valueInputProps,
80
- valueInputProps = _ref$valueInputProps === void 0 ? {} : _ref$valueInputProps,
81
- rest = _objectWithoutProperties(_ref, _excluded);
82
- var background = (0, _react.useMemo)(function () {
83
- var chromaColor = (0, _utils2.getChromaColor)(color, colorPickerShowAlpha);
84
- return chromaColor ? chromaColor.css() : undefined;
85
- }, [color, colorPickerShowAlpha]);
86
- var _useState = (0, _react.useState)(isPopoverOpen),
87
- _useState2 = _slicedToArray(_useState, 2),
88
- hasFocus = _useState2[0],
89
- setHasFocus = _useState2[1];
90
- var _useState3 = (0, _react.useState)((0, _utils.isColorInvalid)(color, colorPickerShowAlpha)),
91
- _useState4 = _slicedToArray(_useState3, 2),
92
- colorIsInvalid = _useState4[0],
93
- setColorIsInvalid = _useState4[1];
94
- var _useState5 = (0, _react.useState)((0, _utils.isStopInvalid)(stop)),
95
- _useState6 = _slicedToArray(_useState5, 2),
96
- stopIsInvalid = _useState6[0],
97
- setStopIsInvalid = _useState6[1];
98
- var _useState7 = (0, _react.useState)(null),
99
- _useState8 = _slicedToArray(_useState7, 2),
100
- numberInputRef = _useState8[0],
101
- setNumberInputRef = _useState8[1];
102
- var popoverRef = (0, _react.useRef)(null);
103
- (0, _react.useEffect)(function () {
104
- if (isPopoverOpen && popoverRef && popoverRef.current) {
105
- popoverRef.current.positionPopoverFixed();
106
- }
107
- }, [isPopoverOpen, stop]);
108
- var getStopFromMouseLocationFn = function getStopFromMouseLocationFn(location) {
109
- // Guard against `null` ref in usage
110
- return (0, _utils.getStopFromMouseLocation)(location, parentRef, globalMin, globalMax);
111
- };
112
- var getPositionFromStopFn = function getPositionFromStopFn(stop) {
113
- // Guard against `null` ref in usage
114
- return (0, _utils.getPositionFromStop)(stop, parentRef, globalMin, globalMax);
115
- };
116
- var handleOnRemove = function handleOnRemove() {
117
- if (onRemove) {
118
- closePopover();
119
- onRemove();
120
- }
121
- };
122
- var handleFocus = function handleFocus() {
123
- setHasFocus(true);
124
- if (onFocus) {
125
- onFocus();
126
- }
127
- };
128
- var setHasFocusTrue = function setHasFocusTrue() {
129
- return setHasFocus(true);
130
- };
131
- var setHasFocusFalse = function setHasFocusFalse() {
132
- return setHasFocus(false);
133
- };
134
- var handleColorChange = function handleColorChange(value) {
135
- setColorIsInvalid((0, _utils.isColorInvalid)(value, colorPickerShowAlpha));
136
- onChange({
137
- stop: stop,
138
- color: value
139
- });
140
- };
141
- var handleStopChange = function handleStopChange(value) {
142
- var willBeInvalid = value > localMax || value < localMin;
143
- if (willBeInvalid) {
144
- if (value > localMax) {
145
- value = localMax;
146
- }
147
- if (value < localMin) {
148
- value = localMin;
149
- }
150
- }
151
- setStopIsInvalid((0, _utils.isStopInvalid)(value));
152
- onChange({
153
- stop: value,
154
- color: color
155
- });
156
- };
157
- var handleStopInputChange = function handleStopInputChange(e) {
158
- var value = parseFloat(e.target.value);
159
- var willBeInvalid = value > globalMax || value < globalMin;
160
- if (willBeInvalid) {
161
- if (value > globalMax && max != null) {
162
- value = globalMax;
163
- }
164
- if (value < globalMin && min != null) {
165
- value = globalMin;
166
- }
167
- }
168
- setStopIsInvalid((0, _utils.isStopInvalid)(value));
169
- onChange({
170
- stop: value,
171
- color: color
172
- });
173
- };
174
- var handlePointerChange = function handlePointerChange(location, isFirstInteraction) {
175
- if (isFirstInteraction) return; // Prevents change on the initial MouseDown event
176
- if (parentRef == null) {
177
- return;
178
- }
179
- var newStop = getStopFromMouseLocationFn(location);
180
- handleStopChange(newStop);
181
- };
182
- var handleKeyDown = function handleKeyDown(event) {
183
- switch (event.key) {
184
- case _services.keys.ENTER:
185
- event.preventDefault();
186
- openPopover();
187
- break;
188
- case _services.keys.ARROW_LEFT:
189
- event.preventDefault();
190
- if (readOnly) return;
191
- handleStopChange(stop - 1);
192
- break;
193
- case _services.keys.ARROW_RIGHT:
194
- event.preventDefault();
195
- if (readOnly) return;
196
- handleStopChange(stop + 1);
197
- break;
198
- }
199
- };
200
- var _useMouseMove = (0, _services.useMouseMove)(handlePointerChange),
201
- _useMouseMove2 = _slicedToArray(_useMouseMove, 2),
202
- handleMouseDown = _useMouseMove2[0],
203
- handleInteraction = _useMouseMove2[1];
204
- var handleOnMouseDown = function handleOnMouseDown(e) {
205
- if (!readOnly) {
206
- handleMouseDown(e);
207
- }
208
- openPopover();
209
- };
210
- var handleTouchInteraction = function handleTouchInteraction(e) {
211
- if (!readOnly) {
212
- handleInteraction(e);
213
- }
214
- };
215
- var handleTouchStart = function handleTouchStart(e) {
216
- handleTouchInteraction(e);
217
- if (!isPopoverOpen) {
218
- openPopover();
219
- }
220
- };
221
- var euiTheme = (0, _services.useEuiTheme)();
222
- var popoverStyles = (0, _color_stop_thumb.euiColorStopThumbPopoverStyles)(euiTheme);
223
- var cssPopoverStyles = [popoverStyles.euiColorStopThumbPopover, (hasFocus || isPopoverOpen) && popoverStyles.hasFocus];
224
- var thumbStyles = (0, _color_stop_thumb.euiColorStopThumbStyles)(euiTheme);
225
- var cssThumbStyles = [thumbStyles.euiColorStopThumb, isPopoverOpen && thumbStyles.isPopoverOpen];
226
- var colorStopStyles = (0, _color_stop_thumb.euiColorStopStyles)(euiTheme);
227
- var cssColorStopStyles = colorStopStyles.euiColorStop;
228
- var classes = (0, _classnames.default)('euiColorStopPopover', className);
229
- return (0, _react2.jsx)(_popover.EuiPopover, _extends({
230
- css: cssPopoverStyles
231
- }, rest, {
232
- ref: popoverRef,
233
- className: classes,
234
- anchorClassName: "euiColorStopThumbPopover__anchor",
235
- panelPaddingSize: "s",
236
- isOpen: isPopoverOpen,
237
- closePopover: closePopover,
238
- initialFocus: numberInputRef || undefined,
239
- focusTrapProps: {
240
- clickOutsideDisables: false
241
- },
242
- panelProps: {
243
- css: numberInputRef ? undefined : popoverStyles.isLoadingPanel
244
- },
245
- style: _objectSpread(_objectSpread({}, style), {}, {
246
- left: "".concat(getPositionFromStopFn(stop), "%")
247
- }),
248
- button: (0, _react2.jsx)(_i18n.EuiI18n, {
249
- tokens: ['euiColorStopThumb.buttonAriaLabel', 'euiColorStopThumb.buttonTitle'],
250
- defaults: ['Press the Enter key to modify this stop. Press Escape to focus the group', 'Click to edit, drag to reposition']
251
- }, function (_ref2) {
252
- var _ref3 = _slicedToArray(_ref2, 2),
253
- buttonAriaLabel = _ref3[0],
254
- buttonTitle = _ref3[1];
255
- var ariaLabel = buttonAriaLabel;
256
- var title = buttonTitle;
257
- return (0, _react2.jsx)(_range_thumb.EuiRangeThumb, {
258
- "data-test-subj": "euiColorStopThumb",
259
- "data-index": dataIndex,
260
- min: localMin,
261
- max: localMax,
262
- value: stop,
263
- onFocus: handleFocus,
264
- onBlur: setHasFocusFalse,
265
- onMouseOver: setHasFocusTrue,
266
- onMouseOut: setHasFocusFalse,
267
- onKeyDown: handleKeyDown,
268
- onMouseDown: handleOnMouseDown,
269
- onTouchStart: handleTouchStart,
270
- onTouchMove: handleTouchInteraction,
271
- "aria-valuetext": ariaValueText,
272
- "aria-label": ariaLabel,
273
- title: title,
274
- className: "euiColorStopThumb",
275
- css: cssThumbStyles,
276
- tabIndex: -1,
277
- style: {
278
- background: background
279
- },
280
- disabled: disabled
281
- });
282
- })
283
- }), (0, _react2.jsx)("div", {
284
- className: "euiColorStop",
285
- css: cssColorStopStyles,
286
- "data-test-subj": "euiColorStopPopover"
287
- }, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
288
- "aria-live": "polite"
289
- }, (0, _react2.jsx)(_i18n.EuiI18n, {
290
- token: "euiColorStopThumb.screenReaderAnnouncement",
291
- default: "A popup with a color stop edit form opened. Tab forward to cycle through form controls or press escape to close this popup."
292
- }))), (0, _react2.jsx)(_flex.EuiFlexGroup, {
293
- gutterSize: "s",
294
- responsive: false
295
- }, (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_i18n.EuiI18n, {
296
- tokens: ['euiColorStopThumb.stopLabel', 'euiColorStopThumb.stopErrorMessage'],
297
- defaults: ['Stop value', 'Value is out of range']
298
- }, function (_ref4) {
299
- var _ref5 = _slicedToArray(_ref4, 2),
300
- stopLabel = _ref5[0],
301
- stopErrorMessage = _ref5[1];
302
- return (0, _react2.jsx)(_form.EuiFormRow, {
303
- label: stopLabel,
304
- display: "rowCompressed",
305
- isInvalid: stopIsInvalid,
306
- error: stopIsInvalid ? stopErrorMessage : null
307
- }, (0, _react2.jsx)(_form.EuiFieldNumber, _extends({}, valueInputProps, {
308
- inputRef: setNumberInputRef,
309
- compressed: true,
310
- readOnly: readOnly,
311
- min: isRangeMin || min == null ? undefined : localMin,
312
- max: isRangeMax || max == null ? undefined : localMax,
313
- value: (0, _utils.isStopInvalid)(stop) ? '' : stop,
314
- isInvalid: stopIsInvalid,
315
- onChange: handleStopInputChange
316
- })));
317
- })), !readOnly && (0, _react2.jsx)(_flex.EuiFlexItem, {
318
- grow: false
319
- }, (0, _react2.jsx)(_form.EuiFormRow, {
320
- display: "rowCompressed",
321
- hasEmptyLabelSpace: true
322
- }, (0, _react2.jsx)(_i18n.EuiI18n, {
323
- token: "euiColorStopThumb.removeLabel",
324
- default: "Remove this stop"
325
- }, function (removeLabel) {
326
- return (0, _react2.jsx)(_button.EuiButtonIcon, {
327
- iconType: "trash",
328
- color: "danger",
329
- "aria-label": removeLabel,
330
- title: removeLabel,
331
- disabled: !onRemove,
332
- onClick: handleOnRemove
333
- });
334
- })))), !readOnly && (0, _react2.jsx)(_spacer.EuiSpacer, {
335
- size: "s"
336
- }), (0, _react2.jsx)(_color_picker.EuiColorPicker, {
337
- readOnly: readOnly,
338
- onChange: handleColorChange,
339
- color: color,
340
- mode: readOnly ? 'secondaryInput' : colorPickerMode,
341
- swatches: colorPickerSwatches,
342
- display: "inline",
343
- showAlpha: colorPickerShowAlpha,
344
- isInvalid: colorIsInvalid,
345
- secondaryInputDisplay: colorPickerMode === 'swatch' ? 'none' : 'bottom'
346
- })));
347
- };
348
- exports.EuiColorStopThumb = EuiColorStopThumb;
349
- EuiColorStopThumb.propTypes = {
350
- className: _propTypes.default.string,
351
- onChange: _propTypes.default.func.isRequired,
352
- onFocus: _propTypes.default.func,
353
- onRemove: _propTypes.default.func,
354
- globalMin: _propTypes.default.number.isRequired,
355
- globalMax: _propTypes.default.number.isRequired,
356
- localMin: _propTypes.default.number.isRequired,
357
- localMax: _propTypes.default.number.isRequired,
358
- min: _propTypes.default.number,
359
- max: _propTypes.default.number,
360
- isRangeMin: _propTypes.default.bool,
361
- isRangeMax: _propTypes.default.bool,
362
- parentRef: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([null])]),
363
- colorPickerMode: _propTypes.default.oneOf(["default", "swatch", "picker", "secondaryInput"]).isRequired,
364
- colorPickerShowAlpha: _propTypes.default.bool,
365
- colorPickerSwatches: _propTypes.default.arrayOf(_propTypes.default.string.isRequired),
366
- disabled: _propTypes.default.bool,
367
- readOnly: _propTypes.default.bool,
368
- isPopoverOpen: _propTypes.default.bool.isRequired,
369
- openPopover: _propTypes.default.func.isRequired,
370
- closePopover: _propTypes.default.func.isRequired,
371
- "data-index": _propTypes.default.string,
372
- "aria-valuetext": _propTypes.default.string,
373
- style: _propTypes.default.any,
374
- valueInputProps: _propTypes.default.any,
375
- "aria-label": _propTypes.default.string,
376
- "data-test-subj": _propTypes.default.string,
377
- css: _propTypes.default.any,
378
- stop: _propTypes.default.number.isRequired,
379
- color: _propTypes.default.string.isRequired
380
- };
@@ -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;