@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.
Files changed (103) hide show
  1. package/dist/eui_theme_dark.css +0 -142
  2. package/dist/eui_theme_dark.min.css +1 -1
  3. package/dist/eui_theme_light.css +0 -142
  4. package/dist/eui_theme_light.min.css +1 -1
  5. package/es/components/basic_table/in_memory_table.js +85 -34
  6. package/es/components/card/card.js +3 -3
  7. package/es/components/combo_box/combo_box.js +16 -4
  8. package/es/components/combo_box/combo_box_input/combo_box_input.js +4 -1
  9. package/es/components/combo_box/combo_box_input/combo_box_pill.js +5 -1
  10. package/es/components/combo_box/combo_box_options_list/combo_box_option.js +2 -0
  11. package/es/components/combo_box/combo_box_options_list/combo_box_options_list.js +59 -15
  12. package/es/components/datagrid/controls/column_selector.js +5 -3
  13. package/es/components/datagrid/controls/column_sorting_draggable.js +4 -1
  14. package/es/components/description_list/description_list_title.js +0 -1
  15. package/es/components/description_list/description_list_title.styles.js +1 -1
  16. package/es/components/drag_and_drop/draggable.js +18 -23
  17. package/es/components/drag_and_drop/draggable.styles.js +56 -0
  18. package/es/components/drag_and_drop/droppable.js +24 -21
  19. package/es/components/drag_and_drop/droppable.styles.js +51 -0
  20. package/es/components/search_bar/search_box.js +54 -88
  21. package/es/components/table/table_pagination/table_pagination.js +1 -0
  22. package/es/test/rtl/custom_render.js +1 -1
  23. package/eui.d.ts +480 -420
  24. package/i18ntokens.json +142 -88
  25. package/lib/components/basic_table/in_memory_table.js +85 -34
  26. package/lib/components/card/card.js +3 -3
  27. package/lib/components/combo_box/combo_box.js +16 -4
  28. package/lib/components/combo_box/combo_box_input/combo_box_input.js +4 -1
  29. package/lib/components/combo_box/combo_box_input/combo_box_pill.js +5 -1
  30. package/lib/components/combo_box/combo_box_options_list/combo_box_option.js +2 -0
  31. package/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js +59 -15
  32. package/lib/components/datagrid/controls/column_selector.js +4 -2
  33. package/lib/components/datagrid/controls/column_sorting_draggable.js +4 -1
  34. package/lib/components/description_list/description_list_title.js +0 -1
  35. package/lib/components/description_list/description_list_title.styles.js +1 -1
  36. package/lib/components/drag_and_drop/draggable.js +17 -22
  37. package/lib/components/drag_and_drop/draggable.styles.js +62 -0
  38. package/lib/components/drag_and_drop/droppable.js +26 -22
  39. package/lib/components/drag_and_drop/droppable.styles.js +57 -0
  40. package/lib/components/search_bar/search_box.js +61 -93
  41. package/lib/components/table/table_pagination/table_pagination.js +1 -0
  42. package/lib/test/rtl/custom_render.js +2 -2
  43. package/optimize/es/components/basic_table/in_memory_table.js +62 -34
  44. package/optimize/es/components/card/card.js +3 -3
  45. package/optimize/es/components/combo_box/combo_box.js +6 -4
  46. package/optimize/es/components/combo_box/combo_box_input/combo_box_input.js +2 -1
  47. package/optimize/es/components/combo_box/combo_box_input/combo_box_pill.js +3 -1
  48. package/optimize/es/components/combo_box/combo_box_options_list/combo_box_options_list.js +49 -12
  49. package/optimize/es/components/datagrid/controls/column_selector.js +5 -3
  50. package/optimize/es/components/datagrid/controls/column_sorting_draggable.js +4 -1
  51. package/optimize/es/components/description_list/description_list_title.js +0 -1
  52. package/optimize/es/components/description_list/description_list_title.styles.js +1 -1
  53. package/optimize/es/components/drag_and_drop/draggable.js +17 -22
  54. package/optimize/es/components/drag_and_drop/draggable.styles.js +56 -0
  55. package/optimize/es/components/drag_and_drop/droppable.js +23 -20
  56. package/optimize/es/components/drag_and_drop/droppable.styles.js +51 -0
  57. package/optimize/es/components/search_bar/search_box.js +50 -83
  58. package/optimize/es/components/table/table_pagination/table_pagination.js +1 -0
  59. package/optimize/es/test/rtl/custom_render.js +1 -1
  60. package/optimize/lib/components/basic_table/in_memory_table.js +62 -34
  61. package/optimize/lib/components/card/card.js +3 -3
  62. package/optimize/lib/components/combo_box/combo_box.js +6 -4
  63. package/optimize/lib/components/combo_box/combo_box_input/combo_box_input.js +2 -1
  64. package/optimize/lib/components/combo_box/combo_box_input/combo_box_pill.js +3 -1
  65. package/optimize/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js +49 -12
  66. package/optimize/lib/components/datagrid/controls/column_selector.js +4 -2
  67. package/optimize/lib/components/datagrid/controls/column_sorting_draggable.js +4 -1
  68. package/optimize/lib/components/description_list/description_list_title.js +0 -1
  69. package/optimize/lib/components/description_list/description_list_title.styles.js +1 -1
  70. package/optimize/lib/components/drag_and_drop/draggable.js +16 -21
  71. package/optimize/lib/components/drag_and_drop/draggable.styles.js +62 -0
  72. package/optimize/lib/components/drag_and_drop/droppable.js +25 -21
  73. package/optimize/lib/components/drag_and_drop/droppable.styles.js +57 -0
  74. package/optimize/lib/components/search_bar/search_box.js +57 -89
  75. package/optimize/lib/components/table/table_pagination/table_pagination.js +1 -0
  76. package/optimize/lib/test/rtl/custom_render.js +2 -2
  77. package/package.json +4 -4
  78. package/src/components/combo_box/combo_box_input/_combo_box_pill.scss +0 -1
  79. package/src/components/index.scss +0 -1
  80. package/src/themes/amsterdam/overrides/_index.scss +0 -1
  81. package/test-env/components/basic_table/in_memory_table.js +85 -34
  82. package/test-env/components/card/card.js +3 -3
  83. package/test-env/components/combo_box/combo_box.js +16 -4
  84. package/test-env/components/combo_box/combo_box_input/combo_box_input.js +4 -1
  85. package/test-env/components/combo_box/combo_box_input/combo_box_pill.js +5 -1
  86. package/test-env/components/combo_box/combo_box_options_list/combo_box_option.js +2 -0
  87. package/test-env/components/combo_box/combo_box_options_list/combo_box_options_list.js +58 -14
  88. package/test-env/components/datagrid/controls/column_selector.js +4 -2
  89. package/test-env/components/datagrid/controls/column_sorting_draggable.js +4 -1
  90. package/test-env/components/description_list/description_list_title.js +0 -1
  91. package/test-env/components/description_list/description_list_title.styles.js +1 -1
  92. package/test-env/components/drag_and_drop/draggable.js +17 -22
  93. package/test-env/components/drag_and_drop/draggable.styles.js +62 -0
  94. package/test-env/components/drag_and_drop/droppable.js +26 -22
  95. package/test-env/components/drag_and_drop/droppable.styles.js +57 -0
  96. package/test-env/components/search_bar/search_box.js +60 -88
  97. package/test-env/components/table/table_pagination/table_pagination.js +1 -0
  98. package/test-env/test/rtl/custom_render.js +2 -2
  99. package/src/components/drag_and_drop/_draggable.scss +0 -41
  100. package/src/components/drag_and_drop/_droppable.scss +0 -40
  101. package/src/components/drag_and_drop/_index.scss +0 -3
  102. package/src/components/drag_and_drop/_variables.scss +0 -5
  103. 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 spacingToClassNameMap = {
27
- none: null,
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--isDisabled': dropIsDisabled,
68
- 'euiDroppable--isDraggingOver': snapshot.isDraggingOver,
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)("div", (0, _extends2.default)({}, provided.droppableProps, {
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: placeholderClasses
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
- 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); }; }
26
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /*
27
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
28
- * or more contributor license agreements. Licensed under the Elastic License
29
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
30
- * in compliance with, at your election, the Elastic License 2.0 or the Server
31
- * Side Public License, v 1.
32
- */
33
- var EuiSearchBox = /*#__PURE__*/function (_Component) {
34
- (0, _inherits2.default)(EuiSearchBox, _Component);
35
- var _super = _createSuper(EuiSearchBox);
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
- _this = _super.call.apply(_super, [this].concat(args));
43
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputElement", null);
44
- return _this;
45
- }
46
- (0, _createClass2.default)(EuiSearchBox, [{
47
- key: "componentDidUpdate",
48
- value: function componentDidUpdate(oldProps) {
49
- if (oldProps.query !== this.props.query && this.inputElement != null) {
50
- this.inputElement.value = this.props.query;
51
- this.inputElement.dispatchEvent(new Event('change'));
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
- key: "render",
56
- value: function render() {
57
- var _this2 = this;
58
- var _this$props = this.props,
59
- query = _this$props.query,
60
- incremental = _this$props.incremental,
61
- hint = _this$props.hint,
62
- rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
63
- var ariaLabel;
64
- if (incremental) {
65
- ariaLabel = 'This is a search bar. As you type, the results lower in the page will automatically filter.';
66
- } else {
67
- ariaLabel = 'This is a search bar. After typing your query, hit enter to filter the results lower in the page.';
68
- }
69
- var search = (0, _react2.jsx)(_form.EuiFieldSearch, (0, _extends2.default)({
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
- return search;
100
- }
101
- }]);
102
- return EuiSearchBox;
103
- }(_react.Component);
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 _components = require("../../components");
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: _components.EuiProvider
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.3.0",
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-commit": [
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": "^7.6.0",
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-commit": "^1.2.2",
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",
@@ -24,7 +24,6 @@
24
24
 
25
25
  &--plainText {
26
26
  @include euiFont;
27
- @include euiTextTruncate;
28
27
 
29
28
  line-height: $euiSizeL;
30
29
  font-size: $euiFontSizeS;
@@ -6,7 +6,6 @@
6
6
  @import 'control_bar/index';
7
7
  @import 'date_picker/index';
8
8
  @import 'datagrid/index';
9
- @import 'drag_and_drop/index';
10
9
  @import 'empty_prompt/index';
11
10
  @import 'form/index';
12
11
  @import 'markdown_editor/index';
@@ -1,6 +1,5 @@
1
1
  @import 'combo_box';
2
2
  @import 'data_grid';
3
- @import 'description_list';
4
3
  @import 'form_control_layout';
5
4
  @import 'form_control_layout_delimited';
6
5
  @import 'form_controls';
@@ -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 = ["onChange"],
29
- _excluded2 = ["columns", "loading", "message", "error", "selection", "isSelectable", "hasActions", "compressed", "pagination", "sorting", "itemIdToExpandedRowMap", "itemId", "rowProps", "cellProps", "tableLayout", "items", "search", "onTableChange", "executeQueryOptions", "allowNeutralSort", "childrenBetween"];
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 search = this.props.search;
266
- if (search) {
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, _excluded);
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
- return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_search_bar.EuiSearchBar, (0, _extends2.default)({
303
+ searchBar = (0, _react2.jsx)(_search_bar.EuiSearchBar, (0, _extends2.default)({
279
304
  onChange: this.onQueryChange
280
- }, searchBarProps)), (0, _react2.jsx)(_spacer.EuiSpacer, {
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$props = this.props,
361
- columns = _this$props.columns,
362
- loading = _this$props.loading,
363
- message = _this$props.message,
364
- error = _this$props.error,
365
- selection = _this$props.selection,
366
- isSelectable = _this$props.isSelectable,
367
- hasActions = _this$props.hasActions,
368
- compressed = _this$props.compressed,
369
- hasPagination = _this$props.pagination,
370
- hasSorting = _this$props.sorting,
371
- itemIdToExpandedRowMap = _this$props.itemIdToExpandedRowMap,
372
- itemId = _this$props.itemId,
373
- rowProps = _this$props.rowProps,
374
- cellProps = _this$props.cellProps,
375
- tableLayout = _this$props.tableLayout,
376
- _unuseditems = _this$props.items,
377
- search = _this$props.search,
378
- onTableChange = _this$props.onTableChange,
379
- executeQueryOptions = _this$props.executeQueryOptions,
380
- allowNeutralSort = _this$props.allowNeutralSort,
381
- childrenBetween = _this$props.childrenBetween,
382
- rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded2);
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"],