@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,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
|
|
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)(
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
45
|
-
showIcon:
|
|
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
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
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
|
-
|
|
100
|
-
|
|
105
|
+
* Including any children will replace all innards with the provided children
|
|
106
|
+
*/
|
|
101
107
|
children: _propTypes.default.node,
|
|
102
108
|
/**
|
|
103
|
-
|
|
104
|
-
|
|
109
|
+
* The end date `EuiDatePicker` element
|
|
110
|
+
*/
|
|
105
111
|
endDateControl: _propTypes.default.element.isRequired,
|
|
106
112
|
/**
|
|
107
|
-
|
|
108
|
-
|
|
113
|
+
* The start date `EuiDatePicker` element
|
|
114
|
+
*/
|
|
109
115
|
startDateControl: _propTypes.default.element.isRequired,
|
|
110
116
|
/**
|
|
111
|
-
|
|
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
|
-
|
|
116
|
-
|
|
121
|
+
* Won't apply any additional props to start and end date components
|
|
122
|
+
*/
|
|
117
123
|
isCustom: _propTypes.default.bool,
|
|
118
124
|
/**
|
|
119
|
-
|
|
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
|
-
|
|
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
|
-
|
|
140
|
-
|
|
133
|
+
* Triggered whenever the start or end controls are focused
|
|
134
|
+
*/
|
|
141
135
|
onFocus: _propTypes.default.any
|
|
142
136
|
};
|