@elastic/eui 109.2.0 → 110.0.0-snapshot.1764684698664

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 (95) hide show
  1. package/es/components/basic_table/in_memory_table.js +86 -233
  2. package/es/components/date_picker/super_date_picker/date_popover/absolute_tab.js +5 -1
  3. package/es/components/date_picker/super_date_picker/date_popover/relative_tab.js +5 -1
  4. package/es/components/date_picker/super_date_picker/date_popover/timezone_display.js +3 -1
  5. package/es/components/date_picker/super_date_picker/quick_select_popover/index.js +1 -0
  6. package/es/components/date_picker/super_date_picker/time_window_buttons.js +1 -1
  7. package/es/components/filter_group/filter_group.a11y.js +1 -1
  8. package/es/components/header/header_logo/header_logo.js +6 -1
  9. package/es/components/header/header_logo/header_logo.styles.js +1 -1
  10. package/es/components/icon/icon.styles.js +4 -4
  11. package/es/components/page/page.js +11 -3
  12. package/es/components/page/page.styles.js +1 -2
  13. package/es/components/page/page_header/page_header.js +11 -3
  14. package/es/components/page_template/outer/page_outer.js +2 -3
  15. package/es/components/page_template/outer/page_outer.styles.js +29 -35
  16. package/es/components/page_template/page_template.js +8 -2
  17. package/es/components/search_bar/search_bar.js +4 -4
  18. package/es/components/selectable/selectable.js +7 -2
  19. package/es/services/string/to_initials.js +26 -4
  20. package/eui.d.ts +38 -21
  21. package/lib/components/basic_table/in_memory_table.js +85 -234
  22. package/lib/components/date_picker/super_date_picker/date_popover/absolute_tab.js +5 -1
  23. package/lib/components/date_picker/super_date_picker/date_popover/relative_tab.js +5 -1
  24. package/lib/components/date_picker/super_date_picker/date_popover/timezone_display.js +3 -1
  25. package/lib/components/date_picker/super_date_picker/quick_select_popover/index.js +7 -0
  26. package/lib/components/date_picker/super_date_picker/time_window_buttons.js +1 -1
  27. package/lib/components/filter_group/filter_group.a11y.js +1 -1
  28. package/lib/components/header/header_logo/header_logo.js +6 -1
  29. package/lib/components/header/header_logo/header_logo.styles.js +1 -1
  30. package/lib/components/icon/icon.styles.js +4 -4
  31. package/lib/components/page/page.js +10 -2
  32. package/lib/components/page/page.styles.js +1 -2
  33. package/lib/components/page/page_header/page_header.js +10 -2
  34. package/lib/components/page_template/outer/page_outer.js +1 -2
  35. package/lib/components/page_template/outer/page_outer.styles.js +29 -35
  36. package/lib/components/page_template/page_template.js +8 -2
  37. package/lib/components/search_bar/search_bar.js +4 -4
  38. package/lib/components/selectable/selectable.js +7 -2
  39. package/lib/services/string/to_initials.js +26 -4
  40. package/optimize/es/components/basic_table/in_memory_table.js +73 -46
  41. package/optimize/es/components/date_picker/super_date_picker/date_popover/absolute_tab.js +5 -1
  42. package/optimize/es/components/date_picker/super_date_picker/date_popover/relative_tab.js +5 -1
  43. package/optimize/es/components/date_picker/super_date_picker/date_popover/timezone_display.js +3 -1
  44. package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/index.js +1 -0
  45. package/optimize/es/components/date_picker/super_date_picker/time_window_buttons.js +1 -1
  46. package/optimize/es/components/filter_group/filter_group.a11y.js +1 -1
  47. package/optimize/es/components/header/header_logo/header_logo.js +6 -1
  48. package/optimize/es/components/header/header_logo/header_logo.styles.js +1 -1
  49. package/optimize/es/components/icon/icon.styles.js +4 -4
  50. package/optimize/es/components/page/page.js +6 -3
  51. package/optimize/es/components/page/page.styles.js +1 -2
  52. package/optimize/es/components/page/page_header/page_header.js +6 -3
  53. package/optimize/es/components/page_template/outer/page_outer.js +2 -3
  54. package/optimize/es/components/page_template/outer/page_outer.styles.js +29 -35
  55. package/optimize/es/components/page_template/page_template.js +2 -1
  56. package/optimize/es/components/selectable/selectable.js +7 -2
  57. package/optimize/es/services/string/to_initials.js +26 -4
  58. package/optimize/lib/components/basic_table/in_memory_table.js +72 -47
  59. package/optimize/lib/components/date_picker/super_date_picker/date_popover/absolute_tab.js +5 -1
  60. package/optimize/lib/components/date_picker/super_date_picker/date_popover/relative_tab.js +5 -1
  61. package/optimize/lib/components/date_picker/super_date_picker/date_popover/timezone_display.js +3 -1
  62. package/optimize/lib/components/date_picker/super_date_picker/quick_select_popover/index.js +7 -0
  63. package/optimize/lib/components/date_picker/super_date_picker/time_window_buttons.js +1 -1
  64. package/optimize/lib/components/filter_group/filter_group.a11y.js +1 -1
  65. package/optimize/lib/components/header/header_logo/header_logo.js +6 -1
  66. package/optimize/lib/components/header/header_logo/header_logo.styles.js +1 -1
  67. package/optimize/lib/components/icon/icon.styles.js +4 -4
  68. package/optimize/lib/components/page/page.js +5 -2
  69. package/optimize/lib/components/page/page.styles.js +1 -2
  70. package/optimize/lib/components/page/page_header/page_header.js +5 -2
  71. package/optimize/lib/components/page_template/outer/page_outer.js +1 -2
  72. package/optimize/lib/components/page_template/outer/page_outer.styles.js +29 -35
  73. package/optimize/lib/components/page_template/page_template.js +2 -1
  74. package/optimize/lib/components/selectable/selectable.js +7 -2
  75. package/optimize/lib/services/string/to_initials.js +26 -4
  76. package/package.json +3 -2
  77. package/test-env/components/basic_table/in_memory_table.js +85 -234
  78. package/test-env/components/date_picker/super_date_picker/date_popover/absolute_tab.js +5 -1
  79. package/test-env/components/date_picker/super_date_picker/date_popover/relative_tab.js +5 -1
  80. package/test-env/components/date_picker/super_date_picker/date_popover/timezone_display.js +3 -1
  81. package/test-env/components/date_picker/super_date_picker/quick_select_popover/index.js +7 -0
  82. package/test-env/components/date_picker/super_date_picker/time_window_buttons.js +1 -1
  83. package/test-env/components/filter_group/filter_group.a11y.js +1 -1
  84. package/test-env/components/header/header_logo/header_logo.js +6 -1
  85. package/test-env/components/header/header_logo/header_logo.styles.js +1 -1
  86. package/test-env/components/icon/icon.styles.js +4 -4
  87. package/test-env/components/page/page.js +10 -2
  88. package/test-env/components/page/page.styles.js +1 -2
  89. package/test-env/components/page/page_header/page_header.js +10 -2
  90. package/test-env/components/page_template/outer/page_outer.js +1 -2
  91. package/test-env/components/page_template/outer/page_outer.styles.js +29 -35
  92. package/test-env/components/page_template/page_template.js +8 -2
  93. package/test-env/components/search_bar/search_bar.js +4 -4
  94. package/test-env/components/selectable/selectable.js +7 -2
  95. package/test-env/services/string/to_initials.js +26 -4
@@ -231,7 +231,7 @@ describe('EuiFilterGroup multiselect example', function () {
231
231
  cy.realPress('Enter');
232
232
  cy.get('div[data-test-subj="euiSelectableList"]').should('exist');
233
233
  cy.realPress('Tab');
234
- cy.repeatRealPress('ArrowDown', 3);
234
+ cy.repeatRealPress('ArrowDown', 4);
235
235
  cy.realPress('Enter');
236
236
  cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich. Checked option. To exclude this option, press Enter.');
237
237
  cy.realPress('ArrowDown');
@@ -13,6 +13,7 @@ import React from 'react';
13
13
  import classNames from 'classnames';
14
14
  import { useEuiMemoizedStyles, getSecureRelForTarget } from '../../../services';
15
15
  import { validateHref } from '../../../services/security/href_validator';
16
+ import { useEuiButtonColorCSS } from '../../../global_styling';
16
17
  import { EuiIcon } from '../../icon';
17
18
  import { euiHeaderLogoStyles } from './header_logo.styles';
18
19
  import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -29,6 +30,10 @@ export var EuiHeaderLogo = function EuiHeaderLogo(_ref) {
29
30
  rest = _objectWithoutProperties(_ref, _excluded);
30
31
  var classes = classNames('euiHeaderLogo', className);
31
32
  var styles = useEuiMemoizedStyles(euiHeaderLogoStyles);
33
+ var buttonColorStyles = useEuiButtonColorCSS({
34
+ display: 'empty'
35
+ });
36
+ var cssStyles = [styles.euiHeaderLogo, buttonColorStyles.text];
32
37
  var secureRel = getSecureRelForTarget({
33
38
  href: href,
34
39
  rel: rel,
@@ -39,7 +44,7 @@ export var EuiHeaderLogo = function EuiHeaderLogo(_ref) {
39
44
  href: isHrefValid ? href : '',
40
45
  rel: secureRel,
41
46
  target: target,
42
- css: styles.euiHeaderLogo,
47
+ css: cssStyles,
43
48
  className: classes
44
49
  }, rest), ___EmotionJSX(EuiIcon, {
45
50
  "aria-label": iconTitle,
@@ -15,7 +15,7 @@ export var euiHeaderLogoStyles = function euiHeaderLogoStyles(euiThemeContext) {
15
15
  var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
16
16
  childHeight = _euiHeaderVariables.childHeight;
17
17
  return {
18
- euiHeaderLogo: /*#__PURE__*/css("position:relative;", logicalCSS('height', childHeight), " line-height:", childHeight, ";", logicalCSS('min-width', childHeight), " padding-inline:", euiTheme.size.s, ";display:inline-flex;align-items:center;white-space:nowrap;", euiBreakpoint(euiThemeContext, ['xs']), "{", logicalCSS('padding-left', euiTheme.size.xs), ";};label:euiHeaderLogo;"),
18
+ euiHeaderLogo: /*#__PURE__*/css("position:relative;", logicalCSS('height', childHeight), " line-height:", childHeight, ";", logicalCSS('min-width', childHeight), " padding-inline:", euiTheme.size.s, ";display:inline-flex;border-radius:", euiTheme.border.radius.small, ";align-items:center;white-space:nowrap;", euiBreakpoint(euiThemeContext, ['xs']), "{", logicalCSS('padding-left', euiTheme.size.xs), ";};label:euiHeaderLogo;"),
19
19
  euiHeaderLogo__text: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xxs'), " ", logicalCSS('padding-left', euiTheme.size.base), " ", euiBreakpoint(euiThemeContext, ['xs']), "{", logicalCSS('padding-left', euiTheme.size.s), ";};label:euiHeaderLogo__text;")
20
20
  };
21
21
  };
@@ -14,11 +14,11 @@ import { logicalSizeCSS, euiCanAnimate } from '../../global_styling';
14
14
  export var iconLoadingOpacity = 0.05;
15
15
  var iconLoading = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n opacity: ", ";\n }\n\n 100% {\n opacity: 1;\n }\n"])), iconLoadingOpacity);
16
16
  var _ref = process.env.NODE_ENV === "production" ? {
17
- name: "njd749-logoElasticOutline",
18
- styles: "*[fill]{fill:none!important;}.outline{fill:currentColor!important;};label:logoElasticOutline;"
17
+ name: "p0011s-logoElasticOutline",
18
+ styles: "*[fill]{fill:none!important;stroke:currentColor!important;};label:logoElasticOutline;"
19
19
  } : {
20
- name: "njd749-logoElasticOutline",
21
- styles: "*[fill]{fill:none!important;}.outline{fill:currentColor!important;};label:logoElasticOutline;",
20
+ name: "p0011s-logoElasticOutline",
21
+ styles: "*[fill]{fill:none!important;stroke:currentColor!important;};label:logoElasticOutline;",
22
22
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
23
23
  };
24
24
  var _ref2 = process.env.NODE_ENV === "production" ? {
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["children", "restrictWidth", "className", "paddingSize", "grow", "direction"];
3
+ var _excluded = ["children", "restrictWidth", "className", "paddingSize", "grow", "direction", "color"];
4
4
  /*
5
5
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
6
6
  * or more contributor license agreements. Licensed under the Elastic License
@@ -12,7 +12,7 @@ var _excluded = ["children", "restrictWidth", "className", "paddingSize", "grow"
12
12
  import React from 'react';
13
13
  import classNames from 'classnames';
14
14
  import { setStyleForRestrictedPageWidth } from './_restrict_width';
15
- import { useEuiPaddingCSS } from '../../global_styling';
15
+ import { useEuiPaddingCSS, useEuiBackgroundColorCSS } from '../../global_styling';
16
16
  import { euiPageStyles } from './page.styles';
17
17
  import { useEuiTheme } from '../../services';
18
18
  import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -27,13 +27,16 @@ export var EuiPage = function EuiPage(_ref) {
27
27
  grow = _ref$grow === void 0 ? true : _ref$grow,
28
28
  _ref$direction = _ref.direction,
29
29
  direction = _ref$direction === void 0 ? 'row' : _ref$direction,
30
+ _ref$color = _ref.color,
31
+ color = _ref$color === void 0 ? 'transparent' : _ref$color,
30
32
  rest = _objectWithoutProperties(_ref, _excluded);
31
33
  // Set max-width as a style prop
32
34
  var widthStyles = setStyleForRestrictedPageWidth(restrictWidth, rest === null || rest === void 0 ? void 0 : rest.style);
33
35
  var euiTheme = useEuiTheme();
34
36
  var styles = euiPageStyles(euiTheme);
35
37
  var padding = useEuiPaddingCSS()[paddingSize];
36
- var stylesCSS = [styles.euiPage, styles[direction], grow && styles.grow, padding, restrictWidth && styles.restrictWidth];
38
+ var backgroundColor = useEuiBackgroundColorCSS()[color];
39
+ var stylesCSS = [styles.euiPage, styles[direction], backgroundColor, grow && styles.grow, padding, restrictWidth && styles.restrictWidth];
37
40
  var classes = classNames('euiPage', className);
38
41
  return ___EmotionJSX("div", _extends({
39
42
  css: stylesCSS,
@@ -26,9 +26,8 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
26
26
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
27
27
  };
28
28
  export var euiPageStyles = function euiPageStyles(euiThemeContext) {
29
- var euiTheme = euiThemeContext.euiTheme;
30
29
  return {
31
- euiPage: /*#__PURE__*/css("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", logicalCSS('max-width', '100%'), ";;label:euiPage;"),
30
+ euiPage: /*#__PURE__*/css("display:flex;flex-shrink:0;", logicalCSS('max-width', '100%'), ";;label:euiPage;"),
32
31
  // Grow
33
32
  grow: _ref2,
34
33
  // Direction
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["className", "restrictWidth", "paddingSize", "bottomBorder", "alignItems", "responsive", "children", "pageTitle", "pageTitleProps", "iconType", "iconProps", "tabs", "tabsProps", "breadcrumbs", "breadcrumbProps", "description", "rightSideItems", "rightSideGroupProps"];
3
+ var _excluded = ["className", "restrictWidth", "paddingSize", "bottomBorder", "color", "alignItems", "responsive", "children", "pageTitle", "pageTitleProps", "iconType", "iconProps", "tabs", "tabsProps", "breadcrumbs", "breadcrumbProps", "description", "rightSideItems", "rightSideGroupProps"];
4
4
  /*
5
5
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
6
6
  * or more contributor license agreements. Licensed under the Elastic License
@@ -12,7 +12,7 @@ var _excluded = ["className", "restrictWidth", "paddingSize", "bottomBorder", "a
12
12
  import React from 'react';
13
13
  import classNames from 'classnames';
14
14
  import { useEuiTheme } from '../../../services';
15
- import { useEuiPaddingCSS } from '../../../global_styling';
15
+ import { useEuiPaddingCSS, useEuiBackgroundColorCSS } from '../../../global_styling';
16
16
  import { EuiPageHeaderContent } from './page_header_content';
17
17
  import { euiPageHeaderStyles } from './page_header.styles';
18
18
  import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -23,6 +23,8 @@ export var EuiPageHeader = function EuiPageHeader(_ref) {
23
23
  _ref$paddingSize = _ref.paddingSize,
24
24
  paddingSize = _ref$paddingSize === void 0 ? 'none' : _ref$paddingSize,
25
25
  bottomBorder = _ref.bottomBorder,
26
+ _ref$color = _ref.color,
27
+ color = _ref$color === void 0 ? 'transparent' : _ref$color,
26
28
  alignItems = _ref.alignItems,
27
29
  _ref$responsive = _ref.responsive,
28
30
  responsive = _ref$responsive === void 0 ? true : _ref$responsive,
@@ -42,7 +44,8 @@ export var EuiPageHeader = function EuiPageHeader(_ref) {
42
44
  var useTheme = useEuiTheme();
43
45
  var styles = euiPageHeaderStyles(useTheme);
44
46
  var inlinePadding = useEuiPaddingCSS('horizontal');
45
- var cssStyles = [styles.euiPageHeader, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border];
47
+ var backgroundColor = useEuiBackgroundColorCSS()[color];
48
+ var cssStyles = [styles.euiPageHeader, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, backgroundColor];
46
49
  var classes = classNames('euiPageHeader', className);
47
50
  var contentProps = {
48
51
  restrictWidth: restrictWidth,
@@ -10,7 +10,7 @@ var _excluded = ["children", "grow", "direction", "responsive"];
10
10
  */
11
11
 
12
12
  import React from 'react';
13
- import { useEuiTheme, useIsWithinBreakpoints } from '../../../services';
13
+ import { useIsWithinBreakpoints } from '../../../services';
14
14
  import { euiPageOuterStyles } from './page_outer.styles';
15
15
  import { jsx as ___EmotionJSX } from "@emotion/react";
16
16
  export var PAGE_DIRECTIONS = ['row', 'column'];
@@ -23,8 +23,7 @@ export var _EuiPageOuter = function _EuiPageOuter(_ref) {
23
23
  _ref$responsive = _ref.responsive,
24
24
  responsive = _ref$responsive === void 0 ? ['xs', 's'] : _ref$responsive,
25
25
  rest = _objectWithoutProperties(_ref, _excluded);
26
- var themeContext = useEuiTheme();
27
- var styles = euiPageOuterStyles(themeContext);
26
+ var styles = euiPageOuterStyles;
28
27
  var isResponding = useIsWithinBreakpoints(responsive);
29
28
  var cssStyles = [styles.euiPageOuter, styles[isResponding ? 'column' : direction], grow && styles.grow];
30
29
  return ___EmotionJSX("div", _extends({
@@ -9,39 +9,33 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
9
9
 
10
10
  import { css } from '@emotion/react';
11
11
  import { logicalCSS } from '../../../global_styling';
12
- var _ref = process.env.NODE_ENV === "production" ? {
13
- name: "15mvjmo-row",
14
- styles: "flex-direction:row;label:row;"
15
- } : {
16
- name: "15mvjmo-row",
17
- styles: "flex-direction:row;label:row;",
18
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
19
- };
20
- var _ref2 = process.env.NODE_ENV === "production" ? {
21
- name: "ll8kmq-column",
22
- styles: "flex-direction:column;label:column;"
23
- } : {
24
- name: "ll8kmq-column",
25
- styles: "flex-direction:column;label:column;",
26
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
27
- };
28
- var _ref3 = process.env.NODE_ENV === "production" ? {
29
- name: "122lw0e-grow",
30
- styles: "flex-grow:1;label:grow;"
31
- } : {
32
- name: "122lw0e-grow",
33
- styles: "flex-grow:1;label:grow;",
34
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
35
- };
36
- export var euiPageOuterStyles = function euiPageOuterStyles(_ref4) {
37
- var euiTheme = _ref4.euiTheme;
38
- return {
39
- euiPageOuter: /*#__PURE__*/css("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", logicalCSS('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
40
- ), ";;label:euiPageOuter;"),
41
- // Grow
42
- grow: _ref3,
43
- // Direction
44
- column: _ref2,
45
- row: _ref
46
- };
12
+ export var euiPageOuterStyles = {
13
+ euiPageOuter: /*#__PURE__*/css("display:flex;flex-shrink:0;", logicalCSS('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
14
+ ), ";;label:euiPageOuter;"),
15
+ // Grow
16
+ grow: process.env.NODE_ENV === "production" ? {
17
+ name: "122lw0e-grow",
18
+ styles: "flex-grow:1;label:grow;"
19
+ } : {
20
+ name: "122lw0e-grow",
21
+ styles: "flex-grow:1;label:grow;",
22
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
23
+ },
24
+ // Direction
25
+ column: process.env.NODE_ENV === "production" ? {
26
+ name: "ll8kmq-column",
27
+ styles: "flex-direction:column;label:column;"
28
+ } : {
29
+ name: "ll8kmq-column",
30
+ styles: "flex-direction:column;label:column;",
31
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
32
+ },
33
+ row: process.env.NODE_ENV === "production" ? {
34
+ name: "15mvjmo-row",
35
+ styles: "flex-direction:row;label:row;"
36
+ } : {
37
+ name: "15mvjmo-row",
38
+ styles: "flex-direction:row;label:row;",
39
+ toString: _EMOTION_STRINGIFIED_CSS_ERROR__
40
+ }
47
41
  };
@@ -98,7 +98,8 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
98
98
  header: {
99
99
  restrictWidth: restrictWidth,
100
100
  paddingSize: paddingSize,
101
- bottomBorder: headerBottomBorder
101
+ bottomBorder: headerBottomBorder,
102
+ color: panelled === false ? 'transparent' : 'plain'
102
103
  },
103
104
  section: {
104
105
  restrictWidth: restrictWidth,
@@ -78,6 +78,12 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
78
78
  _this.preventOnFocus = false;
79
79
  return;
80
80
  }
81
+ if (event && _this.props.searchable && event.target === _this.inputRef) {
82
+ _this.setState({
83
+ isFocused: true
84
+ });
85
+ return;
86
+ }
81
87
  if (!_this.state.visibleOptions.length || _this.state.activeOptionIndex != null) {
82
88
  return;
83
89
  }
@@ -453,8 +459,7 @@ export var EuiSelectable = /*#__PURE__*/function (_Component) {
453
459
  onChange: _this2.onSearchChange,
454
460
  listId: _this2.optionsListRef.current ? _this2.listId : undefined // Only pass the listId if it exists on the page
455
461
  ,
456
- "aria-activedescendant": _this2.makeOptionId(activeOptionIndex) // the current faux-focused option
457
- ,
462
+ "aria-activedescendant": activeOptionIndex != null ? _this2.makeOptionId(activeOptionIndex) : undefined,
458
463
  placeholder: placeholderName,
459
464
  isPreFiltered: !!isPreFiltered,
460
465
  optionMatcher: optionMatcher,
@@ -6,6 +6,8 @@
6
6
  * Side Public License, v 1.
7
7
  */
8
8
 
9
+ export var MAX_INITIALS = 2;
10
+
9
11
  /**
10
12
  * This function calculates the initials/acronym for a given name.
11
13
  * It defaults to only 2 characters and will take the first character (of each word).
@@ -17,11 +19,20 @@
17
19
  * @param {string} name The full name of the item to turn into initials
18
20
  * @param {number} initialsLength (Optional) How many characters to show (max 2 allowed)
19
21
  * @param {string} initials (Optional) Custom initials (max 2 characters)
20
- * @returns {string} True if the color is dark, false otherwise.
21
22
  */
22
-
23
- export var MAX_INITIALS = 2;
24
23
  export function toInitials(name, initialsLength, initials) {
24
+ // If `initials` provided, check if it's a single emoji
25
+ // in order to support complex, "multi-character" ones
26
+ if (initials && typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
27
+ var segmenter = new Intl.Segmenter('en', {
28
+ granularity: 'grapheme'
29
+ });
30
+ var segments = Array.from(segmenter.segment(initials));
31
+ if (segments.length === 1 && isEmoji(segments[0].segment)) {
32
+ return segments[0].segment;
33
+ }
34
+ }
35
+
25
36
  // Calculate the number of initials to show, maxing out at MAX_INITIALS
26
37
  var calculatedInitialsLength = initials ? initials.split('').length : name.split(' ').length;
27
38
  calculatedInitialsLength = calculatedInitialsLength > MAX_INITIALS ? MAX_INITIALS : calculatedInitialsLength;
@@ -44,5 +55,16 @@ export function toInitials(name, initialsLength, initials) {
44
55
  calculatedInitials = name.substring(0, calculatedInitialsLength);
45
56
  }
46
57
  }
47
- return calculatedInitials;
58
+ return calculatedInitials || '';
59
+ }
60
+ function isEmoji(str) {
61
+ /**
62
+ * The \p escape sequence allows matching a character based on its Unicode properties
63
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape
64
+ * @see https://www.unicode.org/Public/UCD/latest/ucd/emoji/emoji-data.txt
65
+ * @see https://www.unicode.org/reports/tr51/#Definitions
66
+ * @see https://util.unicode.org/UnicodeJsps/character.jsp?a=1F440&B1=Show
67
+ */
68
+ var emojiRegex = /(?:[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u2388\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2605\u2607-\u2612\u2614-\u2685\u2690-\u2705\u2708-\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2767\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC00-\uDCFF\uDD0D-\uDD0F\uDD2F\uDD6C-\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDDAD-\uDDFF\uDE01-\uDE0F\uDE1A\uDE2F\uDE32-\uDE3A\uDE3C-\uDE3F\uDE49-\uDFFF]|\uD83D[\uDC00-\uDD3D\uDD46-\uDE4F\uDE80-\uDEFF\uDF74-\uDF7F\uDFD5-\uDFFF]|\uD83E[\uDC0C-\uDC0F\uDC48-\uDC4F\uDC5A-\uDC5F\uDC88-\uDC8F\uDCAE-\uDCFF\uDD0C-\uDD3A\uDD3C-\uDD45\uDD47-\uDEFF]|\uD83F[\uDC00-\uDFFD])/;
69
+ return emojiRegex.test(str);
48
70
  }
@@ -26,7 +26,7 @@ var _component_defaults = require("../provider/component_defaults");
26
26
  var _react2 = require("@emotion/react");
27
27
  var _excluded = ["schema"],
28
28
  _excluded2 = ["onChange"],
29
- _excluded3 = ["columns", "loading", "message", "noItemsMessage", "error", "selection", "compressed", "pagination", "sorting", "itemIdToExpandedRowMap", "itemId", "rowProps", "cellProps", "tableLayout", "items", "search", "searchFormat", "onTableChange", "executeQueryOptions", "allowNeutralSort", "childrenBetween"];
29
+ _excluded3 = ["columns", "loading", "noItemsMessage", "error", "selection", "compressed", "pagination", "sorting", "itemIdToExpandedRowMap", "itemId", "rowProps", "cellProps", "tableLayout", "items", "search", "searchFormat", "onTableChange", "executeQueryOptions", "allowNeutralSort", "childrenBetween"];
30
30
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
31
31
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
32
32
  function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -38,21 +38,31 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
38
38
  * 2.0 and the Server Side Public License, v 1; you may not use this file except
39
39
  * in compliance with, at your election, the Elastic License 2.0 or the Server
40
40
  * Side Public License, v 1.
41
- */
41
+ */ // allows `query: null` in the onChange callback when using `searchFormat="text"`
42
42
  function isEuiSearchBarProps(x) {
43
43
  return typeof x !== 'boolean';
44
44
  }
45
- var getQueryFromSearch = function getQueryFromSearch(search, defaultQuery) {
46
- var query;
45
+ /**
46
+ * Extracts and formats a query from search props based on the search format
47
+ * @param search - The search configuration
48
+ * @param defaultQuery - Whether to use the defaultQuery property as fallback
49
+ * @param searchFormat - The search format: 'eql' for parsed queries, 'text' for plain text
50
+ * @returns Formatted query string or Query object
51
+ */
52
+ var getQueryFromSearch = function getQueryFromSearch(search, defaultQuery, searchFormat) {
53
+ var _ref, _searchProps$defaultQ, _searchProps$query;
47
54
  if (!search) {
48
- query = '';
49
- } else {
50
- query = (defaultQuery ? search.defaultQuery || search.query || '' : search.query) || '';
55
+ return searchFormat === 'text' ? '""' : '';
51
56
  }
52
- return (0, _predicate.isString)(query) ? _search_bar.EuiSearchBar.Query.parse(query) : query;
57
+ var searchProps = search;
58
+ var queryString = defaultQuery ? (_ref = (_searchProps$defaultQ = searchProps.defaultQuery) !== null && _searchProps$defaultQ !== void 0 ? _searchProps$defaultQ : searchProps.query) !== null && _ref !== void 0 ? _ref : '' : (_searchProps$query = searchProps.query) !== null && _searchProps$query !== void 0 ? _searchProps$query : '';
59
+ if (searchFormat === 'text') {
60
+ return "\"".concat(queryString, "\"");
61
+ }
62
+ return (0, _predicate.isString)(queryString) ? _search_bar.EuiSearchBar.Query.parse(queryString) : queryString;
53
63
  };
54
64
  var getInitialPagination = function getInitialPagination(pagination, consumerDefaults) {
55
- var _ref2, _pagination$pageIndex, _ref3, _pagination$pageSize;
65
+ var _ref3, _pagination$pageIndex, _ref4, _pagination$pageSize;
56
66
  if (!pagination) {
57
67
  return {
58
68
  pageIndex: undefined,
@@ -60,14 +70,14 @@ var getInitialPagination = function getInitialPagination(pagination, consumerDef
60
70
  };
61
71
  }
62
72
  var defaults = _objectSpread(_objectSpread({}, _table_pagination.euiTablePaginationDefaults), consumerDefaults);
63
- var _ref = pagination,
64
- _ref$pageSizeOptions = _ref.pageSizeOptions,
65
- pageSizeOptions = _ref$pageSizeOptions === void 0 ? defaults.itemsPerPageOptions : _ref$pageSizeOptions,
66
- _ref$showPerPageOptio = _ref.showPerPageOptions,
67
- showPerPageOptions = _ref$showPerPageOptio === void 0 ? defaults.showPerPageOptions : _ref$showPerPageOptio;
73
+ var _ref2 = pagination,
74
+ _ref2$pageSizeOptions = _ref2.pageSizeOptions,
75
+ pageSizeOptions = _ref2$pageSizeOptions === void 0 ? defaults.itemsPerPageOptions : _ref2$pageSizeOptions,
76
+ _ref2$showPerPageOpti = _ref2.showPerPageOptions,
77
+ showPerPageOptions = _ref2$showPerPageOpti === void 0 ? defaults.showPerPageOptions : _ref2$showPerPageOpti;
68
78
  var defaultPageSize = pageSizeOptions !== null && pageSizeOptions !== void 0 && pageSizeOptions.includes(defaults.itemsPerPage) ? defaults.itemsPerPage : pageSizeOptions[0];
69
- var initialPageIndex = pagination === true ? 0 : (_ref2 = (_pagination$pageIndex = pagination.pageIndex) !== null && _pagination$pageIndex !== void 0 ? _pagination$pageIndex : pagination.initialPageIndex) !== null && _ref2 !== void 0 ? _ref2 : 0;
70
- var initialPageSize = pagination === true ? defaultPageSize : (_ref3 = (_pagination$pageSize = pagination.pageSize) !== null && _pagination$pageSize !== void 0 ? _pagination$pageSize : pagination.initialPageSize) !== null && _ref3 !== void 0 ? _ref3 : defaultPageSize;
79
+ var initialPageIndex = pagination === true ? 0 : (_ref3 = (_pagination$pageIndex = pagination.pageIndex) !== null && _pagination$pageIndex !== void 0 ? _pagination$pageIndex : pagination.initialPageIndex) !== null && _ref3 !== void 0 ? _ref3 : 0;
80
+ var initialPageSize = pagination === true ? defaultPageSize : (_ref4 = (_pagination$pageSize = pagination.pageSize) !== null && _pagination$pageSize !== void 0 ? _pagination$pageSize : pagination.initialPageSize) !== null && _ref4 !== void 0 ? _ref4 : defaultPageSize;
71
81
  if (showPerPageOptions && initialPageSize != null && !(pageSizeOptions !== null && pageSizeOptions !== void 0 && pageSizeOptions.includes(initialPageSize))) {
72
82
  throw new Error("EuiInMemoryTable received initialPageSize ".concat(initialPageSize, ", which wasn't provided within pageSizeOptions."));
73
83
  }
@@ -120,15 +130,16 @@ function getInitialSorting(columns, sorting) {
120
130
  }
121
131
  var EuiInMemoryTable = exports.EuiInMemoryTable = /*#__PURE__*/function (_Component) {
122
132
  function EuiInMemoryTable(props, context) {
133
+ var _props$searchFormat;
123
134
  var _this;
124
135
  (0, _classCallCheck2.default)(this, EuiInMemoryTable);
125
136
  _this = _callSuper(this, EuiInMemoryTable, [props]);
126
- (0, _defineProperty2.default)(_this, "onTableChange", function (_ref4) {
127
- var page = _ref4.page,
128
- sort = _ref4.sort;
129
- var _ref5 = page || {},
130
- pageIndex = _ref5.index,
131
- pageSize = _ref5.size;
137
+ (0, _defineProperty2.default)(_this, "onTableChange", function (_ref5) {
138
+ var page = _ref5.page,
139
+ sort = _ref5.sort;
140
+ var _ref6 = page || {},
141
+ pageIndex = _ref6.index,
142
+ pageSize = _ref6.size;
132
143
 
133
144
  // don't apply pagination changes that are otherwise controlled
134
145
  // `page` is left unchanged as it goes to the consumer's `onTableChange` callback, allowing the app to respond
@@ -137,9 +148,9 @@ var EuiInMemoryTable = exports.EuiInMemoryTable = /*#__PURE__*/function (_Compon
137
148
  if (pagination.pageSize != null) pageSize = pagination.pageSize;
138
149
  if (pagination.pageIndex != null) pageIndex = pagination.pageIndex;
139
150
  }
140
- var _ref6 = sort || {},
141
- sortName = _ref6.field,
142
- sortDirection = _ref6.direction;
151
+ var _ref7 = sort || {},
152
+ sortName = _ref7.field,
153
+ sortDirection = _ref7.direction;
143
154
 
144
155
  // To keep backwards compatibility reportedSortName needs to be tracked separately
145
156
  // from sortName; sortName gets stored internally while reportedSortName is sent to the callback
@@ -182,10 +193,10 @@ var EuiInMemoryTable = exports.EuiInMemoryTable = /*#__PURE__*/function (_Compon
182
193
  sortDirection: sortDirection
183
194
  });
184
195
  });
185
- (0, _defineProperty2.default)(_this, "onQueryChange", function (_ref7) {
186
- var query = _ref7.query,
187
- queryText = _ref7.queryText,
188
- error = _ref7.error;
196
+ (0, _defineProperty2.default)(_this, "onQueryChange", function (_ref8) {
197
+ var query = _ref8.query,
198
+ queryText = _ref8.queryText,
199
+ error = _ref8.error;
189
200
  var search = _this.props.search;
190
201
  if (isEuiSearchBarProps(search)) {
191
202
  if (search.onChange) {
@@ -219,12 +230,11 @@ var EuiInMemoryTable = exports.EuiInMemoryTable = /*#__PURE__*/function (_Compon
219
230
  // search bar to ignore EQL syntax and only use the searchbar for plain text
220
231
  (0, _defineProperty2.default)(_this, "onPlainTextSearch", function (searchValue) {
221
232
  var escapedQueryText = searchValue.replace(/["\\]/g, '\\$&');
222
- var finalQuery = "\"".concat(escapedQueryText, "\"");
223
233
  var search = _this.props.search;
224
234
  if (isEuiSearchBarProps(search)) {
225
235
  if (search.onChange) {
226
236
  var shouldQueryInMemory = search.onChange({
227
- query: _search_bar.EuiSearchBar.Query.parse(finalQuery),
237
+ query: null,
228
238
  queryText: escapedQueryText,
229
239
  error: null
230
240
  });
@@ -234,7 +244,7 @@ var EuiInMemoryTable = exports.EuiInMemoryTable = /*#__PURE__*/function (_Compon
234
244
  }
235
245
  }
236
246
  _this.setState({
237
- query: _search_bar.EuiSearchBar.Query.parse(finalQuery)
247
+ query: "\"".concat(escapedQueryText, "\"")
238
248
  });
239
249
  });
240
250
  var columns = props.columns,
@@ -258,7 +268,7 @@ var EuiInMemoryTable = exports.EuiInMemoryTable = /*#__PURE__*/function (_Compon
258
268
  search: _search
259
269
  },
260
270
  search: _search,
261
- query: getQueryFromSearch(_search, true),
271
+ query: getQueryFromSearch(_search, true, (_props$searchFormat = props.searchFormat) !== null && _props$searchFormat !== void 0 ? _props$searchFormat : 'eql'),
262
272
  pageIndex: _pageIndex || 0,
263
273
  pageSize: _pageSize,
264
274
  pageSizeOptions: pageSizeOptions,
@@ -279,13 +289,28 @@ var EuiInMemoryTable = exports.EuiInMemoryTable = /*#__PURE__*/function (_Compon
279
289
  if (!search) return;
280
290
  var searchBar;
281
291
  if (searchFormat === 'text') {
282
- var _searchBoxProps = (search === null || search === void 0 ? void 0 : search.box) || {}; // Work around | boolean type
283
- var schema = _searchBoxProps.schema,
284
- searchBoxProps = (0, _objectWithoutProperties2.default)(_searchBoxProps, _excluded); // Destructure `schema` so it doesn't get rendered to DOM
292
+ var _ref9 = search,
293
+ _ref9$box = _ref9.box,
294
+ box = _ref9$box === void 0 ? {} : _ref9$box,
295
+ query = _ref9.query,
296
+ defaultQuery = _ref9.defaultQuery;
297
+ var schema = box.schema,
298
+ searchBoxProps = (0, _objectWithoutProperties2.default)(box, _excluded);
299
+
300
+ // in the unexpected case a Query object is passed with searchFormat=text
301
+ if (process.env.NODE_ENV === 'development') {
302
+ if (query != null && !(0, _predicate.isString)(query)) {
303
+ console.warn('EuiInMemoryTable: `query` should be a string when using searchFormat="text". Query objects are only supported with searchFormat="eql".');
304
+ }
305
+ if (defaultQuery != null && !(0, _predicate.isString)(defaultQuery)) {
306
+ console.warn('EuiInMemoryTable: `defaultQuery` should be a string when using searchFormat="text". Query objects are only supported with searchFormat="eql".');
307
+ }
308
+ }
285
309
 
286
- searchBar = (0, _react2.jsx)(_search_box.EuiSearchBox, (0, _extends2.default)({
287
- query: "" // Unused, passed to satisfy Typescript
288
- }, searchBoxProps, {
310
+ // use only string values, ignore Query objects
311
+ var displayQuery = (0, _predicate.isString)(query) ? query : (0, _predicate.isString)(defaultQuery) ? defaultQuery : '';
312
+ searchBar = (0, _react2.jsx)(_search_box.EuiSearchBox, (0, _extends2.default)({}, searchBoxProps, {
313
+ query: displayQuery,
289
314
  onSearch: this.onPlainTextSearch
290
315
  }));
291
316
  } else {
@@ -313,9 +338,9 @@ var EuiInMemoryTable = exports.EuiInMemoryTable = /*#__PURE__*/function (_Compon
313
338
  value: function resolveSearchSchema() {
314
339
  var columns = this.props.columns;
315
340
  return columns.reduce(function (schema, column) {
316
- var _ref8 = column,
317
- field = _ref8.field,
318
- dataType = _ref8.dataType;
341
+ var _ref10 = column,
342
+ field = _ref10.field,
343
+ dataType = _ref10.dataType;
319
344
  if (field) {
320
345
  var type = dataType || 'string';
321
346
  schema.fields[field] = {
@@ -335,8 +360,8 @@ var EuiInMemoryTable = exports.EuiInMemoryTable = /*#__PURE__*/function (_Compon
335
360
  sortName = _this$state.sortName,
336
361
  sortDirection = _this$state.sortDirection;
337
362
  var columns = this.props.columns;
338
- var sortColumn = columns.find(function (_ref9) {
339
- var name = _ref9.name;
363
+ var sortColumn = columns.find(function (_ref11) {
364
+ var name = _ref11.name;
340
365
  return name === sortName;
341
366
  });
342
367
  if (sortColumn == null) {
@@ -386,7 +411,6 @@ var EuiInMemoryTable = exports.EuiInMemoryTable = /*#__PURE__*/function (_Compon
386
411
  var _this$props2 = this.props,
387
412
  columns = _this$props2.columns,
388
413
  loading = _this$props2.loading,
389
- message = _this$props2.message,
390
414
  noItemsMessage = _this$props2.noItemsMessage,
391
415
  error = _this$props2.error,
392
416
  selection = _this$props2.selection,
@@ -449,7 +473,7 @@ var EuiInMemoryTable = exports.EuiInMemoryTable = /*#__PURE__*/function (_Compon
449
473
  onChange: this.onTableChange,
450
474
  error: error,
451
475
  loading: loading,
452
- noItemsMessage: noItemsMessage || message,
476
+ noItemsMessage: noItemsMessage,
453
477
  tableLayout: tableLayout,
454
478
  compressed: compressed,
455
479
  itemIdToExpandedRowMap: itemIdToExpandedRowMap
@@ -507,11 +531,12 @@ var EuiInMemoryTable = exports.EuiInMemoryTable = /*#__PURE__*/function (_Compon
507
531
  var nextQuery = nextProps.search ? nextProps.search.query : '';
508
532
  var prevQuery = prevState.prevProps.search ? prevState.prevProps.search.query : '';
509
533
  if (nextQuery !== prevQuery) {
534
+ var _nextProps$searchForm;
510
535
  updatedPrevState = _objectSpread(_objectSpread({}, updatedPrevState), {}, {
511
536
  prevProps: _objectSpread(_objectSpread({}, updatedPrevState.prevProps), {}, {
512
537
  search: nextProps.search
513
538
  }),
514
- query: getQueryFromSearch(nextProps.search, false)
539
+ query: getQueryFromSearch(nextProps.search, false, (_nextProps$searchForm = nextProps.searchFormat) !== null && _nextProps$searchForm !== void 0 ? _nextProps$searchForm : 'eql')
515
540
  });
516
541
  }
517
542
  if (updatedPrevState !== prevState) {
@@ -66,6 +66,7 @@ var EuiAbsoluteTab = exports.EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
66
66
  setHasUnparsedText(false);
67
67
  setIsTextInvalid(false);
68
68
  }, [dateFormat]);
69
+ var textInputLabelId = (0, _services.useGeneratedHtmlId)();
69
70
  var timeZomeDescriptionId = (0, _services.useGeneratedHtmlId)();
70
71
  var submitButtonLabel = (0, _i18n.useEuiI18n)('euiAbsoluteTab.dateFormatButtonLabel', 'Parse date');
71
72
  var dateFormatError = (0, _i18n.useEuiI18n)('euiAbsoluteTab.dateFormatError', 'Allowed formats: {dateFormat}, ISO 8601, RFC 2822, or Unix timestamp.', {
@@ -166,6 +167,7 @@ var EuiAbsoluteTab = exports.EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
166
167
  helpText: hasUnparsedText && !isTextInvalid ? dateFormatError : undefined,
167
168
  describedByIds: [timeZomeDescriptionId]
168
169
  }, (0, _react2.jsx)(_form.EuiFieldText, {
170
+ "aria-labelledby": textInputLabelId,
169
171
  compressed: true,
170
172
  isInvalid: isTextInvalid,
171
173
  value: textInputValue,
@@ -178,7 +180,9 @@ var EuiAbsoluteTab = exports.EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
178
180
  setIsReadyToParse(true);
179
181
  },
180
182
  "data-test-subj": "superDatePickerAbsoluteDateInput",
181
- prepend: (0, _react2.jsx)(_form.EuiFormLabel, null, labelPrefix)
183
+ prepend: (0, _react2.jsx)(_form.EuiFormLabel, {
184
+ id: textInputLabelId
185
+ }, labelPrefix)
182
186
  })), hasUnparsedText && (0, _react2.jsx)(_button.EuiButtonIcon, {
183
187
  type: "submit",
184
188
  css: styles.euiAbsoluteTabDateForm__submit,
@@ -90,6 +90,7 @@ var EuiRelativeTab = exports.EuiRelativeTab = function EuiRelativeTab(_ref) {
90
90
  if (!parsedValue || !parsedValue.isValid()) return '';
91
91
  return parsedValue.locale(locale || 'en').format(dateFormat);
92
92
  }, [isInvalid, value, roundUp, locale, dateFormat]);
93
+ var textInputLabelId = (0, _services.useGeneratedHtmlId)();
93
94
  var relativeDateInputNumberDescriptionId = (0, _services.useGeneratedHtmlId)();
94
95
  var timeZomeDescriptionId = (0, _services.useGeneratedHtmlId)();
95
96
  var numberAriaLabel = (0, _i18n.useEuiI18n)('euiRelativeTab.numberInputLabel', 'Time span amount');
@@ -122,11 +123,14 @@ var EuiRelativeTab = exports.EuiRelativeTab = function EuiRelativeTab(_ref) {
122
123
  }))), (0, _react2.jsx)(_spacer.EuiSpacer, {
123
124
  size: "s"
124
125
  }), (0, _react2.jsx)(_form.EuiFieldText, {
126
+ "aria-labelledby": textInputLabelId,
125
127
  compressed: true,
126
128
  value: formattedValue,
127
129
  readOnly: true,
128
130
  "aria-describedby": timeZomeDescriptionId,
129
- prepend: (0, _react2.jsx)(_form.EuiFormLabel, null, labelPrefix)
131
+ prepend: (0, _react2.jsx)(_form.EuiFormLabel, {
132
+ id: textInputLabelId
133
+ }, labelPrefix)
130
134
  }), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
131
135
  id: relativeDateInputNumberDescriptionId
132
136
  }, (0, _react2.jsx)(_i18n.EuiI18n, {