@elastic/eui 88.3.0 → 88.4.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/dist/eui_theme_dark.css +0 -142
- package/dist/eui_theme_dark.min.css +1 -1
- package/dist/eui_theme_light.css +0 -142
- package/dist/eui_theme_light.min.css +1 -1
- package/es/components/basic_table/in_memory_table.js +85 -34
- package/es/components/card/card.js +3 -3
- package/es/components/combo_box/combo_box.js +16 -4
- package/es/components/combo_box/combo_box_input/combo_box_input.js +4 -1
- package/es/components/combo_box/combo_box_input/combo_box_pill.js +5 -1
- package/es/components/combo_box/combo_box_options_list/combo_box_option.js +2 -0
- package/es/components/combo_box/combo_box_options_list/combo_box_options_list.js +59 -15
- package/es/components/datagrid/controls/column_selector.js +5 -3
- package/es/components/datagrid/controls/column_sorting_draggable.js +4 -1
- package/es/components/description_list/description_list_title.js +0 -1
- package/es/components/description_list/description_list_title.styles.js +1 -1
- package/es/components/drag_and_drop/draggable.js +18 -23
- package/es/components/drag_and_drop/draggable.styles.js +56 -0
- package/es/components/drag_and_drop/droppable.js +24 -21
- package/es/components/drag_and_drop/droppable.styles.js +51 -0
- package/es/components/search_bar/search_box.js +54 -88
- package/es/components/table/table_pagination/table_pagination.js +1 -0
- package/es/test/rtl/custom_render.js +1 -1
- package/eui.d.ts +480 -420
- package/i18ntokens.json +142 -88
- package/lib/components/basic_table/in_memory_table.js +85 -34
- package/lib/components/card/card.js +3 -3
- package/lib/components/combo_box/combo_box.js +16 -4
- package/lib/components/combo_box/combo_box_input/combo_box_input.js +4 -1
- package/lib/components/combo_box/combo_box_input/combo_box_pill.js +5 -1
- package/lib/components/combo_box/combo_box_options_list/combo_box_option.js +2 -0
- package/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js +59 -15
- package/lib/components/datagrid/controls/column_selector.js +4 -2
- package/lib/components/datagrid/controls/column_sorting_draggable.js +4 -1
- package/lib/components/description_list/description_list_title.js +0 -1
- package/lib/components/description_list/description_list_title.styles.js +1 -1
- package/lib/components/drag_and_drop/draggable.js +17 -22
- package/lib/components/drag_and_drop/draggable.styles.js +62 -0
- package/lib/components/drag_and_drop/droppable.js +26 -22
- package/lib/components/drag_and_drop/droppable.styles.js +57 -0
- package/lib/components/search_bar/search_box.js +61 -93
- package/lib/components/table/table_pagination/table_pagination.js +1 -0
- package/lib/test/rtl/custom_render.js +2 -2
- package/optimize/es/components/basic_table/in_memory_table.js +62 -34
- package/optimize/es/components/card/card.js +3 -3
- package/optimize/es/components/combo_box/combo_box.js +6 -4
- package/optimize/es/components/combo_box/combo_box_input/combo_box_input.js +2 -1
- package/optimize/es/components/combo_box/combo_box_input/combo_box_pill.js +3 -1
- package/optimize/es/components/combo_box/combo_box_options_list/combo_box_options_list.js +49 -12
- package/optimize/es/components/datagrid/controls/column_selector.js +5 -3
- package/optimize/es/components/datagrid/controls/column_sorting_draggable.js +4 -1
- package/optimize/es/components/description_list/description_list_title.js +0 -1
- package/optimize/es/components/description_list/description_list_title.styles.js +1 -1
- package/optimize/es/components/drag_and_drop/draggable.js +17 -22
- package/optimize/es/components/drag_and_drop/draggable.styles.js +56 -0
- package/optimize/es/components/drag_and_drop/droppable.js +23 -20
- package/optimize/es/components/drag_and_drop/droppable.styles.js +51 -0
- package/optimize/es/components/search_bar/search_box.js +50 -83
- package/optimize/es/components/table/table_pagination/table_pagination.js +1 -0
- package/optimize/es/test/rtl/custom_render.js +1 -1
- package/optimize/lib/components/basic_table/in_memory_table.js +62 -34
- package/optimize/lib/components/card/card.js +3 -3
- package/optimize/lib/components/combo_box/combo_box.js +6 -4
- package/optimize/lib/components/combo_box/combo_box_input/combo_box_input.js +2 -1
- package/optimize/lib/components/combo_box/combo_box_input/combo_box_pill.js +3 -1
- package/optimize/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js +49 -12
- package/optimize/lib/components/datagrid/controls/column_selector.js +4 -2
- package/optimize/lib/components/datagrid/controls/column_sorting_draggable.js +4 -1
- package/optimize/lib/components/description_list/description_list_title.js +0 -1
- package/optimize/lib/components/description_list/description_list_title.styles.js +1 -1
- package/optimize/lib/components/drag_and_drop/draggable.js +16 -21
- package/optimize/lib/components/drag_and_drop/draggable.styles.js +62 -0
- package/optimize/lib/components/drag_and_drop/droppable.js +25 -21
- package/optimize/lib/components/drag_and_drop/droppable.styles.js +57 -0
- package/optimize/lib/components/search_bar/search_box.js +57 -89
- package/optimize/lib/components/table/table_pagination/table_pagination.js +1 -0
- package/optimize/lib/test/rtl/custom_render.js +2 -2
- package/package.json +4 -4
- package/src/components/combo_box/combo_box_input/_combo_box_pill.scss +0 -1
- package/src/components/index.scss +0 -1
- package/src/themes/amsterdam/overrides/_index.scss +0 -1
- package/test-env/components/basic_table/in_memory_table.js +85 -34
- package/test-env/components/card/card.js +3 -3
- package/test-env/components/combo_box/combo_box.js +16 -4
- package/test-env/components/combo_box/combo_box_input/combo_box_input.js +4 -1
- package/test-env/components/combo_box/combo_box_input/combo_box_pill.js +5 -1
- package/test-env/components/combo_box/combo_box_options_list/combo_box_option.js +2 -0
- package/test-env/components/combo_box/combo_box_options_list/combo_box_options_list.js +58 -14
- package/test-env/components/datagrid/controls/column_selector.js +4 -2
- package/test-env/components/datagrid/controls/column_sorting_draggable.js +4 -1
- package/test-env/components/description_list/description_list_title.js +0 -1
- package/test-env/components/description_list/description_list_title.styles.js +1 -1
- package/test-env/components/drag_and_drop/draggable.js +17 -22
- package/test-env/components/drag_and_drop/draggable.styles.js +62 -0
- package/test-env/components/drag_and_drop/droppable.js +26 -22
- package/test-env/components/drag_and_drop/droppable.styles.js +57 -0
- package/test-env/components/search_bar/search_box.js +60 -88
- package/test-env/components/table/table_pagination/table_pagination.js +1 -0
- package/test-env/test/rtl/custom_render.js +2 -2
- package/src/components/drag_and_drop/_draggable.scss +0 -41
- package/src/components/drag_and_drop/_droppable.scss +0 -40
- package/src/components/drag_and_drop/_index.scss +0 -3
- package/src/components/drag_and_drop/_variables.scss +0 -5
- package/src/themes/amsterdam/overrides/_description_list.scss +0 -7
|
@@ -5,13 +5,16 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.EuiDroppableContext = exports.EuiDroppable = void 0;
|
|
8
|
+
exports.SPACINGS = exports.EuiDroppableContext = exports.EuiDroppable = void 0;
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
12
|
var _dnd = require("@hello-pangea/dnd");
|
|
13
13
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
14
|
+
var _services = require("../../services");
|
|
15
|
+
var _panel = require("../panel");
|
|
14
16
|
var _drag_drop_context = require("./drag_drop_context");
|
|
17
|
+
var _droppable = require("./droppable.styles");
|
|
15
18
|
var _react2 = require("@emotion/react");
|
|
16
19
|
var _excluded = ["droppableId", "direction", "isDropDisabled", "children", "className", "cloneDraggables", "spacing", "style", "type", "withPanel", "grow", "data-test-subj"];
|
|
17
20
|
/*
|
|
@@ -23,12 +26,8 @@ var _excluded = ["droppableId", "direction", "isDropDisabled", "children", "clas
|
|
|
23
26
|
*/
|
|
24
27
|
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); }
|
|
25
28
|
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; }
|
|
26
|
-
var
|
|
27
|
-
|
|
28
|
-
s: 'euiDroppable--s',
|
|
29
|
-
m: 'euiDroppable--m',
|
|
30
|
-
l: 'euiDroppable--l'
|
|
31
|
-
};
|
|
29
|
+
var SPACINGS = ['none', 's', 'm', 'l'];
|
|
30
|
+
exports.SPACINGS = SPACINGS;
|
|
32
31
|
var EuiDroppableContext = /*#__PURE__*/_react.default.createContext({
|
|
33
32
|
cloneItems: false
|
|
34
33
|
});
|
|
@@ -57,35 +56,40 @@ var EuiDroppable = function EuiDroppable(_ref) {
|
|
|
57
56
|
var _useContext = (0, _react.useContext)(_drag_drop_context.EuiDragDropContextContext),
|
|
58
57
|
isDraggingType = _useContext.isDraggingType;
|
|
59
58
|
var dropIsDisabled = cloneDraggables ? true : isDropDisabled;
|
|
59
|
+
var euiTheme = (0, _services.useEuiTheme)();
|
|
60
|
+
var styles = (0, _droppable.euiDroppableStyles)(euiTheme);
|
|
60
61
|
return (0, _react2.jsx)(_dnd.Droppable, (0, _extends2.default)({
|
|
61
62
|
isDropDisabled: dropIsDisabled,
|
|
62
63
|
droppableId: droppableId,
|
|
63
64
|
direction: direction,
|
|
64
65
|
type: type
|
|
65
66
|
}, rest), function (provided, snapshot) {
|
|
67
|
+
var isDraggingOver = snapshot.isDraggingOver;
|
|
68
|
+
var PanelOrDiv = withPanel ? _panel.EuiPanel : 'div';
|
|
69
|
+
var panelOrDivProps = withPanel ? {
|
|
70
|
+
panelRef: provided.innerRef,
|
|
71
|
+
hasShadow: true,
|
|
72
|
+
paddingSize: 'none'
|
|
73
|
+
} : {
|
|
74
|
+
ref: provided.innerRef
|
|
75
|
+
};
|
|
76
|
+
var cssStyles = [styles.euiDroppable, isDraggingType === type && !dropIsDisabled && styles.isDragging, isDraggingOver && styles.isDraggingOver, grow ? styles.grow : styles.noGrow, styles.spacing[spacing]];
|
|
66
77
|
var classes = (0, _classnames.default)('euiDroppable', {
|
|
67
|
-
'euiDroppable
|
|
68
|
-
|
|
69
|
-
'euiDroppable--isDraggingType': isDraggingType === type,
|
|
70
|
-
'euiDroppable--withPanel': withPanel,
|
|
71
|
-
'euiDroppable--grow': grow,
|
|
72
|
-
'euiDroppable--noGrow': !grow
|
|
73
|
-
}, spacingToClassNameMap[spacing], className);
|
|
74
|
-
var placeholderClasses = (0, _classnames.default)('euiDroppable__placeholder', {
|
|
75
|
-
'euiDroppable__placeholder--isHidden': cloneDraggables
|
|
76
|
-
});
|
|
78
|
+
'euiDroppable-isDisabled': dropIsDisabled
|
|
79
|
+
}, className);
|
|
77
80
|
var DroppableElement = typeof children === 'function' ? children(provided, snapshot) : children;
|
|
78
|
-
return (0, _react2.jsx)(
|
|
79
|
-
ref: provided.innerRef,
|
|
81
|
+
return (0, _react2.jsx)(PanelOrDiv, (0, _extends2.default)({}, provided.droppableProps, panelOrDivProps, {
|
|
80
82
|
style: style,
|
|
81
83
|
"data-test-subj": dataTestSubj,
|
|
82
|
-
className: classes
|
|
84
|
+
className: classes,
|
|
85
|
+
css: cssStyles
|
|
83
86
|
}), (0, _react2.jsx)(EuiDroppableContext.Provider, {
|
|
84
87
|
value: {
|
|
85
88
|
cloneItems: cloneDraggables
|
|
86
89
|
}
|
|
87
90
|
}, DroppableElement), (0, _react2.jsx)("div", {
|
|
88
|
-
className:
|
|
91
|
+
className: "euiDroppable__placeholder",
|
|
92
|
+
hidden: cloneDraggables
|
|
89
93
|
}, provided.placeholder));
|
|
90
94
|
});
|
|
91
95
|
};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.sharedSpacingPadding = exports.euiDroppableStyles = void 0;
|
|
7
|
+
var _react = require("@emotion/react");
|
|
8
|
+
var _services = require("../../services");
|
|
9
|
+
var _global_styling = require("../../global_styling");
|
|
10
|
+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
|
|
11
|
+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
12
|
+
* or more contributor license agreements. Licensed under the Elastic License
|
|
13
|
+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
14
|
+
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
15
|
+
* Side Public License, v 1.
|
|
16
|
+
*/
|
|
17
|
+
var _ref = process.env.NODE_ENV === "production" ? {
|
|
18
|
+
name: "jkp921-noGrow",
|
|
19
|
+
styles: "flex-grow:0;label:noGrow;"
|
|
20
|
+
} : {
|
|
21
|
+
name: "jkp921-noGrow",
|
|
22
|
+
styles: "flex-grow:0;label:noGrow;",
|
|
23
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
24
|
+
};
|
|
25
|
+
var _ref2 = process.env.NODE_ENV === "production" ? {
|
|
26
|
+
name: "122lw0e-grow",
|
|
27
|
+
styles: "flex-grow:1;label:grow;"
|
|
28
|
+
} : {
|
|
29
|
+
name: "122lw0e-grow",
|
|
30
|
+
styles: "flex-grow:1;label:grow;",
|
|
31
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
32
|
+
};
|
|
33
|
+
var euiDroppableStyles = function euiDroppableStyles(euiThemeContext) {
|
|
34
|
+
var euiTheme = euiThemeContext.euiTheme;
|
|
35
|
+
var droppableColor = euiTheme.colors.success;
|
|
36
|
+
return {
|
|
37
|
+
euiDroppable: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:background-color ", euiTheme.animation.slow, " ease;};label:euiDroppable;"),
|
|
38
|
+
isDragging: /*#__PURE__*/(0, _react.css)("background-color:", (0, _services.transparentize)(droppableColor, 0.1), ";;label:isDragging;"),
|
|
39
|
+
isDraggingOver: /*#__PURE__*/(0, _react.css)("background-color:", (0, _services.transparentize)(droppableColor, 0.25), ";;label:isDraggingOver;"),
|
|
40
|
+
grow: _ref2,
|
|
41
|
+
noGrow: _ref,
|
|
42
|
+
spacing: sharedSpacingPadding(euiThemeContext)
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
// Droppable and draggable components both have the same shared spacing/padding values
|
|
47
|
+
exports.euiDroppableStyles = euiDroppableStyles;
|
|
48
|
+
var sharedSpacingPadding = function sharedSpacingPadding(_ref3) {
|
|
49
|
+
var euiTheme = _ref3.euiTheme;
|
|
50
|
+
return {
|
|
51
|
+
none: null,
|
|
52
|
+
s: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.xxs, ";;label:s;"),
|
|
53
|
+
m: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.xs, ";;label:m;"),
|
|
54
|
+
l: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.s, ";;label:l;")
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
exports.sharedSpacingPadding = sharedSpacingPadding;
|
|
@@ -8,101 +8,69 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.EuiSearchBox = void 0;
|
|
9
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
12
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
13
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
14
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
15
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
16
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
17
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
18
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _services = require("../../services");
|
|
13
|
+
var _i18n = require("../i18n");
|
|
19
14
|
var _form = require("../form");
|
|
20
15
|
var _popover = require("../popover");
|
|
21
16
|
var _react2 = require("@emotion/react");
|
|
22
|
-
var _excluded = ["query", "incremental", "hint"];
|
|
17
|
+
var _excluded = ["query", "placeholder", "incremental", "hint"];
|
|
18
|
+
/*
|
|
19
|
+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
20
|
+
* or more contributor license agreements. Licensed under the Elastic License
|
|
21
|
+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
|
22
|
+
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
|
23
|
+
* Side Public License, v 1.
|
|
24
|
+
*/
|
|
23
25
|
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); }
|
|
24
26
|
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; }
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
function EuiSearchBox() {
|
|
37
|
-
var _this;
|
|
38
|
-
(0, _classCallCheck2.default)(this, EuiSearchBox);
|
|
39
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
40
|
-
args[_key] = arguments[_key];
|
|
27
|
+
var EuiSearchBox = function EuiSearchBox(_ref) {
|
|
28
|
+
var query = _ref.query,
|
|
29
|
+
placeholder = _ref.placeholder,
|
|
30
|
+
incremental = _ref.incremental,
|
|
31
|
+
hint = _ref.hint,
|
|
32
|
+
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
33
|
+
var _inputRef = (0, _react.useRef)(null);
|
|
34
|
+
(0, _services.useUpdateEffect)(function () {
|
|
35
|
+
if (_inputRef.current) {
|
|
36
|
+
_inputRef.current.value = query;
|
|
37
|
+
_inputRef.current.dispatchEvent(new Event('change'));
|
|
41
38
|
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
(0,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
39
|
+
}, [query]);
|
|
40
|
+
var defaultPlaceholder = (0, _i18n.useEuiI18n)('euiSearchBox.placeholder', 'Search...');
|
|
41
|
+
var ariaLabelIncremental = (0, _i18n.useEuiI18n)('euiSearchBox.incrementalAriaLabel', 'This is a search bar. As you type, the results lower in the page will automatically filter.');
|
|
42
|
+
var ariaLabelEnter = (0, _i18n.useEuiI18n)('euiSearchBox.ariaLabel', 'This is a search bar. After typing your query, hit enter to filter the results lower in the page.');
|
|
43
|
+
var search = (0, _react2.jsx)(_form.EuiFieldSearch, (0, _extends2.default)({
|
|
44
|
+
inputRef: function inputRef(input) {
|
|
45
|
+
return _inputRef.current = input;
|
|
46
|
+
},
|
|
47
|
+
fullWidth: true,
|
|
48
|
+
defaultValue: query,
|
|
49
|
+
incremental: incremental,
|
|
50
|
+
"aria-label": incremental ? ariaLabelIncremental : ariaLabelEnter,
|
|
51
|
+
placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : defaultPlaceholder,
|
|
52
|
+
onFocus: function onFocus() {
|
|
53
|
+
hint === null || hint === void 0 ? void 0 : hint.setIsVisible(true);
|
|
53
54
|
}
|
|
54
|
-
},
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
inputRef: function inputRef(input) {
|
|
71
|
-
return _this2.inputElement = input;
|
|
72
|
-
},
|
|
73
|
-
fullWidth: true,
|
|
74
|
-
defaultValue: query,
|
|
75
|
-
incremental: incremental,
|
|
76
|
-
"aria-label": ariaLabel,
|
|
77
|
-
onFocus: function onFocus() {
|
|
78
|
-
hint === null || hint === void 0 ? void 0 : hint.setIsVisible(true);
|
|
79
|
-
}
|
|
80
|
-
}, rest));
|
|
81
|
-
if (hint) {
|
|
82
|
-
return (0, _react2.jsx)(_popover.EuiInputPopover, (0, _extends2.default)({
|
|
83
|
-
disableFocusTrap: true,
|
|
84
|
-
input: search,
|
|
85
|
-
isOpen: hint.isVisible,
|
|
86
|
-
fullWidth: true,
|
|
87
|
-
closePopover: function closePopover() {
|
|
88
|
-
hint.setIsVisible(false);
|
|
89
|
-
},
|
|
90
|
-
panelProps: {
|
|
91
|
-
'aria-live': undefined,
|
|
92
|
-
'aria-modal': undefined,
|
|
93
|
-
role: undefined,
|
|
94
|
-
tabIndex: -1,
|
|
95
|
-
id: hint.id
|
|
96
|
-
}
|
|
97
|
-
}, hint.popoverProps), hint.content);
|
|
55
|
+
}, rest));
|
|
56
|
+
if (hint) {
|
|
57
|
+
return (0, _react2.jsx)(_popover.EuiInputPopover, (0, _extends2.default)({
|
|
58
|
+
disableFocusTrap: true,
|
|
59
|
+
input: search,
|
|
60
|
+
isOpen: hint.isVisible,
|
|
61
|
+
fullWidth: true,
|
|
62
|
+
closePopover: function closePopover() {
|
|
63
|
+
hint.setIsVisible(false);
|
|
64
|
+
},
|
|
65
|
+
panelProps: {
|
|
66
|
+
'aria-live': undefined,
|
|
67
|
+
'aria-modal': undefined,
|
|
68
|
+
role: undefined,
|
|
69
|
+
tabIndex: -1,
|
|
70
|
+
id: hint.id
|
|
98
71
|
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
exports.EuiSearchBox = EuiSearchBox;
|
|
105
|
-
(0, _defineProperty2.default)(EuiSearchBox, "defaultProps", {
|
|
106
|
-
placeholder: 'Search...',
|
|
107
|
-
incremental: false
|
|
108
|
-
});
|
|
72
|
+
}, hint.popoverProps), hint.content);
|
|
73
|
+
}
|
|
74
|
+
return search;
|
|
75
|
+
};
|
|
76
|
+
exports.EuiSearchBox = EuiSearchBox;
|
|
@@ -73,6 +73,7 @@ var EuiTablePagination = function EuiTablePagination(props) {
|
|
|
73
73
|
return (0, _react2.jsx)(_context_menu.EuiContextMenuItem, {
|
|
74
74
|
key: itemsPerPageOption,
|
|
75
75
|
icon: itemsPerPageOption === itemsPerPage ? 'check' : 'empty',
|
|
76
|
+
"aria-current": itemsPerPageOption === itemsPerPage ? 'true' : undefined,
|
|
76
77
|
onClick: function onClick() {
|
|
77
78
|
closePopover();
|
|
78
79
|
onChangeItemsPerPage === null || onChangeItemsPerPage === void 0 ? void 0 : onChangeItemsPerPage(itemsPerPageOption);
|
|
@@ -9,7 +9,7 @@ exports.within = exports.screen = exports.render = void 0;
|
|
|
9
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
11
|
var _react = require("@testing-library/react");
|
|
12
|
-
var
|
|
12
|
+
var _provider = require("../../components/provider");
|
|
13
13
|
var dataTestSubjQueries = _interopRequireWildcard(require("./data_test_subj_queries"));
|
|
14
14
|
var _excluded = ["queries"];
|
|
15
15
|
/*
|
|
@@ -36,7 +36,7 @@ var customRender = function customRender(ui) {
|
|
|
36
36
|
options = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
37
37
|
return (0, _react.render)(ui, _objectSpread({
|
|
38
38
|
queries: _objectSpread(_objectSpread(_objectSpread({}, _react.queries), dataTestSubjQueries), renderQueries || {}),
|
|
39
|
-
wrapper:
|
|
39
|
+
wrapper: _provider.EuiProvider
|
|
40
40
|
}, options));
|
|
41
41
|
};
|
|
42
42
|
exports.render = customRender;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elastic/eui",
|
|
3
3
|
"description": "Elastic UI Component Library",
|
|
4
|
-
"version": "88.
|
|
4
|
+
"version": "88.4.0",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"main": "lib",
|
|
7
7
|
"module": "es",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"**/@types/react": "^18",
|
|
61
61
|
"react-focus-lock": "^2.9.5"
|
|
62
62
|
},
|
|
63
|
-
"pre-
|
|
63
|
+
"pre-push": [
|
|
64
64
|
"test-staged"
|
|
65
65
|
],
|
|
66
66
|
"dependencies": {
|
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
"@emotion/eslint-plugin": "^11.11.0",
|
|
128
128
|
"@emotion/jest": "^11.11.0",
|
|
129
129
|
"@emotion/react": "^11.11.0",
|
|
130
|
-
"@faker-js/faker": "^
|
|
130
|
+
"@faker-js/faker": "^8.0.2",
|
|
131
131
|
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
|
|
132
132
|
"@storybook/addon-essentials": "^7.3.1",
|
|
133
133
|
"@storybook/addon-interactions": "^7.3.1",
|
|
@@ -220,7 +220,7 @@
|
|
|
220
220
|
"postcss-inline-svg": "^4.1.0",
|
|
221
221
|
"postcss-loader": "^7.0.1",
|
|
222
222
|
"postcss-styled-syntax": "^0.4.0",
|
|
223
|
-
"pre-
|
|
223
|
+
"pre-push": "^0.1.4",
|
|
224
224
|
"prettier": "^2.8.8",
|
|
225
225
|
"process": "^0.11.10",
|
|
226
226
|
"prop-types": "^15.6.0",
|
|
@@ -20,13 +20,15 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
20
20
|
var _basic_table = require("./basic_table");
|
|
21
21
|
var _predicate = require("../../services/predicate");
|
|
22
22
|
var _sort2 = require("../../services/sort");
|
|
23
|
-
var _search_bar = require("../search_bar");
|
|
23
|
+
var _search_bar = require("../search_bar/search_bar");
|
|
24
|
+
var _search_box = require("../search_bar/search_box");
|
|
24
25
|
var _spacer = require("../spacer");
|
|
25
26
|
var _table_pagination = require("../table/table_pagination");
|
|
26
27
|
var _component_defaults = require("../provider/component_defaults");
|
|
27
28
|
var _react2 = require("@emotion/react");
|
|
28
|
-
var _excluded = ["
|
|
29
|
-
_excluded2 = ["
|
|
29
|
+
var _excluded = ["schema"],
|
|
30
|
+
_excluded2 = ["onChange"],
|
|
31
|
+
_excluded3 = ["columns", "loading", "message", "error", "selection", "isSelectable", "hasActions", "compressed", "pagination", "sorting", "itemIdToExpandedRowMap", "itemId", "rowProps", "cellProps", "tableLayout", "items", "search", "searchFormat", "onTableChange", "executeQueryOptions", "allowNeutralSort", "childrenBetween"];
|
|
30
32
|
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); }
|
|
31
33
|
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; }
|
|
32
34
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
@@ -219,6 +221,15 @@ var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
|
|
|
219
221
|
};
|
|
220
222
|
});
|
|
221
223
|
});
|
|
224
|
+
// Alternative to onQueryChange - allows consumers to specify they want the
|
|
225
|
+
// search bar to ignore EQL syntax and only use the searchbar for plain text
|
|
226
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onPlainTextSearch", function (searchValue) {
|
|
227
|
+
var escapedQueryText = searchValue.replace(/["\\]/g, '\\$&');
|
|
228
|
+
var finalQuery = "\"".concat(escapedQueryText, "\"");
|
|
229
|
+
_this.setState({
|
|
230
|
+
query: _search_bar.EuiSearchBar.Query.parse(finalQuery)
|
|
231
|
+
});
|
|
232
|
+
});
|
|
222
233
|
var columns = props.columns,
|
|
223
234
|
_search = props.search,
|
|
224
235
|
_pagination = props.pagination,
|
|
@@ -262,12 +273,26 @@ var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
|
|
|
262
273
|
}, {
|
|
263
274
|
key: "renderSearchBar",
|
|
264
275
|
value: function renderSearchBar() {
|
|
265
|
-
var
|
|
266
|
-
|
|
276
|
+
var _this$props = this.props,
|
|
277
|
+
search = _this$props.search,
|
|
278
|
+
searchFormat = _this$props.searchFormat;
|
|
279
|
+
if (!search) return;
|
|
280
|
+
var searchBar;
|
|
281
|
+
if (searchFormat === 'text') {
|
|
282
|
+
var _searchBoxProps = (search === null || search === void 0 ? void 0 : search.box) || {}; // Work around | boolean type
|
|
283
|
+
var schema = _searchBoxProps.schema,
|
|
284
|
+
searchBoxProps = (0, _objectWithoutProperties2.default)(_searchBoxProps, _excluded); // Destructure `schema` so it doesn't get rendered to DOM
|
|
285
|
+
|
|
286
|
+
searchBar = (0, _react2.jsx)(_search_box.EuiSearchBox, (0, _extends2.default)({
|
|
287
|
+
query: "" // Unused, passed to satisfy Typescript
|
|
288
|
+
}, searchBoxProps, {
|
|
289
|
+
onSearch: this.onPlainTextSearch
|
|
290
|
+
}));
|
|
291
|
+
} else {
|
|
267
292
|
var searchBarProps = {};
|
|
268
293
|
if (isEuiSearchBarProps(search)) {
|
|
269
294
|
var onChange = search.onChange,
|
|
270
|
-
_searchBarProps = (0, _objectWithoutProperties2.default)(search,
|
|
295
|
+
_searchBarProps = (0, _objectWithoutProperties2.default)(search, _excluded2);
|
|
271
296
|
searchBarProps = _searchBarProps;
|
|
272
297
|
if (searchBarProps.box && searchBarProps.box.schema === true) {
|
|
273
298
|
searchBarProps.box = _objectSpread(_objectSpread({}, searchBarProps.box), {}, {
|
|
@@ -275,12 +300,13 @@ var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
|
|
|
275
300
|
});
|
|
276
301
|
}
|
|
277
302
|
}
|
|
278
|
-
|
|
303
|
+
searchBar = (0, _react2.jsx)(_search_bar.EuiSearchBar, (0, _extends2.default)({
|
|
279
304
|
onChange: this.onQueryChange
|
|
280
|
-
}, searchBarProps))
|
|
281
|
-
size: "l"
|
|
282
|
-
}));
|
|
305
|
+
}, searchBarProps));
|
|
283
306
|
}
|
|
307
|
+
return (0, _react2.jsx)(_react.default.Fragment, null, searchBar, (0, _react2.jsx)(_spacer.EuiSpacer, {
|
|
308
|
+
size: "l"
|
|
309
|
+
}));
|
|
284
310
|
}
|
|
285
311
|
}, {
|
|
286
312
|
key: "resolveSearchSchema",
|
|
@@ -357,29 +383,30 @@ var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
|
|
|
357
383
|
}, {
|
|
358
384
|
key: "render",
|
|
359
385
|
value: function render() {
|
|
360
|
-
var _this$
|
|
361
|
-
columns = _this$
|
|
362
|
-
loading = _this$
|
|
363
|
-
message = _this$
|
|
364
|
-
error = _this$
|
|
365
|
-
selection = _this$
|
|
366
|
-
isSelectable = _this$
|
|
367
|
-
hasActions = _this$
|
|
368
|
-
compressed = _this$
|
|
369
|
-
hasPagination = _this$
|
|
370
|
-
hasSorting = _this$
|
|
371
|
-
itemIdToExpandedRowMap = _this$
|
|
372
|
-
itemId = _this$
|
|
373
|
-
rowProps = _this$
|
|
374
|
-
cellProps = _this$
|
|
375
|
-
tableLayout = _this$
|
|
376
|
-
_unuseditems = _this$
|
|
377
|
-
search = _this$
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
386
|
+
var _this$props2 = this.props,
|
|
387
|
+
columns = _this$props2.columns,
|
|
388
|
+
loading = _this$props2.loading,
|
|
389
|
+
message = _this$props2.message,
|
|
390
|
+
error = _this$props2.error,
|
|
391
|
+
selection = _this$props2.selection,
|
|
392
|
+
isSelectable = _this$props2.isSelectable,
|
|
393
|
+
hasActions = _this$props2.hasActions,
|
|
394
|
+
compressed = _this$props2.compressed,
|
|
395
|
+
hasPagination = _this$props2.pagination,
|
|
396
|
+
hasSorting = _this$props2.sorting,
|
|
397
|
+
itemIdToExpandedRowMap = _this$props2.itemIdToExpandedRowMap,
|
|
398
|
+
itemId = _this$props2.itemId,
|
|
399
|
+
rowProps = _this$props2.rowProps,
|
|
400
|
+
cellProps = _this$props2.cellProps,
|
|
401
|
+
tableLayout = _this$props2.tableLayout,
|
|
402
|
+
_unuseditems = _this$props2.items,
|
|
403
|
+
search = _this$props2.search,
|
|
404
|
+
searchFormat = _this$props2.searchFormat,
|
|
405
|
+
onTableChange = _this$props2.onTableChange,
|
|
406
|
+
executeQueryOptions = _this$props2.executeQueryOptions,
|
|
407
|
+
allowNeutralSort = _this$props2.allowNeutralSort,
|
|
408
|
+
childrenBetween = _this$props2.childrenBetween,
|
|
409
|
+
rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded3);
|
|
383
410
|
var _this$state3 = this.state,
|
|
384
411
|
pageIndex = _this$state3.pageIndex,
|
|
385
412
|
pageSize = _this$state3.pageSize,
|
|
@@ -503,7 +530,8 @@ exports.EuiInMemoryTable = EuiInMemoryTable;
|
|
|
503
530
|
(0, _defineProperty2.default)(EuiInMemoryTable, "contextType", _component_defaults.EuiComponentDefaultsContext);
|
|
504
531
|
(0, _defineProperty2.default)(EuiInMemoryTable, "defaultProps", {
|
|
505
532
|
responsive: true,
|
|
506
|
-
tableLayout: 'fixed'
|
|
533
|
+
tableLayout: 'fixed',
|
|
534
|
+
searchFormat: 'eql'
|
|
507
535
|
});
|
|
508
536
|
EuiInMemoryTable.propTypes = {
|
|
509
537
|
className: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]), _propTypes.default.string]),
|
|
@@ -992,6 +1020,29 @@ EuiInMemoryTable.propTypes = {
|
|
|
992
1020
|
"data-test-subj": _propTypes.default.string,
|
|
993
1021
|
css: _propTypes.default.any
|
|
994
1022
|
}).isRequired]),
|
|
1023
|
+
/**
|
|
1024
|
+
* By default, tables use `eql` format for search which allows using advanced filters.
|
|
1025
|
+
*
|
|
1026
|
+
* However, certain special characters (such as quotes, parentheses, and colons)
|
|
1027
|
+
* are reserved for EQL syntax and will error if used.
|
|
1028
|
+
* If your table does not require filter search and instead requires searching for certain
|
|
1029
|
+
* symbols, use a plain `text` search format instead (note that filters will be ignored
|
|
1030
|
+
* in this format).
|
|
1031
|
+
*
|
|
1032
|
+
* @default "eql"
|
|
1033
|
+
*/
|
|
1034
|
+
/**
|
|
1035
|
+
* By default, tables use `eql` format for search which allows using advanced filters.
|
|
1036
|
+
*
|
|
1037
|
+
* However, certain special characters (such as quotes, parentheses, and colons)
|
|
1038
|
+
* are reserved for EQL syntax and will error if used.
|
|
1039
|
+
* If your table does not require filter search and instead requires searching for certain
|
|
1040
|
+
* symbols, use a plain `text` search format instead (note that filters will be ignored
|
|
1041
|
+
* in this format).
|
|
1042
|
+
*
|
|
1043
|
+
* @default "eql"
|
|
1044
|
+
*/
|
|
1045
|
+
searchFormat: _propTypes.default.oneOf(["eql", "text"]),
|
|
995
1046
|
/**
|
|
996
1047
|
* Configures #Pagination
|
|
997
1048
|
*/
|
|
@@ -13,14 +13,14 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
13
13
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
14
14
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
15
|
var _services = require("../../services");
|
|
16
|
+
var _accessibility = require("../../services/accessibility");
|
|
17
|
+
var _href_validator = require("../../services/security/href_validator");
|
|
16
18
|
var _text = require("../text");
|
|
17
19
|
var _title = require("../title");
|
|
18
20
|
var _beta_badge = require("../badge/beta_badge");
|
|
19
|
-
var _card_select = require("./card_select");
|
|
20
|
-
var _accessibility = require("../../services/accessibility");
|
|
21
|
-
var _href_validator = require("../../services/security/href_validator");
|
|
22
21
|
var _panel = require("../panel");
|
|
23
22
|
var _spacer = require("../spacer");
|
|
23
|
+
var _card_select = require("./card_select");
|
|
24
24
|
var _card = require("./card.styles");
|
|
25
25
|
var _react2 = require("@emotion/react");
|
|
26
26
|
var _excluded = ["className", "description", "isDisabled", "title", "titleElement", "titleSize", "icon", "image", "children", "footer", "onClick", "href", "rel", "target", "textAlign", "betaBadgeProps", "layout", "selectable", "display", "paddingSize"],
|