@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.
- package/dist/eui_theme_dark.css +26 -526
- package/dist/eui_theme_dark.min.css +1 -1
- package/dist/eui_theme_light.css +26 -526
- package/dist/eui_theme_light.min.css +1 -1
- package/es/components/basic_table/basic_table.js +7 -2
- package/es/components/basic_table/in_memory_table.js +7 -2
- package/es/components/collapsible_nav/collapsible_nav.js +5 -0
- package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -2
- package/es/components/color_picker/index.js +0 -4
- package/es/components/combo_box/combo_box.js +142 -304
- package/es/components/combo_box/combo_box_input/combo_box_input.js +0 -13
- package/es/components/combo_box/combo_box_options_list/combo_box_options_list.js +34 -118
- package/es/components/context_menu/context_menu_panel.js +6 -6
- package/es/components/flex/flex_grid.styles.js +1 -1
- package/es/components/flex/flex_group.styles.js +1 -1
- package/es/components/flyout/flyout.js +32 -33
- package/es/components/flyout/flyout.styles.js +13 -3
- package/es/components/form/range/dual_range.js +4 -0
- package/es/components/form/range/range.js +4 -0
- package/es/components/index.js +0 -1
- package/es/components/popover/input_popover.js +47 -3
- package/es/components/popover/popover.js +2 -2
- package/es/components/table/table_row_cell.js +27 -9
- package/es/components/text_truncate/index.js +1 -0
- package/es/components/text_truncate/text_block_truncate.js +78 -0
- package/es/global_styling/reset/global_styles.js +16 -2
- package/es/services/accessibility/index.js +0 -3
- package/es/services/index.js +1 -1
- package/es/test/rtl/component_helpers.d.ts +2 -0
- package/es/test/rtl/component_helpers.js +29 -1
- package/eui.d.ts +375 -667
- package/i18ntokens.json +52 -286
- package/lib/components/basic_table/basic_table.js +7 -2
- package/lib/components/basic_table/in_memory_table.js +7 -2
- package/lib/components/collapsible_nav/collapsible_nav.js +5 -0
- package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -2
- package/lib/components/color_picker/index.js +0 -7
- package/lib/components/combo_box/combo_box.js +141 -303
- package/lib/components/combo_box/combo_box_input/combo_box_input.js +0 -13
- package/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js +34 -118
- package/lib/components/context_menu/context_menu_panel.js +5 -5
- package/lib/components/flex/flex_grid.styles.js +1 -1
- package/lib/components/flex/flex_group.styles.js +1 -1
- package/lib/components/flyout/flyout.js +31 -32
- package/lib/components/flyout/flyout.styles.js +19 -10
- package/lib/components/form/range/dual_range.js +4 -0
- package/lib/components/index.js +0 -11
- package/lib/components/popover/input_popover.js +48 -3
- package/lib/components/popover/popover.js +1 -1
- package/lib/components/table/table_row_cell.js +26 -8
- package/lib/components/text_truncate/index.js +7 -0
- package/lib/components/text_truncate/text_block_truncate.js +85 -0
- package/lib/global_styling/reset/global_styles.js +16 -2
- package/lib/services/accessibility/index.js +0 -21
- package/lib/services/index.js +0 -21
- package/lib/test/rtl/component_helpers.d.ts +2 -0
- package/lib/test/rtl/component_helpers.js +31 -2
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -2
- package/optimize/es/components/color_picker/index.js +0 -4
- package/optimize/es/components/combo_box/combo_box.js +137 -304
- package/optimize/es/components/combo_box/combo_box_input/combo_box_input.js +0 -12
- package/optimize/es/components/combo_box/combo_box_options_list/combo_box_options_list.js +28 -107
- package/optimize/es/components/context_menu/context_menu_panel.js +6 -6
- package/optimize/es/components/flex/flex_grid.styles.js +1 -1
- package/optimize/es/components/flex/flex_group.styles.js +1 -1
- package/optimize/es/components/flyout/flyout.js +32 -33
- package/optimize/es/components/flyout/flyout.styles.js +13 -3
- package/optimize/es/components/index.js +0 -1
- package/optimize/es/components/popover/input_popover.js +43 -3
- package/optimize/es/components/popover/popover.js +2 -2
- package/optimize/es/components/table/table_row_cell.js +13 -5
- package/optimize/es/components/text_truncate/index.js +1 -0
- package/optimize/es/components/text_truncate/text_block_truncate.js +58 -0
- package/optimize/es/global_styling/reset/global_styles.js +13 -2
- package/optimize/es/services/accessibility/index.js +0 -3
- package/optimize/es/services/index.js +1 -1
- package/optimize/es/test/rtl/component_helpers.d.ts +2 -0
- package/optimize/es/test/rtl/component_helpers.js +29 -1
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -2
- package/optimize/lib/components/color_picker/index.js +0 -7
- package/optimize/lib/components/combo_box/combo_box.js +136 -303
- package/optimize/lib/components/combo_box/combo_box_input/combo_box_input.js +0 -12
- package/optimize/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js +28 -107
- package/optimize/lib/components/context_menu/context_menu_panel.js +5 -5
- package/optimize/lib/components/flex/flex_grid.styles.js +1 -1
- package/optimize/lib/components/flex/flex_group.styles.js +1 -1
- package/optimize/lib/components/flyout/flyout.js +31 -32
- package/optimize/lib/components/flyout/flyout.styles.js +19 -10
- package/optimize/lib/components/index.js +0 -11
- package/optimize/lib/components/popover/input_popover.js +44 -3
- package/optimize/lib/components/popover/popover.js +1 -1
- package/optimize/lib/components/table/table_row_cell.js +12 -4
- package/optimize/lib/components/text_truncate/index.js +7 -0
- package/optimize/lib/components/text_truncate/text_block_truncate.js +66 -0
- package/optimize/lib/global_styling/reset/global_styles.js +19 -10
- package/optimize/lib/services/accessibility/index.js +0 -21
- package/optimize/lib/services/index.js +0 -21
- package/optimize/lib/test/rtl/component_helpers.d.ts +2 -0
- package/optimize/lib/test/rtl/component_helpers.js +31 -2
- package/package.json +1 -1
- package/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss +5 -15
- package/src/components/context_menu/_context_menu_panel.scss +4 -0
- package/src/components/index.scss +0 -1
- package/src/global_styling/mixins/_index.scss +0 -1
- package/src/global_styling/variables/_index.scss +0 -1
- package/src/test/README.md +0 -15
- package/src/themes/amsterdam/global_styling/mixins/_index.scss +0 -1
- package/test-env/components/basic_table/basic_table.js +7 -2
- package/test-env/components/basic_table/in_memory_table.js +7 -2
- package/test-env/components/collapsible_nav/collapsible_nav.js +5 -0
- package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js +4 -2
- package/test-env/components/color_picker/index.js +0 -7
- package/test-env/components/combo_box/combo_box.js +141 -303
- package/test-env/components/combo_box/combo_box_input/combo_box_input.js +0 -13
- package/test-env/components/combo_box/combo_box_options_list/combo_box_options_list.js +33 -117
- package/test-env/components/context_menu/context_menu_panel.js +5 -5
- package/test-env/components/flex/flex_grid.styles.js +1 -1
- package/test-env/components/flex/flex_group.styles.js +1 -1
- package/test-env/components/flyout/flyout.styles.js +19 -10
- package/test-env/components/form/range/dual_range.js +4 -0
- package/test-env/components/index.js +0 -11
- package/test-env/components/popover/input_popover.js +48 -3
- package/test-env/components/popover/popover.js +1 -1
- package/test-env/components/table/table_row_cell.js +26 -8
- package/test-env/components/text_truncate/index.js +7 -0
- package/test-env/components/text_truncate/text_block_truncate.js +82 -0
- package/test-env/global_styling/reset/global_styles.js +19 -10
- package/test-env/services/accessibility/index.js +0 -21
- package/test-env/services/index.js +0 -21
- package/test-env/test/rtl/component_helpers.js +31 -2
- package/es/components/color_picker/color_stops/color_stop_thumb.js +0 -371
- package/es/components/color_picker/color_stops/color_stop_thumb.styles.js +0 -55
- package/es/components/color_picker/color_stops/color_stops.js +0 -499
- package/es/components/color_picker/color_stops/color_stops.styles.js +0 -61
- package/es/components/color_picker/color_stops/index.js +0 -9
- package/es/components/color_picker/color_stops/utils.js +0 -95
- package/es/components/suggest/index.js +0 -10
- package/es/components/suggest/suggest.a11y.js +0 -70
- package/es/components/suggest/suggest.js +0 -347
- package/es/components/suggest/suggest_item.js +0 -123
- package/es/components/suggest/types.js +0 -9
- package/es/services/accessibility/accessible_click_keys.js +0 -17
- package/es/services/accessibility/cascading_menu_keys.js +0 -28
- package/es/services/accessibility/combo_box_keys.js +0 -25
- package/lib/components/color_picker/color_stops/color_stop_thumb.js +0 -380
- package/lib/components/color_picker/color_stops/color_stop_thumb.styles.js +0 -62
- package/lib/components/color_picker/color_stops/color_stops.js +0 -505
- package/lib/components/color_picker/color_stops/color_stops.styles.js +0 -67
- package/lib/components/color_picker/color_stops/index.js +0 -12
- package/lib/components/color_picker/color_stops/utils.js +0 -108
- package/lib/components/suggest/index.js +0 -19
- package/lib/components/suggest/suggest.a11y.js +0 -73
- package/lib/components/suggest/suggest.js +0 -356
- package/lib/components/suggest/suggest_item.js +0 -130
- package/lib/components/suggest/types.js +0 -16
- package/lib/services/accessibility/accessible_click_keys.js +0 -21
- package/lib/services/accessibility/cascading_menu_keys.js +0 -35
- package/lib/services/accessibility/combo_box_keys.js +0 -32
- package/optimize/es/components/color_picker/color_stops/color_stop_thumb.js +0 -329
- package/optimize/es/components/color_picker/color_stops/color_stop_thumb.styles.js +0 -55
- package/optimize/es/components/color_picker/color_stops/color_stops.js +0 -444
- package/optimize/es/components/color_picker/color_stops/color_stops.styles.js +0 -61
- package/optimize/es/components/color_picker/color_stops/index.js +0 -9
- package/optimize/es/components/color_picker/color_stops/utils.js +0 -90
- package/optimize/es/components/suggest/index.js +0 -10
- package/optimize/es/components/suggest/suggest.a11y.js +0 -70
- package/optimize/es/components/suggest/suggest.js +0 -256
- package/optimize/es/components/suggest/suggest_item.js +0 -89
- package/optimize/es/components/suggest/types.js +0 -9
- package/optimize/es/services/accessibility/accessible_click_keys.js +0 -14
- package/optimize/es/services/accessibility/cascading_menu_keys.js +0 -28
- package/optimize/es/services/accessibility/combo_box_keys.js +0 -25
- package/optimize/lib/components/color_picker/color_stops/color_stop_thumb.js +0 -339
- package/optimize/lib/components/color_picker/color_stops/color_stop_thumb.styles.js +0 -62
- package/optimize/lib/components/color_picker/color_stops/color_stops.js +0 -451
- package/optimize/lib/components/color_picker/color_stops/color_stops.styles.js +0 -67
- package/optimize/lib/components/color_picker/color_stops/index.js +0 -12
- package/optimize/lib/components/color_picker/color_stops/utils.js +0 -106
- package/optimize/lib/components/suggest/index.js +0 -19
- package/optimize/lib/components/suggest/suggest.a11y.js +0 -73
- package/optimize/lib/components/suggest/suggest.js +0 -266
- package/optimize/lib/components/suggest/suggest_item.js +0 -96
- package/optimize/lib/components/suggest/types.js +0 -16
- package/optimize/lib/services/accessibility/accessible_click_keys.js +0 -20
- package/optimize/lib/services/accessibility/cascading_menu_keys.js +0 -35
- package/optimize/lib/services/accessibility/combo_box_keys.js +0 -32
- package/src/components/suggest/_index.scss +0 -5
- package/src/components/suggest/_suggest_input.scss +0 -4
- package/src/components/suggest/_suggest_item.scss +0 -103
- package/src/components/suggest/_variables.scss +0 -13
- package/src/global_styling/mixins/_header.scss +0 -29
- package/src/global_styling/variables/_header.scss +0 -3
- package/test-env/components/color_picker/color_stops/color_stop_thumb.js +0 -372
- package/test-env/components/color_picker/color_stops/color_stop_thumb.styles.js +0 -62
- package/test-env/components/color_picker/color_stops/color_stops.js +0 -494
- package/test-env/components/color_picker/color_stops/color_stops.styles.js +0 -67
- package/test-env/components/color_picker/color_stops/index.js +0 -12
- package/test-env/components/color_picker/color_stops/utils.js +0 -106
- package/test-env/components/suggest/index.js +0 -19
- package/test-env/components/suggest/suggest.a11y.js +0 -73
- package/test-env/components/suggest/suggest.js +0 -348
- package/test-env/components/suggest/suggest_item.js +0 -129
- package/test-env/components/suggest/types.js +0 -16
- package/test-env/services/accessibility/accessible_click_keys.js +0 -20
- package/test-env/services/accessibility/cascading_menu_keys.js +0 -35
- 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,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;
|