@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,188 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
6
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _basic_table = require("./basic_table");
9
+ var _button = require("../button");
10
+ var _health = require("../health");
11
+ var _link = require("../link");
12
+ var _accessibility = require("../accessibility");
13
+ var _services = require("../../services");
14
+ var _faker = require("@faker-js/faker");
15
+ var _react2 = require("@emotion/react");
16
+ 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); }
17
+ 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; }
18
+ 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; }
19
+ 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; }
20
+ var users = [];
21
+ for (var i = 0; i < 20; i++) {
22
+ users.push({
23
+ id: i + 1,
24
+ firstName: _faker.faker.name.firstName(),
25
+ lastName: _faker.faker.name.lastName(),
26
+ github: _faker.faker.internet.userName(),
27
+ dateOfBirth: _faker.faker.date.past(),
28
+ online: _faker.faker.datatype.boolean(),
29
+ location: {
30
+ city: _faker.faker.address.city(),
31
+ country: _faker.faker.address.country()
32
+ }
33
+ });
34
+ }
35
+ var columns = [{
36
+ field: 'firstName',
37
+ name: 'First Name',
38
+ sortable: true,
39
+ truncateText: true,
40
+ mobileOptions: {
41
+ render: function render(user) {
42
+ return (0, _react2.jsx)("span", null, user.firstName, " ", user.lastName);
43
+ },
44
+ header: false,
45
+ truncateText: false,
46
+ enlarge: true,
47
+ width: '100%'
48
+ }
49
+ }, {
50
+ field: 'lastName',
51
+ name: 'Last Name',
52
+ truncateText: true,
53
+ mobileOptions: {
54
+ show: false
55
+ }
56
+ }, {
57
+ field: 'github',
58
+ name: 'Github',
59
+ render: function render(username) {
60
+ return (0, _react2.jsx)(_link.EuiLink, {
61
+ href: "#",
62
+ target: "_blank"
63
+ }, username);
64
+ }
65
+ }, {
66
+ field: 'dateOfBirth',
67
+ name: 'Date of Birth',
68
+ dataType: 'date',
69
+ render: function render(dateOfBirth) {
70
+ return (0, _services.formatDate)(dateOfBirth, 'dobLong');
71
+ },
72
+ sortable: true
73
+ }, {
74
+ field: 'location',
75
+ name: 'Location',
76
+ truncateText: true,
77
+ textOnly: true,
78
+ render: function render(location) {
79
+ return "".concat(location.city, ", ").concat(location.country);
80
+ }
81
+ }, {
82
+ field: 'online',
83
+ name: 'Online',
84
+ dataType: 'boolean',
85
+ render: function render(online) {
86
+ var color = online ? 'success' : 'danger';
87
+ var label = online ? 'Online' : 'Offline';
88
+ return (0, _react2.jsx)(_health.EuiHealth, {
89
+ color: color
90
+ }, label);
91
+ },
92
+ sortable: true,
93
+ mobileOptions: {
94
+ show: false
95
+ }
96
+ }];
97
+ describe('EuiTable', function () {
98
+ var BasicTable = function BasicTable() {
99
+ return (0, _react2.jsx)(_basic_table.EuiBasicTable, {
100
+ tableCaption: "Demo of EuiBasicTable",
101
+ columns: columns,
102
+ items: users,
103
+ "data-test-subj": "cy-basic-table"
104
+ });
105
+ };
106
+ describe('Basic table', function () {
107
+ describe('Automated accessibility check', function () {
108
+ it('has zero violations on render', function () {
109
+ cy.viewport(1024, 768); // medium breakpoint
110
+ cy.realMount((0, _react2.jsx)(BasicTable, null));
111
+ cy.get('[data-test-subj="cy-basic-table"]').should('exist');
112
+ cy.checkAxe();
113
+ });
114
+ });
115
+ });
116
+ describe('Mobile basic table', function () {
117
+ describe('Automated accessibility check', function () {
118
+ it('has zero violations on render', function () {
119
+ cy.viewport(375, 667); // small breakpoint
120
+ cy.realMount((0, _react2.jsx)(BasicTable, null));
121
+ cy.get('[data-test-subj="cy-basic-table"]').should('exist');
122
+ cy.checkAxe();
123
+ });
124
+ });
125
+ });
126
+ describe('Expandable rows', function () {
127
+ var ExpandableRowTable = function ExpandableRowTable() {
128
+ var _useState = (0, _react.useState)({}),
129
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
130
+ itemIdToExpandedRowMap = _useState2[0],
131
+ setItemIdToExpandedRowMap = _useState2[1];
132
+ var toggleDetails = function toggleDetails(user) {
133
+ var itemIdToExpandedRowMapValues = _objectSpread({}, itemIdToExpandedRowMap);
134
+ if (itemIdToExpandedRowMapValues[user.id]) {
135
+ delete itemIdToExpandedRowMapValues[user.id];
136
+ } else {
137
+ itemIdToExpandedRowMapValues[user.id] = (0, _react2.jsx)("div", null, (0, _react2.jsx)("p", null, "Location: ".concat(user.location.city)), (0, _react2.jsx)("p", null, "This person is online."));
138
+ }
139
+ setItemIdToExpandedRowMap(itemIdToExpandedRowMapValues);
140
+ };
141
+ var columnsWithExpandingRowToggle = [].concat(columns, [{
142
+ align: 'right',
143
+ width: '40px',
144
+ isExpander: true,
145
+ name: (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, "Expand rows")),
146
+ render: function render(user) {
147
+ var itemIdToExpandedRowMapValues = _objectSpread({}, itemIdToExpandedRowMap);
148
+ return (0, _react2.jsx)(_button.EuiButtonIcon, {
149
+ id: user.id.toString(),
150
+ onClick: function onClick() {
151
+ return toggleDetails(user);
152
+ },
153
+ "aria-label": itemIdToExpandedRowMapValues[user.id] ? 'Collapse' : 'Expand',
154
+ iconType: itemIdToExpandedRowMapValues[user.id] ? 'arrowDown' : 'arrowRight'
155
+ });
156
+ }
157
+ }]);
158
+ return (0, _react2.jsx)(_basic_table.EuiBasicTable, {
159
+ tableCaption: "Demo of EuiBasicTable with expanding rows",
160
+ itemIdToExpandedRowMap: itemIdToExpandedRowMap,
161
+ isExpandable: true,
162
+ columns: columnsWithExpandingRowToggle,
163
+ items: users,
164
+ itemId: "id",
165
+ "data-test-subj": "cy-expandable-row-table"
166
+ });
167
+ };
168
+ beforeEach(function () {
169
+ cy.viewport(1024, 768); // medium breakpoint
170
+ cy.realMount((0, _react2.jsx)(ExpandableRowTable, null));
171
+ cy.get('[data-test-subj="cy-expandable-row-table"]').should('exist');
172
+ });
173
+ describe('Automated accessibility check', function () {
174
+ it('has zero violations on render', function () {
175
+ cy.checkAxe();
176
+ });
177
+ });
178
+ describe('Keyboard accessibility', function () {
179
+ it('has zero violations after expanding a row', function () {
180
+ cy.repeatRealPress('Tab');
181
+ cy.get('button#1').should('have.focus');
182
+ cy.realPress('Enter');
183
+ cy.get('tr.euiTableRow-isExpandedRow div.euiTableCellContent').should('exist');
184
+ cy.checkAxe();
185
+ });
186
+ });
187
+ });
188
+ });
@@ -3,7 +3,7 @@
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
  var _react = _interopRequireDefault(require("react"));
5
5
  var _faker = require("@faker-js/faker");
6
- var _index = require("./index");
6
+ var _ = require(".");
7
7
  var _health = require("../health");
8
8
  var _link = require("../link");
9
9
  var _services = require("../../services");
@@ -99,7 +99,7 @@ var columns = [{
99
99
  }];
100
100
  describe('EuiInMemoryTable', function () {
101
101
  var mountTable = function mountTable() {
102
- cy.realMount((0, _react2.jsx)(_index.EuiInMemoryTable, {
102
+ cy.realMount((0, _react2.jsx)(_.EuiInMemoryTable, {
103
103
  "data-test-subj": "cy-in-memory-table",
104
104
  tableCaption: "Demo of EuiInMemoryTable",
105
105
  items: users,
@@ -18,7 +18,7 @@ var _services = require("../../services");
18
18
  var _context = require("../context");
19
19
  var _reactDatepicker = require("./react-datepicker");
20
20
  var _react2 = require("@emotion/react");
21
- 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"];
21
+ 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"];
22
22
  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); }
23
23
  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; }
24
24
  var euiDatePickerDefaultDateFormat = 'MM/DD/YYYY';
@@ -57,6 +57,7 @@ var EuiDatePicker = function EuiDatePicker(_ref) {
57
57
  adjustDateOnChange = _ref$adjustDateOnChan === void 0 ? true : _ref$adjustDateOnChan,
58
58
  calendarClassName = _ref.calendarClassName,
59
59
  className = _ref.className,
60
+ controlOnly = _ref.controlOnly,
60
61
  customInput = _ref.customInput,
61
62
  _ref$dateFormat = _ref.dateFormat,
62
63
  dateFormat = _ref$dateFormat === void 0 ? euiDatePickerDefaultDateFormat : _ref$dateFormat,
@@ -102,7 +103,7 @@ var EuiDatePicker = function EuiDatePicker(_ref) {
102
103
  'euiDatePicker--shadow': shadow,
103
104
  'euiDatePicker--inline': inline
104
105
  });
105
- var numIconsClass = (0, _num_icons.getFormControlClassNameForIconCount)({
106
+ var numIconsClass = controlOnly ? false : (0, _num_icons.getFormControlClassNameForIconCount)({
106
107
  isInvalid: isInvalid,
107
108
  isLoading: isLoading
108
109
  });
@@ -143,17 +144,7 @@ var EuiDatePicker = function EuiDatePicker(_ref) {
143
144
  controlEl: inputValidityRef
144
145
  });
145
146
  var inputRefs = (0, _services.useCombinedRefs)([inputRef, setInputValidityRef]);
146
- return (0, _react2.jsx)("span", {
147
- className: classes
148
- }, (0, _react2.jsx)(_form.EuiFormControlLayout, {
149
- icon: optionalIcon,
150
- fullWidth: fullWidth,
151
- clear: selected && onClear ? {
152
- onClick: onClear
153
- } : undefined,
154
- isLoading: isLoading,
155
- isInvalid: isInvalid
156
- }, (0, _react2.jsx)(_context.EuiI18nConsumer, null, function (_ref2) {
147
+ var control = (0, _react2.jsx)(_context.EuiI18nConsumer, null, function (_ref2) {
157
148
  var contextLocale = _ref2.locale;
158
149
  return (0, _react2.jsx)(_reactDatepicker.ReactDatePicker, (0, _extends2.default)({
159
150
  adjustDateOnChange: adjustDateOnChange,
@@ -189,7 +180,19 @@ var EuiDatePicker = function EuiDatePicker(_ref) {
189
180
  accessibleMode: true,
190
181
  popperPlacement: popoverPlacement
191
182
  }, rest));
192
- })));
183
+ });
184
+ if (controlOnly) return control;
185
+ return (0, _react2.jsx)("span", {
186
+ className: classes
187
+ }, (0, _react2.jsx)(_form.EuiFormControlLayout, {
188
+ icon: optionalIcon,
189
+ fullWidth: fullWidth,
190
+ clear: selected && onClear ? {
191
+ onClick: onClear
192
+ } : undefined,
193
+ isLoading: isLoading,
194
+ isInvalid: isInvalid
195
+ }, control));
193
196
  };
194
197
  exports.EuiDatePicker = EuiDatePicker;
195
198
  EuiDatePicker.propTypes = {
@@ -251,5 +254,10 @@ EuiDatePicker.propTypes = {
251
254
  *
252
255
  * **Use [EuiPopover](/#/layout/popover) values**: 'upCenter', 'upLeft', 'upRight', downCenter', 'downLeft', 'downRight', 'leftCenter', 'leftUp', 'leftDown', 'rightCenter', 'rightUp', 'rightDown'.
253
256
  */
254
- popoverPlacement: _propTypes.default.any
257
+ popoverPlacement: _propTypes.default.any,
258
+ /**
259
+ * Completely removes form control layout wrapper and ignores
260
+ * iconType. Best used inside EuiFormControlLayoutDelimited.
261
+ */
262
+ controlOnly: _propTypes.default.bool
255
263
  };
@@ -11,9 +11,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
11
11
  var _react = _interopRequireWildcard(require("react"));
12
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
13
  var _classnames = _interopRequireDefault(require("classnames"));
14
- var _icon = require("../icon");
14
+ var _form = require("../form");
15
15
  var _react2 = require("@emotion/react");
16
- var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "fullWidth", "isCustom", "readOnly", "isInvalid", "disabled", "onFocus", "onBlur"];
16
+ var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "fullWidth", "isCustom", "readOnly", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
17
17
  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); }
18
18
  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; }
19
19
  var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
@@ -30,6 +30,8 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
30
30
  disabled = _ref.disabled,
31
31
  _onFocus = _ref.onFocus,
32
32
  _onBlur = _ref.onBlur,
33
+ append = _ref.append,
34
+ prepend = _ref.prepend,
33
35
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
34
36
  var classes = (0, _classnames.default)('euiDatePickerRange', {
35
37
  'euiDatePickerRange--fullWidth': fullWidth,
@@ -41,8 +43,8 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
41
43
  var endControl = endDateControl;
42
44
  if (!isCustom) {
43
45
  startControl = /*#__PURE__*/(0, _react.cloneElement)(startDateControl, {
44
- iconType: typeof iconType === 'boolean' ? undefined : iconType,
45
- showIcon: !!iconType,
46
+ controlOnly: true,
47
+ showIcon: false,
46
48
  fullWidth: fullWidth,
47
49
  readOnly: readOnly,
48
50
  disabled: disabled || startDateControl.props.disabled,
@@ -60,6 +62,7 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
60
62
  }
61
63
  });
62
64
  endControl = /*#__PURE__*/(0, _react.cloneElement)(endDateControl, {
65
+ controlOnly: true,
63
66
  showIcon: false,
64
67
  fullWidth: fullWidth,
65
68
  readOnly: readOnly,
@@ -79,15 +82,18 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
79
82
  }
80
83
  });
81
84
  }
82
- var delimiter = (0, _react2.jsx)("span", {
83
- className: "euiDatePickerRange__delimeter"
84
- }, (0, _react2.jsx)(_icon.EuiIcon, {
85
- color: isInvalid ? 'danger' : 'subdued',
86
- type: "sortRight"
87
- }));
88
- return (0, _react2.jsx)("div", (0, _extends2.default)({
89
- className: classes
90
- }, rest), children ? children : (0, _react2.jsx)(_react.Fragment, null, startControl, delimiter, endControl));
85
+ return (0, _react2.jsx)(_form.EuiFormControlLayoutDelimited, (0, _extends2.default)({
86
+ icon: iconType === true ? 'calendar' : iconType || undefined,
87
+ className: classes,
88
+ startControl: startControl,
89
+ endControl: endControl,
90
+ fullWidth: fullWidth,
91
+ readOnly: readOnly,
92
+ isDisabled: disabled,
93
+ isInvalid: isInvalid,
94
+ append: append,
95
+ prepend: prepend
96
+ }, rest));
91
97
  };
92
98
  exports.EuiDatePickerRange = EuiDatePickerRange;
93
99
  EuiDatePickerRange.propTypes = {
@@ -96,47 +102,35 @@ EuiDatePickerRange.propTypes = {
96
102
  "data-test-subj": _propTypes.default.string,
97
103
  css: _propTypes.default.any,
98
104
  /**
99
- * Including any children will replace all innards with the provided children
100
- */
105
+ * Including any children will replace all innards with the provided children
106
+ */
101
107
  children: _propTypes.default.node,
102
108
  /**
103
- * The end date `EuiDatePicker` element
104
- */
109
+ * The end date `EuiDatePicker` element
110
+ */
105
111
  endDateControl: _propTypes.default.element.isRequired,
106
112
  /**
107
- * The start date `EuiDatePicker` element
108
- */
113
+ * The start date `EuiDatePicker` element
114
+ */
109
115
  startDateControl: _propTypes.default.element.isRequired,
110
116
  /**
111
- * Pass either an icon type or set to `false` to remove icon entirely
112
- */
117
+ * Pass either an icon type or set to `false` to remove icon entirely
118
+ */
113
119
  iconType: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.oneOfType([_propTypes.default.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.default.string.isRequired, _propTypes.default.elementType.isRequired]).isRequired]),
114
120
  /**
115
- * Won't apply any additional props to start and end date components
116
- */
121
+ * Won't apply any additional props to start and end date components
122
+ */
117
123
  isCustom: _propTypes.default.bool,
118
124
  /**
119
- * Will color the range delimiter the `danger` color and pass through to each control
120
- */
121
- isInvalid: _propTypes.default.bool,
122
- /**
123
- * Passes through to each control
124
- */
125
+ * Passes through to each control
126
+ */
125
127
  disabled: _propTypes.default.bool,
126
128
  /**
127
- * Passes through to each control
128
- */
129
- readOnly: _propTypes.default.bool,
130
- /**
131
- * Passes through to each control
132
- */
133
- fullWidth: _propTypes.default.bool,
134
- /**
135
- * Triggered whenever the start or end controls are blurred
136
- */
129
+ * Triggered whenever the start or end controls are blurred
130
+ */
137
131
  onBlur: _propTypes.default.any,
138
132
  /**
139
- * Triggered whenever the start or end controls are focused
140
- */
133
+ * Triggered whenever the start or end controls are focused
134
+ */
141
135
  onFocus: _propTypes.default.any
142
136
  };