@elastic/eui 77.1.0 → 77.2.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 (138) hide show
  1. package/README.md +30 -29
  2. package/dist/eui_theme_dark.css +70 -158
  3. package/dist/eui_theme_dark.min.css +1 -1
  4. package/dist/eui_theme_light.css +70 -158
  5. package/dist/eui_theme_light.min.css +1 -1
  6. package/es/components/basic_table/basic_table.a11y.js +202 -0
  7. package/es/components/basic_table/{table.a11y.js → in_memory_table.a11y.js} +1 -1
  8. package/es/components/date_picker/date_picker.js +23 -15
  9. package/es/components/date_picker/date_picker_range.js +36 -42
  10. package/es/components/date_picker/super_date_picker/super_date_picker.js +99 -84
  11. package/es/components/form/field_number/field_number.js +39 -8
  12. package/es/components/form/field_text/field_text.js +1 -1
  13. package/es/components/form/form_control_layout/form_control_layout.js +67 -30
  14. package/es/components/form/form_control_layout/form_control_layout_delimited.js +31 -11
  15. package/es/components/form/form_control_layout/form_control_layout_icons.js +12 -20
  16. package/es/components/form/range/dual_range.js +2 -4
  17. package/es/components/form/range/range.js +0 -2
  18. package/es/components/form/range/range_input.js +54 -13
  19. package/es/components/form/validatable_control/validatable_control.js +15 -5
  20. package/es/components/index.js +0 -1
  21. package/es/components/search_bar/query/ast_to_es_query_dsl.js +6 -1
  22. package/es/components/search_bar/query/ast_to_es_query_string.js +3 -0
  23. package/es/components/suggest/suggest.a11y.js +70 -0
  24. package/es/components/table/table.a11y.js +75 -0
  25. package/eui.d.ts +55 -173
  26. package/i18ntokens.json +26 -44
  27. package/lib/components/basic_table/basic_table.a11y.js +194 -0
  28. package/lib/components/basic_table/{table.a11y.js → in_memory_table.a11y.js} +2 -2
  29. package/lib/components/date_picker/date_picker.js +23 -15
  30. package/lib/components/date_picker/date_picker_range.js +35 -41
  31. package/lib/components/date_picker/super_date_picker/super_date_picker.js +99 -84
  32. package/lib/components/form/field_number/field_number.js +42 -8
  33. package/lib/components/form/field_text/field_text.js +1 -1
  34. package/lib/components/form/form_control_layout/form_control_layout.js +67 -35
  35. package/lib/components/form/form_control_layout/form_control_layout_delimited.js +31 -11
  36. package/lib/components/form/form_control_layout/form_control_layout_icons.js +11 -19
  37. package/lib/components/form/range/dual_range.js +2 -4
  38. package/lib/components/form/range/range.js +0 -2
  39. package/lib/components/form/range/range_input.js +52 -11
  40. package/lib/components/form/validatable_control/validatable_control.js +14 -12
  41. package/lib/components/index.js +0 -11
  42. package/lib/components/search_bar/query/ast_to_es_query_dsl.js +6 -1
  43. package/lib/components/search_bar/query/ast_to_es_query_string.js +3 -0
  44. package/lib/components/suggest/suggest.a11y.js +73 -0
  45. package/lib/components/table/table.a11y.js +78 -0
  46. package/optimize/es/components/basic_table/basic_table.a11y.js +194 -0
  47. package/optimize/es/components/basic_table/{table.a11y.js → in_memory_table.a11y.js} +1 -1
  48. package/optimize/es/components/date_picker/date_picker.js +17 -14
  49. package/optimize/es/components/date_picker/date_picker_range.js +20 -14
  50. package/optimize/es/components/date_picker/super_date_picker/super_date_picker.js +99 -84
  51. package/optimize/es/components/form/field_number/field_number.js +34 -8
  52. package/optimize/es/components/form/field_text/field_text.js +1 -1
  53. package/optimize/es/components/form/form_control_layout/form_control_layout.js +67 -30
  54. package/optimize/es/components/form/form_control_layout/form_control_layout_delimited.js +31 -11
  55. package/optimize/es/components/form/form_control_layout/form_control_layout_icons.js +10 -20
  56. package/optimize/es/components/form/range/dual_range.js +2 -4
  57. package/optimize/es/components/form/range/range.js +0 -2
  58. package/optimize/es/components/form/range/range_input.js +49 -12
  59. package/optimize/es/components/form/validatable_control/validatable_control.js +10 -5
  60. package/optimize/es/components/index.js +0 -1
  61. package/optimize/es/components/search_bar/query/ast_to_es_query_dsl.js +6 -1
  62. package/optimize/es/components/search_bar/query/ast_to_es_query_string.js +3 -0
  63. package/optimize/es/components/suggest/suggest.a11y.js +70 -0
  64. package/optimize/es/components/table/table.a11y.js +75 -0
  65. package/optimize/lib/components/basic_table/basic_table.a11y.js +188 -0
  66. package/{test-env/components/basic_table/table.a11y.js → optimize/lib/components/basic_table/in_memory_table.a11y.js} +2 -2
  67. package/optimize/lib/components/date_picker/date_picker.js +17 -14
  68. package/optimize/lib/components/date_picker/date_picker_range.js +19 -13
  69. package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.js +99 -84
  70. package/optimize/lib/components/form/field_number/field_number.js +37 -8
  71. package/optimize/lib/components/form/field_text/field_text.js +1 -1
  72. package/optimize/lib/components/form/form_control_layout/form_control_layout.js +67 -35
  73. package/optimize/lib/components/form/form_control_layout/form_control_layout_delimited.js +31 -11
  74. package/optimize/lib/components/form/form_control_layout/form_control_layout_icons.js +9 -19
  75. package/optimize/lib/components/form/range/dual_range.js +2 -4
  76. package/optimize/lib/components/form/range/range.js +0 -2
  77. package/optimize/lib/components/form/range/range_input.js +47 -10
  78. package/optimize/lib/components/form/validatable_control/validatable_control.js +10 -4
  79. package/optimize/lib/components/index.js +0 -11
  80. package/optimize/lib/components/search_bar/query/ast_to_es_query_dsl.js +6 -1
  81. package/optimize/lib/components/search_bar/query/ast_to_es_query_string.js +3 -0
  82. package/optimize/lib/components/suggest/suggest.a11y.js +73 -0
  83. package/optimize/lib/components/table/table.a11y.js +78 -0
  84. package/package.json +1 -1
  85. package/src/components/date_picker/_date_picker_range.scss +0 -60
  86. package/src/components/date_picker/super_date_picker/_super_date_picker.scss +23 -11
  87. package/src/components/date_picker/super_date_picker/_variables.scss +3 -0
  88. package/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss +5 -7
  89. package/src/components/form/form_control_layout/_form_control_layout.scss +2 -2
  90. package/src/components/form/form_control_layout/_form_control_layout_delimited.scss +12 -36
  91. package/src/components/form/form_control_layout/_form_control_layout_icons.scss +27 -6
  92. package/src/themes/amsterdam/overrides/_date_picker.scss +0 -14
  93. package/src/themes/amsterdam/overrides/_index.scss +0 -1
  94. package/test-env/components/basic_table/basic_table.a11y.js +188 -0
  95. package/{optimize/lib/components/basic_table/table.a11y.js → test-env/components/basic_table/in_memory_table.a11y.js} +2 -2
  96. package/test-env/components/date_picker/date_picker.js +23 -15
  97. package/test-env/components/date_picker/date_picker_range.js +35 -41
  98. package/test-env/components/date_picker/super_date_picker/super_date_picker.js +99 -84
  99. package/test-env/components/form/field_number/field_number.js +37 -8
  100. package/test-env/components/form/field_text/field_text.js +1 -1
  101. package/test-env/components/form/form_control_layout/form_control_layout.js +68 -35
  102. package/test-env/components/form/form_control_layout/form_control_layout_delimited.js +31 -11
  103. package/test-env/components/form/form_control_layout/form_control_layout_icons.js +11 -19
  104. package/test-env/components/form/range/dual_range.js +2 -4
  105. package/test-env/components/form/range/range.js +0 -2
  106. package/test-env/components/form/range/range_input.js +47 -11
  107. package/test-env/components/form/validatable_control/validatable_control.js +9 -4
  108. package/test-env/components/index.js +0 -11
  109. package/test-env/components/search_bar/query/ast_to_es_query_dsl.js +6 -1
  110. package/test-env/components/search_bar/query/ast_to_es_query_string.js +3 -0
  111. package/test-env/components/suggest/suggest.a11y.js +73 -0
  112. package/test-env/components/table/table.a11y.js +78 -0
  113. package/es/components/inline_edit/index.js +0 -10
  114. package/es/components/inline_edit/inline_edit.styles.js +0 -15
  115. package/es/components/inline_edit/inline_edit_form.js +0 -190
  116. package/es/components/inline_edit/inline_edit_text.js +0 -97
  117. package/es/components/inline_edit/inline_edit_title.js +0 -105
  118. package/lib/components/inline_edit/index.js +0 -19
  119. package/lib/components/inline_edit/inline_edit.styles.js +0 -22
  120. package/lib/components/inline_edit/inline_edit_form.js +0 -193
  121. package/lib/components/inline_edit/inline_edit_text.js +0 -97
  122. package/lib/components/inline_edit/inline_edit_title.js +0 -106
  123. package/optimize/es/components/inline_edit/index.js +0 -10
  124. package/optimize/es/components/inline_edit/inline_edit.styles.js +0 -15
  125. package/optimize/es/components/inline_edit/inline_edit_form.js +0 -133
  126. package/optimize/es/components/inline_edit/inline_edit_text.js +0 -52
  127. package/optimize/es/components/inline_edit/inline_edit_title.js +0 -56
  128. package/optimize/lib/components/inline_edit/index.js +0 -19
  129. package/optimize/lib/components/inline_edit/inline_edit.styles.js +0 -22
  130. package/optimize/lib/components/inline_edit/inline_edit_form.js +0 -144
  131. package/optimize/lib/components/inline_edit/inline_edit_text.js +0 -52
  132. package/optimize/lib/components/inline_edit/inline_edit_title.js +0 -57
  133. package/src/themes/amsterdam/overrides/_date_popover_button.scss +0 -14
  134. package/test-env/components/inline_edit/index.js +0 -19
  135. package/test-env/components/inline_edit/inline_edit.styles.js +0 -22
  136. package/test-env/components/inline_edit/inline_edit_form.js +0 -196
  137. package/test-env/components/inline_edit/inline_edit_text.js +0 -96
  138. package/test-env/components/inline_edit/inline_edit_title.js +0 -105
@@ -0,0 +1,202 @@
1
+ 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); }
2
+ 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; }
3
+ 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; }
4
+ 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; }
5
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
6
+ 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); }
7
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
8
+ 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."); }
9
+ 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); }
10
+ 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; }
11
+ 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; } }
12
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
13
+ /*
14
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
15
+ * or more contributor license agreements. Licensed under the Elastic License
16
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
17
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
18
+ * Side Public License, v 1.
19
+ */
20
+
21
+ /// <reference types="cypress" />
22
+ /// <reference types="cypress-real-events" />
23
+ /// <reference types="../../../cypress/support" />
24
+
25
+ import React, { useState } from 'react';
26
+ import { EuiBasicTable } from './basic_table';
27
+ import { EuiButtonIcon } from '../button';
28
+ import { EuiHealth } from '../health';
29
+ import { EuiLink } from '../link';
30
+ import { EuiScreenReaderOnly } from '../accessibility';
31
+ import { formatDate } from '../../services';
32
+ import { faker } from '@faker-js/faker';
33
+ import { jsx as ___EmotionJSX } from "@emotion/react";
34
+ var users = [];
35
+ for (var i = 0; i < 20; i++) {
36
+ users.push({
37
+ id: i + 1,
38
+ firstName: faker.name.firstName(),
39
+ lastName: faker.name.lastName(),
40
+ github: faker.internet.userName(),
41
+ dateOfBirth: faker.date.past(),
42
+ online: faker.datatype.boolean(),
43
+ location: {
44
+ city: faker.address.city(),
45
+ country: faker.address.country()
46
+ }
47
+ });
48
+ }
49
+ var columns = [{
50
+ field: 'firstName',
51
+ name: 'First Name',
52
+ sortable: true,
53
+ truncateText: true,
54
+ mobileOptions: {
55
+ render: function render(user) {
56
+ return ___EmotionJSX("span", null, user.firstName, " ", user.lastName);
57
+ },
58
+ header: false,
59
+ truncateText: false,
60
+ enlarge: true,
61
+ width: '100%'
62
+ }
63
+ }, {
64
+ field: 'lastName',
65
+ name: 'Last Name',
66
+ truncateText: true,
67
+ mobileOptions: {
68
+ show: false
69
+ }
70
+ }, {
71
+ field: 'github',
72
+ name: 'Github',
73
+ render: function render(username) {
74
+ return ___EmotionJSX(EuiLink, {
75
+ href: "#",
76
+ target: "_blank"
77
+ }, username);
78
+ }
79
+ }, {
80
+ field: 'dateOfBirth',
81
+ name: 'Date of Birth',
82
+ dataType: 'date',
83
+ render: function render(dateOfBirth) {
84
+ return formatDate(dateOfBirth, 'dobLong');
85
+ },
86
+ sortable: true
87
+ }, {
88
+ field: 'location',
89
+ name: 'Location',
90
+ truncateText: true,
91
+ textOnly: true,
92
+ render: function render(location) {
93
+ return "".concat(location.city, ", ").concat(location.country);
94
+ }
95
+ }, {
96
+ field: 'online',
97
+ name: 'Online',
98
+ dataType: 'boolean',
99
+ render: function render(online) {
100
+ var color = online ? 'success' : 'danger';
101
+ var label = online ? 'Online' : 'Offline';
102
+ return ___EmotionJSX(EuiHealth, {
103
+ color: color
104
+ }, label);
105
+ },
106
+ sortable: true,
107
+ mobileOptions: {
108
+ show: false
109
+ }
110
+ }];
111
+ describe('EuiTable', function () {
112
+ var BasicTable = function BasicTable() {
113
+ return ___EmotionJSX(EuiBasicTable, {
114
+ tableCaption: "Demo of EuiBasicTable",
115
+ columns: columns,
116
+ items: users,
117
+ "data-test-subj": "cy-basic-table"
118
+ });
119
+ };
120
+ describe('Basic table', function () {
121
+ describe('Automated accessibility check', function () {
122
+ it('has zero violations on render', function () {
123
+ cy.viewport(1024, 768); // medium breakpoint
124
+ cy.realMount(___EmotionJSX(BasicTable, null));
125
+ cy.get('[data-test-subj="cy-basic-table"]').should('exist');
126
+ cy.checkAxe();
127
+ });
128
+ });
129
+ });
130
+ describe('Mobile basic table', function () {
131
+ describe('Automated accessibility check', function () {
132
+ it('has zero violations on render', function () {
133
+ cy.viewport(375, 667); // small breakpoint
134
+ cy.realMount(___EmotionJSX(BasicTable, null));
135
+ cy.get('[data-test-subj="cy-basic-table"]').should('exist');
136
+ cy.checkAxe();
137
+ });
138
+ });
139
+ });
140
+ describe('Expandable rows', function () {
141
+ var ExpandableRowTable = function ExpandableRowTable() {
142
+ var _useState = useState({}),
143
+ _useState2 = _slicedToArray(_useState, 2),
144
+ itemIdToExpandedRowMap = _useState2[0],
145
+ setItemIdToExpandedRowMap = _useState2[1];
146
+ var toggleDetails = function toggleDetails(user) {
147
+ var itemIdToExpandedRowMapValues = _objectSpread({}, itemIdToExpandedRowMap);
148
+ if (itemIdToExpandedRowMapValues[user.id]) {
149
+ delete itemIdToExpandedRowMapValues[user.id];
150
+ } else {
151
+ itemIdToExpandedRowMapValues[user.id] = ___EmotionJSX("div", null, ___EmotionJSX("p", null, "Location: ".concat(user.location.city)), ___EmotionJSX("p", null, "This person is online."));
152
+ }
153
+ setItemIdToExpandedRowMap(itemIdToExpandedRowMapValues);
154
+ };
155
+ var columnsWithExpandingRowToggle = [].concat(columns, [{
156
+ align: 'right',
157
+ width: '40px',
158
+ isExpander: true,
159
+ name: ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, "Expand rows")),
160
+ render: function render(user) {
161
+ var itemIdToExpandedRowMapValues = _objectSpread({}, itemIdToExpandedRowMap);
162
+ return ___EmotionJSX(EuiButtonIcon, {
163
+ id: user.id.toString(),
164
+ onClick: function onClick() {
165
+ return toggleDetails(user);
166
+ },
167
+ "aria-label": itemIdToExpandedRowMapValues[user.id] ? 'Collapse' : 'Expand',
168
+ iconType: itemIdToExpandedRowMapValues[user.id] ? 'arrowDown' : 'arrowRight'
169
+ });
170
+ }
171
+ }]);
172
+ return ___EmotionJSX(EuiBasicTable, {
173
+ tableCaption: "Demo of EuiBasicTable with expanding rows",
174
+ itemIdToExpandedRowMap: itemIdToExpandedRowMap,
175
+ isExpandable: true,
176
+ columns: columnsWithExpandingRowToggle,
177
+ items: users,
178
+ itemId: "id",
179
+ "data-test-subj": "cy-expandable-row-table"
180
+ });
181
+ };
182
+ beforeEach(function () {
183
+ cy.viewport(1024, 768); // medium breakpoint
184
+ cy.realMount(___EmotionJSX(ExpandableRowTable, null));
185
+ cy.get('[data-test-subj="cy-expandable-row-table"]').should('exist');
186
+ });
187
+ describe('Automated accessibility check', function () {
188
+ it('has zero violations on render', function () {
189
+ cy.checkAxe();
190
+ });
191
+ });
192
+ describe('Keyboard accessibility', function () {
193
+ it('has zero violations after expanding a row', function () {
194
+ cy.repeatRealPress('Tab');
195
+ cy.get('button#1').should('have.focus');
196
+ cy.realPress('Enter');
197
+ cy.get('tr.euiTableRow-isExpandedRow div.euiTableCellContent').should('exist');
198
+ cy.checkAxe();
199
+ });
200
+ });
201
+ });
202
+ });
@@ -12,7 +12,7 @@
12
12
 
13
13
  import React from 'react';
14
14
  import { faker } from '@faker-js/faker';
15
- import { EuiInMemoryTable } from './index';
15
+ import { EuiInMemoryTable } from '.';
16
16
  import { EuiHealth } from '../health';
17
17
  import { EuiLink } from '../link';
18
18
  import { formatDate } from '../../services';
@@ -1,4 +1,4 @@
1
- var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
1
+ var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "controlOnly", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
2
2
  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); }
3
3
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
4
4
  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."); }
@@ -61,6 +61,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
61
61
  adjustDateOnChange = _ref$adjustDateOnChan === void 0 ? true : _ref$adjustDateOnChan,
62
62
  calendarClassName = _ref.calendarClassName,
63
63
  className = _ref.className,
64
+ controlOnly = _ref.controlOnly,
64
65
  customInput = _ref.customInput,
65
66
  _ref$dateFormat = _ref.dateFormat,
66
67
  dateFormat = _ref$dateFormat === void 0 ? euiDatePickerDefaultDateFormat : _ref$dateFormat,
@@ -106,7 +107,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
106
107
  'euiDatePicker--shadow': shadow,
107
108
  'euiDatePicker--inline': inline
108
109
  });
109
- var numIconsClass = getFormControlClassNameForIconCount({
110
+ var numIconsClass = controlOnly ? false : getFormControlClassNameForIconCount({
110
111
  isInvalid: isInvalid,
111
112
  isLoading: isLoading
112
113
  });
@@ -147,17 +148,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
147
148
  controlEl: inputValidityRef
148
149
  });
149
150
  var inputRefs = useCombinedRefs([inputRef, setInputValidityRef]);
150
- return ___EmotionJSX("span", {
151
- className: classes
152
- }, ___EmotionJSX(EuiFormControlLayout, {
153
- icon: optionalIcon,
154
- fullWidth: fullWidth,
155
- clear: selected && onClear ? {
156
- onClick: onClear
157
- } : undefined,
158
- isLoading: isLoading,
159
- isInvalid: isInvalid
160
- }, ___EmotionJSX(EuiI18nConsumer, null, function (_ref2) {
151
+ var control = ___EmotionJSX(EuiI18nConsumer, null, function (_ref2) {
161
152
  var contextLocale = _ref2.locale;
162
153
  return ___EmotionJSX(ReactDatePicker, _extends({
163
154
  adjustDateOnChange: adjustDateOnChange,
@@ -193,7 +184,19 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
193
184
  accessibleMode: true,
194
185
  popperPlacement: popoverPlacement
195
186
  }, rest));
196
- })));
187
+ });
188
+ if (controlOnly) return control;
189
+ return ___EmotionJSX("span", {
190
+ className: classes
191
+ }, ___EmotionJSX(EuiFormControlLayout, {
192
+ icon: optionalIcon,
193
+ fullWidth: fullWidth,
194
+ clear: selected && onClear ? {
195
+ onClick: onClear
196
+ } : undefined,
197
+ isLoading: isLoading,
198
+ isInvalid: isInvalid
199
+ }, control));
197
200
  };
198
201
  EuiDatePicker.propTypes = {
199
202
  className: PropTypes.string,
@@ -254,5 +257,10 @@ EuiDatePicker.propTypes = {
254
257
  *
255
258
  * **Use [EuiPopover](/#/layout/popover) values**: 'upCenter', 'upLeft', 'upRight', downCenter', 'downLeft', 'downRight', 'leftCenter', 'leftUp', 'leftDown', 'rightCenter', 'rightUp', 'rightDown'.
256
259
  */
257
- popoverPlacement: PropTypes.any
260
+ popoverPlacement: PropTypes.any,
261
+ /**
262
+ * Completely removes form control layout wrapper and ignores
263
+ * iconType. Best used inside EuiFormControlLayoutDelimited.
264
+ */
265
+ controlOnly: PropTypes.bool
258
266
  };
@@ -1,4 +1,4 @@
1
- var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "fullWidth", "isCustom", "readOnly", "isInvalid", "disabled", "onFocus", "onBlur"];
1
+ var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "fullWidth", "isCustom", "readOnly", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
2
2
  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); }
3
3
  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; }
4
4
  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; }
@@ -10,10 +10,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
10
10
  * Side Public License, v 1.
11
11
  */
12
12
 
13
- import React, { Fragment, cloneElement } from 'react';
13
+ import React, { cloneElement } from 'react';
14
14
  import PropTypes from "prop-types";
15
15
  import classNames from 'classnames';
16
- import { EuiIcon } from '../icon';
16
+ import { EuiFormControlLayoutDelimited } from '../form';
17
17
  import { jsx as ___EmotionJSX } from "@emotion/react";
18
18
  export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
19
19
  var children = _ref.children,
@@ -29,6 +29,8 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
29
29
  disabled = _ref.disabled,
30
30
  _onFocus = _ref.onFocus,
31
31
  _onBlur = _ref.onBlur,
32
+ append = _ref.append,
33
+ prepend = _ref.prepend,
32
34
  rest = _objectWithoutProperties(_ref, _excluded);
33
35
  var classes = classNames('euiDatePickerRange', {
34
36
  'euiDatePickerRange--fullWidth': fullWidth,
@@ -40,8 +42,8 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
40
42
  var endControl = endDateControl;
41
43
  if (!isCustom) {
42
44
  startControl = /*#__PURE__*/cloneElement(startDateControl, {
43
- iconType: typeof iconType === 'boolean' ? undefined : iconType,
44
- showIcon: !!iconType,
45
+ controlOnly: true,
46
+ showIcon: false,
45
47
  fullWidth: fullWidth,
46
48
  readOnly: readOnly,
47
49
  disabled: disabled || startDateControl.props.disabled,
@@ -59,6 +61,7 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
59
61
  }
60
62
  });
61
63
  endControl = /*#__PURE__*/cloneElement(endDateControl, {
64
+ controlOnly: true,
62
65
  showIcon: false,
63
66
  fullWidth: fullWidth,
64
67
  readOnly: readOnly,
@@ -78,15 +81,18 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
78
81
  }
79
82
  });
80
83
  }
81
- var delimiter = ___EmotionJSX("span", {
82
- className: "euiDatePickerRange__delimeter"
83
- }, ___EmotionJSX(EuiIcon, {
84
- color: isInvalid ? 'danger' : 'subdued',
85
- type: "sortRight"
86
- }));
87
- return ___EmotionJSX("div", _extends({
88
- className: classes
89
- }, rest), children ? children : ___EmotionJSX(Fragment, null, startControl, delimiter, endControl));
84
+ return ___EmotionJSX(EuiFormControlLayoutDelimited, _extends({
85
+ icon: iconType === true ? 'calendar' : iconType || undefined,
86
+ className: classes,
87
+ startControl: startControl,
88
+ endControl: endControl,
89
+ fullWidth: fullWidth,
90
+ readOnly: readOnly,
91
+ isDisabled: disabled,
92
+ isInvalid: isInvalid,
93
+ append: append,
94
+ prepend: prepend
95
+ }, rest));
90
96
  };
91
97
  EuiDatePickerRange.propTypes = {
92
98
  className: PropTypes.string,
@@ -94,47 +100,35 @@ EuiDatePickerRange.propTypes = {
94
100
  "data-test-subj": PropTypes.string,
95
101
  css: PropTypes.any,
96
102
  /**
97
- * Including any children will replace all innards with the provided children
98
- */
103
+ * Including any children will replace all innards with the provided children
104
+ */
99
105
  children: PropTypes.node,
100
106
  /**
101
- * The end date `EuiDatePicker` element
102
- */
107
+ * The end date `EuiDatePicker` element
108
+ */
103
109
  endDateControl: PropTypes.element.isRequired,
104
110
  /**
105
- * The start date `EuiDatePicker` element
106
- */
111
+ * The start date `EuiDatePicker` element
112
+ */
107
113
  startDateControl: PropTypes.element.isRequired,
108
114
  /**
109
- * Pass either an icon type or set to `false` to remove icon entirely
110
- */
115
+ * Pass either an icon type or set to `false` to remove icon entirely
116
+ */
111
117
  iconType: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "error", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "pivot", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelionApp", "timeRefresh", "timeslider", "training", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "warning", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]).isRequired]),
112
118
  /**
113
- * Won't apply any additional props to start and end date components
114
- */
119
+ * Won't apply any additional props to start and end date components
120
+ */
115
121
  isCustom: PropTypes.bool,
116
122
  /**
117
- * Will color the range delimiter the `danger` color and pass through to each control
118
- */
119
- isInvalid: PropTypes.bool,
120
- /**
121
- * Passes through to each control
122
- */
123
+ * Passes through to each control
124
+ */
123
125
  disabled: PropTypes.bool,
124
126
  /**
125
- * Passes through to each control
126
- */
127
- readOnly: PropTypes.bool,
128
- /**
129
- * Passes through to each control
130
- */
131
- fullWidth: PropTypes.bool,
132
- /**
133
- * Triggered whenever the start or end controls are blurred
134
- */
127
+ * Triggered whenever the start or end controls are blurred
128
+ */
135
129
  onBlur: PropTypes.any,
136
130
  /**
137
- * Triggered whenever the start or end controls are focused
138
- */
131
+ * Triggered whenever the start or end controls are focused
132
+ */
139
133
  onFocus: PropTypes.any
140
134
  };