@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.
- package/README.md +30 -29
- package/dist/eui_theme_dark.css +70 -158
- package/dist/eui_theme_dark.min.css +1 -1
- package/dist/eui_theme_light.css +70 -158
- package/dist/eui_theme_light.min.css +1 -1
- package/es/components/basic_table/basic_table.a11y.js +202 -0
- package/es/components/basic_table/{table.a11y.js → in_memory_table.a11y.js} +1 -1
- package/es/components/date_picker/date_picker.js +23 -15
- package/es/components/date_picker/date_picker_range.js +36 -42
- package/es/components/date_picker/super_date_picker/super_date_picker.js +99 -84
- package/es/components/form/field_number/field_number.js +39 -8
- package/es/components/form/field_text/field_text.js +1 -1
- package/es/components/form/form_control_layout/form_control_layout.js +67 -30
- package/es/components/form/form_control_layout/form_control_layout_delimited.js +31 -11
- package/es/components/form/form_control_layout/form_control_layout_icons.js +12 -20
- package/es/components/form/range/dual_range.js +2 -4
- package/es/components/form/range/range.js +0 -2
- package/es/components/form/range/range_input.js +54 -13
- package/es/components/form/validatable_control/validatable_control.js +15 -5
- package/es/components/index.js +0 -1
- package/es/components/search_bar/query/ast_to_es_query_dsl.js +6 -1
- package/es/components/search_bar/query/ast_to_es_query_string.js +3 -0
- package/es/components/suggest/suggest.a11y.js +70 -0
- package/es/components/table/table.a11y.js +75 -0
- package/eui.d.ts +55 -173
- package/i18ntokens.json +26 -44
- package/lib/components/basic_table/basic_table.a11y.js +194 -0
- package/lib/components/basic_table/{table.a11y.js → in_memory_table.a11y.js} +2 -2
- package/lib/components/date_picker/date_picker.js +23 -15
- package/lib/components/date_picker/date_picker_range.js +35 -41
- package/lib/components/date_picker/super_date_picker/super_date_picker.js +99 -84
- package/lib/components/form/field_number/field_number.js +42 -8
- package/lib/components/form/field_text/field_text.js +1 -1
- package/lib/components/form/form_control_layout/form_control_layout.js +67 -35
- package/lib/components/form/form_control_layout/form_control_layout_delimited.js +31 -11
- package/lib/components/form/form_control_layout/form_control_layout_icons.js +11 -19
- package/lib/components/form/range/dual_range.js +2 -4
- package/lib/components/form/range/range.js +0 -2
- package/lib/components/form/range/range_input.js +52 -11
- package/lib/components/form/validatable_control/validatable_control.js +14 -12
- package/lib/components/index.js +0 -11
- package/lib/components/search_bar/query/ast_to_es_query_dsl.js +6 -1
- package/lib/components/search_bar/query/ast_to_es_query_string.js +3 -0
- package/lib/components/suggest/suggest.a11y.js +73 -0
- package/lib/components/table/table.a11y.js +78 -0
- package/optimize/es/components/basic_table/basic_table.a11y.js +194 -0
- package/optimize/es/components/basic_table/{table.a11y.js → in_memory_table.a11y.js} +1 -1
- package/optimize/es/components/date_picker/date_picker.js +17 -14
- package/optimize/es/components/date_picker/date_picker_range.js +20 -14
- package/optimize/es/components/date_picker/super_date_picker/super_date_picker.js +99 -84
- package/optimize/es/components/form/field_number/field_number.js +34 -8
- package/optimize/es/components/form/field_text/field_text.js +1 -1
- package/optimize/es/components/form/form_control_layout/form_control_layout.js +67 -30
- package/optimize/es/components/form/form_control_layout/form_control_layout_delimited.js +31 -11
- package/optimize/es/components/form/form_control_layout/form_control_layout_icons.js +10 -20
- package/optimize/es/components/form/range/dual_range.js +2 -4
- package/optimize/es/components/form/range/range.js +0 -2
- package/optimize/es/components/form/range/range_input.js +49 -12
- package/optimize/es/components/form/validatable_control/validatable_control.js +10 -5
- package/optimize/es/components/index.js +0 -1
- package/optimize/es/components/search_bar/query/ast_to_es_query_dsl.js +6 -1
- package/optimize/es/components/search_bar/query/ast_to_es_query_string.js +3 -0
- package/optimize/es/components/suggest/suggest.a11y.js +70 -0
- package/optimize/es/components/table/table.a11y.js +75 -0
- package/optimize/lib/components/basic_table/basic_table.a11y.js +188 -0
- package/{test-env/components/basic_table/table.a11y.js → optimize/lib/components/basic_table/in_memory_table.a11y.js} +2 -2
- package/optimize/lib/components/date_picker/date_picker.js +17 -14
- package/optimize/lib/components/date_picker/date_picker_range.js +19 -13
- package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.js +99 -84
- package/optimize/lib/components/form/field_number/field_number.js +37 -8
- package/optimize/lib/components/form/field_text/field_text.js +1 -1
- package/optimize/lib/components/form/form_control_layout/form_control_layout.js +67 -35
- package/optimize/lib/components/form/form_control_layout/form_control_layout_delimited.js +31 -11
- package/optimize/lib/components/form/form_control_layout/form_control_layout_icons.js +9 -19
- package/optimize/lib/components/form/range/dual_range.js +2 -4
- package/optimize/lib/components/form/range/range.js +0 -2
- package/optimize/lib/components/form/range/range_input.js +47 -10
- package/optimize/lib/components/form/validatable_control/validatable_control.js +10 -4
- package/optimize/lib/components/index.js +0 -11
- package/optimize/lib/components/search_bar/query/ast_to_es_query_dsl.js +6 -1
- package/optimize/lib/components/search_bar/query/ast_to_es_query_string.js +3 -0
- package/optimize/lib/components/suggest/suggest.a11y.js +73 -0
- package/optimize/lib/components/table/table.a11y.js +78 -0
- package/package.json +1 -1
- package/src/components/date_picker/_date_picker_range.scss +0 -60
- package/src/components/date_picker/super_date_picker/_super_date_picker.scss +23 -11
- package/src/components/date_picker/super_date_picker/_variables.scss +3 -0
- package/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss +5 -7
- package/src/components/form/form_control_layout/_form_control_layout.scss +2 -2
- package/src/components/form/form_control_layout/_form_control_layout_delimited.scss +12 -36
- package/src/components/form/form_control_layout/_form_control_layout_icons.scss +27 -6
- package/src/themes/amsterdam/overrides/_date_picker.scss +0 -14
- package/src/themes/amsterdam/overrides/_index.scss +0 -1
- package/test-env/components/basic_table/basic_table.a11y.js +188 -0
- package/{optimize/lib/components/basic_table/table.a11y.js → test-env/components/basic_table/in_memory_table.a11y.js} +2 -2
- package/test-env/components/date_picker/date_picker.js +23 -15
- package/test-env/components/date_picker/date_picker_range.js +35 -41
- package/test-env/components/date_picker/super_date_picker/super_date_picker.js +99 -84
- package/test-env/components/form/field_number/field_number.js +37 -8
- package/test-env/components/form/field_text/field_text.js +1 -1
- package/test-env/components/form/form_control_layout/form_control_layout.js +68 -35
- package/test-env/components/form/form_control_layout/form_control_layout_delimited.js +31 -11
- package/test-env/components/form/form_control_layout/form_control_layout_icons.js +11 -19
- package/test-env/components/form/range/dual_range.js +2 -4
- package/test-env/components/form/range/range.js +0 -2
- package/test-env/components/form/range/range_input.js +47 -11
- package/test-env/components/form/validatable_control/validatable_control.js +9 -4
- package/test-env/components/index.js +0 -11
- package/test-env/components/search_bar/query/ast_to_es_query_dsl.js +6 -1
- package/test-env/components/search_bar/query/ast_to_es_query_string.js +3 -0
- package/test-env/components/suggest/suggest.a11y.js +73 -0
- package/test-env/components/table/table.a11y.js +78 -0
- package/es/components/inline_edit/index.js +0 -10
- package/es/components/inline_edit/inline_edit.styles.js +0 -15
- package/es/components/inline_edit/inline_edit_form.js +0 -190
- package/es/components/inline_edit/inline_edit_text.js +0 -97
- package/es/components/inline_edit/inline_edit_title.js +0 -105
- package/lib/components/inline_edit/index.js +0 -19
- package/lib/components/inline_edit/inline_edit.styles.js +0 -22
- package/lib/components/inline_edit/inline_edit_form.js +0 -193
- package/lib/components/inline_edit/inline_edit_text.js +0 -97
- package/lib/components/inline_edit/inline_edit_title.js +0 -106
- package/optimize/es/components/inline_edit/index.js +0 -10
- package/optimize/es/components/inline_edit/inline_edit.styles.js +0 -15
- package/optimize/es/components/inline_edit/inline_edit_form.js +0 -133
- package/optimize/es/components/inline_edit/inline_edit_text.js +0 -52
- package/optimize/es/components/inline_edit/inline_edit_title.js +0 -56
- package/optimize/lib/components/inline_edit/index.js +0 -19
- package/optimize/lib/components/inline_edit/inline_edit.styles.js +0 -22
- package/optimize/lib/components/inline_edit/inline_edit_form.js +0 -144
- package/optimize/lib/components/inline_edit/inline_edit_text.js +0 -52
- package/optimize/lib/components/inline_edit/inline_edit_title.js +0 -57
- package/src/themes/amsterdam/overrides/_date_popover_button.scss +0 -14
- package/test-env/components/inline_edit/index.js +0 -19
- package/test-env/components/inline_edit/inline_edit.styles.js +0 -22
- package/test-env/components/inline_edit/inline_edit_form.js +0 -196
- package/test-env/components/inline_edit/inline_edit_text.js +0 -96
- 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 '
|
|
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
|
-
|
|
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, {
|
|
13
|
+
import React, { cloneElement } from 'react';
|
|
14
14
|
import PropTypes from "prop-types";
|
|
15
15
|
import classNames from 'classnames';
|
|
16
|
-
import {
|
|
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
|
-
|
|
44
|
-
showIcon:
|
|
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
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
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
|
-
|
|
98
|
-
|
|
103
|
+
* Including any children will replace all innards with the provided children
|
|
104
|
+
*/
|
|
99
105
|
children: PropTypes.node,
|
|
100
106
|
/**
|
|
101
|
-
|
|
102
|
-
|
|
107
|
+
* The end date `EuiDatePicker` element
|
|
108
|
+
*/
|
|
103
109
|
endDateControl: PropTypes.element.isRequired,
|
|
104
110
|
/**
|
|
105
|
-
|
|
106
|
-
|
|
111
|
+
* The start date `EuiDatePicker` element
|
|
112
|
+
*/
|
|
107
113
|
startDateControl: PropTypes.element.isRequired,
|
|
108
114
|
/**
|
|
109
|
-
|
|
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
|
-
|
|
114
|
-
|
|
119
|
+
* Won't apply any additional props to start and end date components
|
|
120
|
+
*/
|
|
115
121
|
isCustom: PropTypes.bool,
|
|
116
122
|
/**
|
|
117
|
-
|
|
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
|
-
|
|
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
|
-
|
|
138
|
-
|
|
131
|
+
* Triggered whenever the start or end controls are focused
|
|
132
|
+
*/
|
|
139
133
|
onFocus: PropTypes.any
|
|
140
134
|
};
|