@elastic/eui 110.0.0 → 111.0.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 (237) hide show
  1. package/es/components/collapsible_nav/collapsible_nav.js +20 -101
  2. package/es/components/collapsible_nav_beta/collapsible_nav_beta.js +1 -0
  3. package/es/components/flyout/_flyout_overlay.js +52 -0
  4. package/es/components/flyout/_flyout_resize_button.js +32 -0
  5. package/es/components/flyout/{flyout_resizable.styles.js → _flyout_resize_button.styles.js} +11 -11
  6. package/es/components/flyout/const.js +42 -0
  7. package/es/components/flyout/flyout.component.js +481 -0
  8. package/es/components/flyout/flyout.js +77 -379
  9. package/es/components/flyout/flyout.styles.js +105 -7
  10. package/es/components/flyout/flyout_menu.js +241 -0
  11. package/es/components/flyout/flyout_menu.styles.js +19 -0
  12. package/{optimize/es/components/flyout/flyout_context.js → es/components/flyout/flyout_menu_context.js} +1 -7
  13. package/es/components/flyout/flyout_parent_context.js +36 -0
  14. package/es/components/flyout/flyout_resizable.js +33 -144
  15. package/es/components/flyout/hooks.js +25 -0
  16. package/es/components/flyout/index.js +5 -2
  17. package/es/components/flyout/manager/actions.js +153 -0
  18. package/es/components/flyout/manager/activity_stage.js +95 -0
  19. package/es/components/flyout/manager/const.js +56 -0
  20. package/es/components/flyout/manager/context.js +33 -0
  21. package/es/components/flyout/manager/flyout_child.js +75 -0
  22. package/es/components/flyout/manager/flyout_main.js +65 -0
  23. package/es/components/flyout/manager/flyout_main.styles.js +25 -0
  24. package/es/components/flyout/manager/flyout_managed.js +227 -0
  25. package/es/components/flyout/manager/flyout_managed.styles.js +69 -0
  26. package/es/components/flyout/manager/hooks.js +55 -0
  27. package/es/components/flyout/manager/index.js +31 -0
  28. package/es/components/flyout/manager/layout_mode.js +167 -0
  29. package/es/components/flyout/manager/provider.js +57 -0
  30. package/es/components/flyout/manager/reducer.js +320 -0
  31. package/es/components/flyout/manager/selectors.js +116 -0
  32. package/es/components/flyout/manager/store.js +113 -0
  33. package/es/components/flyout/manager/validation.js +85 -0
  34. package/es/components/flyout/use_flyout_resizable.js +149 -0
  35. package/es/components/flyout/use_flyout_z_index.js +46 -0
  36. package/es/components/overlay_mask/overlay_mask.js +13 -3
  37. package/es/components/overlay_mask/overlay_mask.styles.js +11 -2
  38. package/es/components/provider/provider.js +2 -1
  39. package/eui.d.ts +1484 -921
  40. package/i18ntokens.json +1207 -1153
  41. package/lib/components/collapsible_nav/collapsible_nav.js +20 -101
  42. package/lib/components/collapsible_nav_beta/collapsible_nav_beta.js +1 -0
  43. package/lib/components/flyout/_flyout_overlay.js +59 -0
  44. package/lib/components/flyout/_flyout_resize_button.js +38 -0
  45. package/{test-env/components/flyout/flyout_resizable.styles.js → lib/components/flyout/_flyout_resize_button.styles.js} +12 -12
  46. package/lib/components/flyout/const.js +49 -0
  47. package/lib/components/flyout/flyout.component.js +488 -0
  48. package/lib/components/flyout/flyout.js +102 -379
  49. package/lib/components/flyout/flyout.styles.js +105 -7
  50. package/lib/components/flyout/flyout_menu.js +243 -0
  51. package/lib/components/flyout/flyout_menu.styles.js +25 -0
  52. package/{optimize/lib/components/flyout/flyout_context.js → lib/components/flyout/flyout_menu_context.js} +2 -7
  53. package/lib/components/flyout/flyout_parent_context.js +43 -0
  54. package/lib/components/flyout/flyout_resizable.js +36 -147
  55. package/lib/components/flyout/hooks.js +30 -0
  56. package/lib/components/flyout/index.js +21 -14
  57. package/lib/components/flyout/manager/actions.js +159 -0
  58. package/lib/components/flyout/manager/activity_stage.js +101 -0
  59. package/lib/components/flyout/manager/const.js +62 -0
  60. package/lib/components/flyout/manager/context.js +41 -0
  61. package/lib/components/flyout/manager/flyout_child.js +80 -0
  62. package/lib/components/flyout/manager/flyout_main.js +70 -0
  63. package/lib/components/flyout/manager/flyout_main.styles.js +31 -0
  64. package/lib/components/flyout/manager/flyout_managed.js +233 -0
  65. package/lib/components/flyout/manager/flyout_managed.styles.js +73 -0
  66. package/lib/components/flyout/manager/hooks.js +131 -0
  67. package/lib/components/flyout/manager/index.js +168 -0
  68. package/lib/components/flyout/manager/layout_mode.js +171 -0
  69. package/lib/components/flyout/manager/provider.js +63 -0
  70. package/lib/components/flyout/manager/reducer.js +325 -0
  71. package/lib/components/flyout/manager/selectors.js +122 -0
  72. package/lib/components/flyout/manager/store.js +120 -0
  73. package/lib/components/flyout/manager/validation.js +94 -0
  74. package/lib/components/flyout/use_flyout_resizable.js +153 -0
  75. package/lib/components/flyout/use_flyout_z_index.js +51 -0
  76. package/lib/components/overlay_mask/overlay_mask.js +12 -2
  77. package/lib/components/overlay_mask/overlay_mask.styles.js +11 -4
  78. package/lib/components/provider/provider.js +2 -1
  79. package/optimize/es/components/collapsible_nav/collapsible_nav.js +1 -0
  80. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_beta.js +1 -0
  81. package/optimize/es/components/flyout/_flyout_overlay.js +52 -0
  82. package/optimize/es/components/flyout/_flyout_resize_button.js +31 -0
  83. package/optimize/es/components/flyout/{flyout_resizable.styles.js → _flyout_resize_button.styles.js} +11 -11
  84. package/optimize/es/components/flyout/const.js +42 -0
  85. package/optimize/es/components/flyout/flyout.component.js +469 -0
  86. package/optimize/es/components/flyout/flyout.js +53 -349
  87. package/optimize/es/components/flyout/flyout.styles.js +102 -7
  88. package/optimize/es/components/flyout/flyout_menu.js +162 -0
  89. package/optimize/es/components/flyout/flyout_menu.styles.js +19 -0
  90. package/{es/components/flyout/flyout_context.js → optimize/es/components/flyout/flyout_menu_context.js} +1 -7
  91. package/optimize/es/components/flyout/flyout_parent_context.js +36 -0
  92. package/optimize/es/components/flyout/flyout_resizable.js +7 -138
  93. package/optimize/es/components/flyout/hooks.js +25 -0
  94. package/optimize/es/components/flyout/index.js +5 -2
  95. package/optimize/es/components/flyout/manager/actions.js +153 -0
  96. package/optimize/es/components/flyout/manager/activity_stage.js +95 -0
  97. package/optimize/es/components/flyout/manager/const.js +56 -0
  98. package/optimize/es/components/flyout/manager/context.js +33 -0
  99. package/optimize/es/components/flyout/manager/flyout_child.js +71 -0
  100. package/optimize/es/components/flyout/manager/flyout_main.js +61 -0
  101. package/optimize/es/components/flyout/manager/flyout_main.styles.js +25 -0
  102. package/optimize/es/components/flyout/manager/flyout_managed.js +223 -0
  103. package/optimize/es/components/flyout/manager/flyout_managed.styles.js +69 -0
  104. package/optimize/es/components/flyout/manager/hooks.js +55 -0
  105. package/optimize/es/components/flyout/manager/index.js +31 -0
  106. package/optimize/es/components/flyout/manager/layout_mode.js +162 -0
  107. package/optimize/es/components/flyout/manager/provider.js +53 -0
  108. package/optimize/es/components/flyout/manager/reducer.js +312 -0
  109. package/optimize/es/components/flyout/manager/selectors.js +116 -0
  110. package/optimize/es/components/flyout/manager/store.js +113 -0
  111. package/optimize/es/components/flyout/manager/types.js +1 -0
  112. package/optimize/es/components/flyout/manager/validation.js +85 -0
  113. package/optimize/es/components/flyout/types.js +1 -0
  114. package/optimize/es/components/flyout/use_flyout_resizable.js +144 -0
  115. package/optimize/es/components/flyout/use_flyout_z_index.js +46 -0
  116. package/optimize/es/components/overlay_mask/overlay_mask.js +13 -3
  117. package/optimize/es/components/overlay_mask/overlay_mask.styles.js +11 -2
  118. package/optimize/es/components/provider/provider.js +2 -1
  119. package/optimize/lib/components/collapsible_nav/collapsible_nav.js +1 -0
  120. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_beta.js +1 -0
  121. package/optimize/lib/components/flyout/_flyout_overlay.js +62 -0
  122. package/optimize/lib/components/flyout/_flyout_resize_button.js +37 -0
  123. package/{lib/components/flyout/flyout_resizable.styles.js → optimize/lib/components/flyout/_flyout_resize_button.styles.js} +12 -12
  124. package/optimize/lib/components/flyout/const.js +49 -0
  125. package/optimize/lib/components/flyout/flyout.component.js +477 -0
  126. package/optimize/lib/components/flyout/flyout.js +77 -349
  127. package/optimize/lib/components/flyout/flyout.styles.js +102 -7
  128. package/optimize/lib/components/flyout/flyout_menu.js +168 -0
  129. package/optimize/lib/components/flyout/flyout_menu.styles.js +25 -0
  130. package/{lib/components/flyout/flyout_context.js → optimize/lib/components/flyout/flyout_menu_context.js} +2 -7
  131. package/optimize/lib/components/flyout/flyout_parent_context.js +43 -0
  132. package/optimize/lib/components/flyout/flyout_resizable.js +9 -139
  133. package/optimize/lib/components/flyout/hooks.js +30 -0
  134. package/optimize/lib/components/flyout/index.js +21 -14
  135. package/optimize/lib/components/flyout/manager/actions.js +159 -0
  136. package/optimize/lib/components/flyout/manager/activity_stage.js +101 -0
  137. package/optimize/lib/components/flyout/manager/const.js +62 -0
  138. package/optimize/lib/components/flyout/manager/context.js +41 -0
  139. package/optimize/lib/components/flyout/manager/flyout_child.js +76 -0
  140. package/optimize/lib/components/flyout/manager/flyout_main.js +66 -0
  141. package/optimize/lib/components/flyout/manager/flyout_main.styles.js +31 -0
  142. package/optimize/lib/components/flyout/manager/flyout_managed.js +231 -0
  143. package/optimize/lib/components/flyout/manager/flyout_managed.styles.js +74 -0
  144. package/optimize/lib/components/flyout/manager/hooks.js +131 -0
  145. package/optimize/lib/components/flyout/manager/index.js +168 -0
  146. package/optimize/lib/components/flyout/manager/layout_mode.js +169 -0
  147. package/optimize/lib/components/flyout/manager/provider.js +61 -0
  148. package/optimize/lib/components/flyout/manager/reducer.js +318 -0
  149. package/optimize/lib/components/flyout/manager/selectors.js +122 -0
  150. package/optimize/lib/components/flyout/manager/store.js +120 -0
  151. package/optimize/lib/components/flyout/manager/validation.js +94 -0
  152. package/optimize/lib/components/flyout/types.js +5 -0
  153. package/optimize/lib/components/flyout/use_flyout_resizable.js +151 -0
  154. package/optimize/lib/components/flyout/use_flyout_z_index.js +51 -0
  155. package/optimize/lib/components/overlay_mask/overlay_mask.js +12 -2
  156. package/optimize/lib/components/overlay_mask/overlay_mask.styles.js +11 -4
  157. package/optimize/lib/components/provider/provider.js +2 -1
  158. package/package.json +5 -4
  159. package/test-env/components/collapsible_nav/collapsible_nav.js +20 -101
  160. package/test-env/components/collapsible_nav_beta/collapsible_nav_beta.js +1 -0
  161. package/test-env/components/flyout/_flyout_overlay.js +62 -0
  162. package/test-env/components/flyout/_flyout_resize_button.js +37 -0
  163. package/{optimize/lib/components/flyout/flyout_resizable.styles.js → test-env/components/flyout/_flyout_resize_button.styles.js} +12 -12
  164. package/test-env/components/flyout/const.js +49 -0
  165. package/test-env/components/flyout/flyout.component.js +477 -0
  166. package/test-env/components/flyout/flyout.styles.js +102 -7
  167. package/test-env/components/flyout/flyout_menu.js +241 -0
  168. package/test-env/components/flyout/flyout_menu.styles.js +25 -0
  169. package/test-env/components/flyout/{flyout_context.js → flyout_menu_context.js} +2 -7
  170. package/test-env/components/flyout/flyout_parent_context.js +43 -0
  171. package/test-env/components/flyout/flyout_resizable.js +35 -139
  172. package/test-env/components/flyout/hooks.js +30 -0
  173. package/test-env/components/flyout/index.js +21 -14
  174. package/test-env/components/flyout/manager/actions.js +159 -0
  175. package/test-env/components/flyout/manager/activity_stage.js +101 -0
  176. package/test-env/components/flyout/manager/const.js +62 -0
  177. package/test-env/components/flyout/manager/context.js +41 -0
  178. package/test-env/components/flyout/manager/flyout_child.js +76 -0
  179. package/test-env/components/flyout/manager/flyout_main.js +66 -0
  180. package/test-env/components/flyout/manager/flyout_main.styles.js +31 -0
  181. package/test-env/components/flyout/manager/flyout_managed.js +231 -0
  182. package/test-env/components/flyout/manager/flyout_managed.styles.js +74 -0
  183. package/test-env/components/flyout/manager/hooks.js +131 -0
  184. package/test-env/components/flyout/manager/index.js +168 -0
  185. package/test-env/components/flyout/manager/layout_mode.js +169 -0
  186. package/test-env/components/flyout/manager/provider.js +61 -0
  187. package/test-env/components/flyout/manager/reducer.js +318 -0
  188. package/test-env/components/flyout/manager/selectors.js +122 -0
  189. package/test-env/components/flyout/manager/store.js +120 -0
  190. package/test-env/components/flyout/manager/types.js +5 -0
  191. package/test-env/components/flyout/manager/validation.js +94 -0
  192. package/test-env/components/flyout/types.js +5 -0
  193. package/test-env/components/flyout/use_flyout_resizable.js +151 -0
  194. package/test-env/components/flyout/use_flyout_z_index.js +51 -0
  195. package/test-env/components/overlay_mask/overlay_mask.js +12 -2
  196. package/test-env/components/overlay_mask/overlay_mask.styles.js +11 -4
  197. package/test-env/components/provider/provider.js +2 -1
  198. package/es/components/flyout/flyout_child.js +0 -223
  199. package/es/components/flyout/flyout_child.styles.js +0 -32
  200. package/es/components/flyout/flyout_child_manager.js +0 -114
  201. package/es/components/flyout/sessions/flyout_provider.js +0 -95
  202. package/es/components/flyout/sessions/flyout_reducer.js +0 -195
  203. package/es/components/flyout/sessions/index.js +0 -10
  204. package/es/components/flyout/sessions/use_eui_flyout.js +0 -82
  205. package/lib/components/flyout/flyout_child.js +0 -231
  206. package/lib/components/flyout/flyout_child.styles.js +0 -38
  207. package/lib/components/flyout/flyout_child_manager.js +0 -122
  208. package/lib/components/flyout/sessions/flyout_provider.js +0 -102
  209. package/lib/components/flyout/sessions/flyout_reducer.js +0 -202
  210. package/lib/components/flyout/sessions/index.js +0 -25
  211. package/lib/components/flyout/sessions/use_eui_flyout.js +0 -88
  212. package/optimize/es/components/flyout/flyout_child.js +0 -178
  213. package/optimize/es/components/flyout/flyout_child.styles.js +0 -32
  214. package/optimize/es/components/flyout/flyout_child_manager.js +0 -100
  215. package/optimize/es/components/flyout/sessions/flyout_provider.js +0 -90
  216. package/optimize/es/components/flyout/sessions/flyout_reducer.js +0 -187
  217. package/optimize/es/components/flyout/sessions/index.js +0 -10
  218. package/optimize/es/components/flyout/sessions/use_eui_flyout.js +0 -82
  219. package/optimize/lib/components/flyout/flyout_child.js +0 -186
  220. package/optimize/lib/components/flyout/flyout_child.styles.js +0 -38
  221. package/optimize/lib/components/flyout/flyout_child_manager.js +0 -110
  222. package/optimize/lib/components/flyout/sessions/flyout_provider.js +0 -100
  223. package/optimize/lib/components/flyout/sessions/flyout_reducer.js +0 -195
  224. package/optimize/lib/components/flyout/sessions/index.js +0 -25
  225. package/optimize/lib/components/flyout/sessions/use_eui_flyout.js +0 -88
  226. package/test-env/components/flyout/flyout_child.js +0 -230
  227. package/test-env/components/flyout/flyout_child.styles.js +0 -38
  228. package/test-env/components/flyout/flyout_child_manager.js +0 -119
  229. package/test-env/components/flyout/sessions/flyout_provider.js +0 -100
  230. package/test-env/components/flyout/sessions/flyout_reducer.js +0 -195
  231. package/test-env/components/flyout/sessions/index.js +0 -25
  232. package/test-env/components/flyout/sessions/use_eui_flyout.js +0 -88
  233. /package/es/components/flyout/{sessions → manager}/types.js +0 -0
  234. /package/{optimize/es/components/flyout/sessions → es/components/flyout}/types.js +0 -0
  235. /package/lib/components/flyout/{sessions → manager}/types.js +0 -0
  236. /package/{optimize/lib/components/flyout/sessions → lib/components/flyout}/types.js +0 -0
  237. /package/{test-env/components/flyout/sessions → optimize/lib/components/flyout/manager}/types.js +0 -0
@@ -1,230 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.EuiFlyoutChild = void 0;
9
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
- var _react = _interopRequireWildcard(require("react"));
12
- var _propTypes = _interopRequireDefault(require("prop-types"));
13
- var _classnames = _interopRequireDefault(require("classnames"));
14
- var _services = require("../../services");
15
- var _flyout_child = require("./flyout_child.styles");
16
- var _flyout_close_button = require("./_flyout_close_button");
17
- var _flyout_context = require("./flyout_context");
18
- var _flyout_body = require("./flyout_body");
19
- var _focus_trap = require("../focus_trap");
20
- var _react2 = require("@emotion/react");
21
- var _excluded = ["children", "backgroundStyle", "className", "banner", "hideCloseButton", "onClose", "scrollableTabIndex", "size"];
22
- /*
23
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
24
- * or more contributor license agreements. Licensed under the Elastic License
25
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
26
- * in compliance with, at your election, the Elastic License 2.0 or the Server
27
- * Side Public License, v 1.
28
- */
29
- /**
30
- * Props used to render and configure the child flyout panel
31
- */
32
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
33
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
34
- /**
35
- * The child flyout is a panel that appears to the left of the parent flyout.
36
- * It is only visible when the parent flyout is open.
37
- */
38
- var EuiFlyoutChild = exports.EuiFlyoutChild = function EuiFlyoutChild(_ref) {
39
- var children = _ref.children,
40
- _ref$backgroundStyle = _ref.backgroundStyle,
41
- backgroundStyle = _ref$backgroundStyle === void 0 ? 'default' : _ref$backgroundStyle,
42
- className = _ref.className,
43
- banner = _ref.banner,
44
- _ref$hideCloseButton = _ref.hideCloseButton,
45
- hideCloseButton = _ref$hideCloseButton === void 0 ? false : _ref$hideCloseButton,
46
- onClose = _ref.onClose,
47
- _ref$scrollableTabInd = _ref.scrollableTabIndex,
48
- scrollableTabIndex = _ref$scrollableTabInd === void 0 ? 0 : _ref$scrollableTabInd,
49
- _ref$size = _ref.size,
50
- size = _ref$size === void 0 ? 's' : _ref$size,
51
- rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
52
- var flyoutContext = (0, _react.useContext)(_flyout_context.EuiFlyoutContext);
53
- if (!flyoutContext) {
54
- throw new Error('EuiFlyoutChild must be used as a child of EuiFlyout.');
55
- }
56
- var isChildFlyoutOpen = flyoutContext.isChildFlyoutOpen,
57
- setIsChildFlyoutOpen = flyoutContext.setIsChildFlyoutOpen,
58
- parentSize = flyoutContext.parentSize;
59
- (0, _react.useEffect)(function () {
60
- setIsChildFlyoutOpen === null || setIsChildFlyoutOpen === void 0 || setIsChildFlyoutOpen(true);
61
- return function () {
62
- setIsChildFlyoutOpen === null || setIsChildFlyoutOpen === void 0 || setIsChildFlyoutOpen(false);
63
- };
64
- }, [setIsChildFlyoutOpen]);
65
- if (_react.default.Children.count(children) === 0) {
66
- console.warn('EuiFlyoutChild was rendered with no children!');
67
- }
68
- if (parentSize === 'm' && size === 'm') {
69
- throw new Error('When the parent EuiFlyout size is "m", the EuiFlyoutChild size cannot be "m". Please use size "s" for the EuiFlyoutChild.');
70
- }
71
- var handleClose = function handleClose(event) {
72
- setIsChildFlyoutOpen === null || setIsChildFlyoutOpen === void 0 || setIsChildFlyoutOpen(false);
73
- onClose(event);
74
- };
75
- var flyoutTitleText;
76
- var hasDescribedByBody = false;
77
- _react.Children.forEach(children, function (child) {
78
- if ( /*#__PURE__*/_react.default.isValidElement(child)) {
79
- var _child$type;
80
- if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'EuiFlyoutHeader') {
81
- // Attempt to extract string content from header for ARIA
82
- var headerChildren = child.props.children;
83
- if (typeof headerChildren === 'string') {
84
- flyoutTitleText = headerChildren;
85
- } else if ( /*#__PURE__*/_react.default.isValidElement(headerChildren) &&
86
- // Check if props exist and children is a string
87
- typeof headerChildren.props.children === 'string') {
88
- flyoutTitleText = headerChildren.props.children;
89
- } else if (Array.isArray(headerChildren)) {
90
- // Find the first string child if headerChildren is an array
91
- flyoutTitleText = headerChildren.find(function (cNode) {
92
- return typeof cNode === 'string';
93
- });
94
- }
95
- }
96
- if (child.type === _flyout_body.EuiFlyoutBody) {
97
- hasDescribedByBody = true;
98
- }
99
- }
100
- });
101
- var titleIdGenerated = (0, _services.useGeneratedHtmlId)({
102
- prefix: 'euiFlyoutChildTitle'
103
- });
104
- var bodyIdGenerated = (0, _services.useGeneratedHtmlId)({
105
- prefix: 'euiFlyoutChildBody'
106
- });
107
- var ariaLabelledBy = flyoutTitleText ? titleIdGenerated : undefined;
108
- var ariaDescribedBy = hasDescribedByBody ? bodyIdGenerated : undefined;
109
- // Use existing aria-label if provided, otherwise fallback if no labelledby can be derived
110
- var ariaLabel = rest['aria-label'] || (!ariaLabelledBy && !flyoutTitleText ? 'Flyout panel' : undefined);
111
- var processedChildren = (0, _react.useMemo)(function () {
112
- return _react.Children.map(children, function (child) {
113
- if ( /*#__PURE__*/_react.default.isValidElement(child)) {
114
- var _child$type2, _child$type3;
115
- if ((child.type === _flyout_body.EuiFlyoutBody || ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === 'EuiFlyoutBody') && hasDescribedByBody) {
116
- return /*#__PURE__*/_react.default.cloneElement(child, {
117
- id: bodyIdGenerated
118
- });
119
- }
120
- // If EuiFlyoutHeader is found and we derived flyoutTitleText, set its ID
121
- if (((_child$type3 = child.type) === null || _child$type3 === void 0 ? void 0 : _child$type3.displayName) === 'EuiFlyoutHeader' && flyoutTitleText && ariaLabelledBy) {
122
- return /*#__PURE__*/_react.default.cloneElement(child, {
123
- id: titleIdGenerated
124
- });
125
- }
126
- }
127
- return child;
128
- });
129
- }, [children, bodyIdGenerated, titleIdGenerated, hasDescribedByBody, flyoutTitleText, ariaLabelledBy]);
130
- var flyoutWrapperRef = (0, _react.useRef)(null);
131
- var classes = (0, _classnames.default)('euiFlyoutChild', className);
132
- var styles = (0, _services.useEuiMemoizedStyles)(_flyout_child.euiFlyoutChildStyles);
133
- var childLayoutMode = flyoutContext.childLayoutMode,
134
- parentFlyoutRef = flyoutContext.parentFlyoutRef;
135
- var flyoutChildCss = [styles.euiFlyoutChild, backgroundStyle === 'shaded' ? styles.backgroundShaded : styles.backgroundDefault, size === 's' ? styles.s : styles.m, childLayoutMode === 'side-by-side' ? styles.sidePosition : styles.stackedPosition];
136
- var onKeyDown = (0, _react.useCallback)(function (event) {
137
- if (isChildFlyoutOpen && event.key === _services.keys.ESCAPE) {
138
- event.preventDefault();
139
- setIsChildFlyoutOpen === null || setIsChildFlyoutOpen === void 0 || setIsChildFlyoutOpen(false);
140
- onClose(event.nativeEvent);
141
- }
142
- }, [isChildFlyoutOpen, onClose, setIsChildFlyoutOpen]);
143
- return (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
144
- returnFocus: function returnFocus() {
145
- if (parentFlyoutRef !== null && parentFlyoutRef !== void 0 && parentFlyoutRef.current) {
146
- parentFlyoutRef.current.focus();
147
- return false; // We've handled focus
148
- }
149
- return true;
150
- },
151
- shards: [],
152
- disabled: false
153
- }, (0, _react2.jsx)("div", (0, _extends2.default)({
154
- ref: flyoutWrapperRef,
155
- className: classes,
156
- css: flyoutChildCss,
157
- "data-test-subj": "euiFlyoutChild",
158
- role: "dialog",
159
- "aria-modal": "true",
160
- "aria-label": ariaLabel,
161
- "aria-labelledby": ariaLabelledBy,
162
- "aria-describedby": ariaDescribedBy,
163
- tabIndex: -1,
164
- onKeyDown: onKeyDown // used as generic container event handler
165
- }, rest), flyoutTitleText && !ariaLabelledBy && (0, _react2.jsx)("h2", {
166
- id: titleIdGenerated,
167
- className: "euiScreenReaderOnly"
168
- }, flyoutTitleText), !hideCloseButton && (0, _react2.jsx)(_flyout_close_button.EuiFlyoutCloseButton, {
169
- className: "euiFlyoutChild__closeButton",
170
- onClose: handleClose,
171
- side: "right",
172
- closeButtonPosition: "inside",
173
- "data-test-subj": "euiFlyoutChildCloseButton"
174
- }), (0, _react2.jsx)("div", {
175
- tabIndex: scrollableTabIndex,
176
- className: "euiFlyoutChild__overflow",
177
- css: styles.overflow.overflow
178
- }, banner && (0, _react2.jsx)("div", {
179
- className: "euiFlyoutChild__banner",
180
- css: styles.banner,
181
- "data-test-subj": "euiFlyoutChildBanner"
182
- }, banner), (0, _react2.jsx)("div", {
183
- className: "euiFlyoutChild__overflowContent",
184
- css: styles.overflow.wrapper
185
- }, processedChildren))));
186
- };
187
- EuiFlyoutChild.propTypes = {
188
- /**
189
- * Called when the child panel's close button is clicked
190
- */
191
- onClose: _propTypes.default.func.isRequired,
192
- /**
193
- * Use to display a banner at the top of the child. It is suggested to use `EuiCallOut` for it.
194
- */
195
- banner: _propTypes.default.node,
196
- /**
197
- * Hides the default close button. You must provide another close button somewhere within the child flyout.
198
- * @default false
199
- */
200
- hideCloseButton: _propTypes.default.bool,
201
- /**
202
- * [Scrollable regions (or their children) should be focusable](https://dequeuniversity.com/rules/axe/4.0/scrollable-region-focusable)
203
- * to allow keyboard users to scroll the region via arrow keys.
204
- *
205
- * By default, EuiFlyoutChild's scroll overflow wrapper sets a `tabIndex` of `0`.
206
- * If you know your flyout child content already contains focusable children
207
- * that satisfy keyboard accessibility requirements, you can use this prop
208
- * to override this default.
209
- */
210
- scrollableTabIndex: _propTypes.default.number,
211
- /**
212
- * Size of the child flyout panel.
213
- * When the parent flyout is 'm', child is limited to 's'.
214
- * @default 's'
215
- */
216
- size: _propTypes.default.oneOf(["s", "m"]),
217
- /*
218
- * The background of the child flyout can be optionally shaded. Use `shaded` to add the shading.
219
- */
220
- backgroundStyle: _propTypes.default.oneOf(["shaded", "default"]),
221
- /**
222
- * Children are implicitly part of FunctionComponent, but good to have if props type is standalone.
223
- */
224
- children: _propTypes.default.node,
225
- className: _propTypes.default.string,
226
- "aria-label": _propTypes.default.string,
227
- "data-test-subj": _propTypes.default.string,
228
- css: _propTypes.default.any
229
- };
230
- EuiFlyoutChild.displayName = 'EuiFlyoutChild';
@@ -1,38 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.euiFlyoutChildStyles = void 0;
7
- var _react = require("@emotion/react");
8
- var _global_styling = require("../../global_styling");
9
- var _flyout = require("./flyout.styles");
10
- /*
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
-
18
- var euiFlyoutChildStyles = exports.euiFlyoutChildStyles = function euiFlyoutChildStyles(euiThemeContext) {
19
- var euiTheme = euiThemeContext.euiTheme;
20
- return {
21
- // Base styles for the child flyout
22
- euiFlyoutChild: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:0;inset-inline-start:0;block-size:100%;display:flex;flex-direction:column;", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), " ", (0, _global_styling.logicalCSS)('height', '100%'), " z-index:", Number(euiTheme.levels.flyout) + 1, ";border-inline-start:", euiTheme.border.thin, ";", (0, _flyout.maxedFlyoutWidth)(euiThemeContext), ";;label:euiFlyoutChild;"),
23
- backgroundDefault: /*#__PURE__*/(0, _react.css)("background:", euiTheme.colors.backgroundBasePlain, ";;label:backgroundDefault;"),
24
- backgroundShaded: /*#__PURE__*/(0, _react.css)("background:", euiTheme.colors.backgroundBaseSubdued, ";;label:backgroundShaded;"),
25
- // Position variants based on screen size
26
- sidePosition: /*#__PURE__*/(0, _react.css)("transform:translateX(-100%);border-inline-end:", euiTheme.border.thin, ";;label:sidePosition;"),
27
- stackedPosition: /*#__PURE__*/(0, _react.css)("inset-inline-end:0;inline-size:100%;border-block-end:", euiTheme.border.thin, ";;label:stackedPosition;"),
28
- s: /*#__PURE__*/(0, _react.css)((0, _flyout.composeFlyoutSizing)(euiThemeContext, 's'), ";;label:s;"),
29
- m: /*#__PURE__*/(0, _react.css)((0, _flyout.composeFlyoutSizing)(euiThemeContext, 'm'), ";;label:m;"),
30
- overflow: {
31
- overflow: /*#__PURE__*/(0, _react.css)("flex-grow:1;display:flex;flex-direction:column;", (0, _global_styling.euiYScroll)(euiThemeContext), ";;label:overflow;"),
32
- wrapper: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;flex-grow:1;", (0, _global_styling.logicalCSS)('overflow-x', 'auto'), ";;label:wrapper;")
33
- },
34
- banner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSSWithFallback)('overflow-x', 'hidden'), " ", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
35
- preferred: (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin)
36
- }), ";;label:banner;")
37
- };
38
- };
@@ -1,119 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.EuiFlyoutChildProvider = void 0;
9
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
- var _react = _interopRequireWildcard(require("react"));
11
- var _propTypes = _interopRequireDefault(require("prop-types"));
12
- var _services = require("../../services");
13
- var _flyout_context = require("./flyout_context");
14
- var _react2 = require("@emotion/react");
15
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
16
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
17
- /*
18
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
19
- * or more contributor license agreements. Licensed under the Elastic License
20
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
21
- * in compliance with, at your election, the Elastic License 2.0 or the Server
22
- * Side Public License, v 1.
23
- */
24
-
25
- /**
26
- * An intermediate component between EuiFlyout and EuiFlyoutChild.
27
- * It is responsible for managing the state of the child flyout, and passing it to EuiFlyoutContext.
28
- * It removes the responsibility of managing child flyout state from EuiFlyout, which is especially important there might not be a child flyout.
29
- */
30
- var EuiFlyoutChildProvider = exports.EuiFlyoutChildProvider = function EuiFlyoutChildProvider(_ref) {
31
- var parentSize = _ref.parentSize,
32
- parentFlyoutRef = _ref.parentFlyoutRef,
33
- childElement = _ref.childElement,
34
- childrenToRender = _ref.childrenToRender,
35
- reportIsChildOpen = _ref.reportIsChildOpen,
36
- reportChildLayoutMode = _ref.reportChildLayoutMode;
37
- var _useEuiTheme = (0, _services.useEuiTheme)(),
38
- euiTheme = _useEuiTheme.euiTheme;
39
- var _useState = (0, _react.useState)(false),
40
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
41
- isChildFlyoutOpen = _useState2[0],
42
- setIsChildFlyoutOpen = _useState2[1];
43
- var _useState3 = (0, _react.useState)(typeof window !== 'undefined' ? window.innerWidth : Infinity),
44
- _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
45
- windowWidth = _useState4[0],
46
- setWindowWidth = _useState4[1];
47
- var _useState5 = (0, _react.useState)('side-by-side'),
48
- _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
49
- childLayoutMode = _useState6[0],
50
- setChildLayoutMode = _useState6[1];
51
-
52
- // update windowWidth on resize
53
- (0, _react.useEffect)(function () {
54
- if (typeof window === 'undefined') return;
55
- var handleResize = function handleResize() {
56
- setWindowWidth(window.innerWidth);
57
- };
58
- window.addEventListener('resize', handleResize);
59
- handleResize();
60
- return function () {
61
- window.removeEventListener('resize', handleResize);
62
- reportIsChildOpen === null || reportIsChildOpen === void 0 || reportIsChildOpen(false);
63
- };
64
- // eslint-disable-next-line react-hooks/exhaustive-deps
65
- }, []);
66
-
67
- // Calculate stacking breakpoint value for child flyout.
68
- // Stacking breakpoint value is a sum of parent breakpoint value and child breakpoint value.
69
- var stackingBreakpointValue = (0, _react.useMemo)(function () {
70
- var parentSizeName = parentSize;
71
- var childSizeName = childElement.props.size || 's';
72
- var parentNumericValue = 0;
73
- if (parentSizeName === 's') parentNumericValue = euiTheme.breakpoint.s;else if (parentSizeName === 'm') parentNumericValue = euiTheme.breakpoint.m;
74
- // Parent 'l' size is not allowed when child is present, so no need to check here
75
-
76
- var childNumericValue = 0;
77
- if (childSizeName === 's') childNumericValue = euiTheme.breakpoint.s;else if (childSizeName === 'm') childNumericValue = euiTheme.breakpoint.m;
78
- return parentNumericValue + childNumericValue;
79
- }, [parentSize, childElement.props.size, euiTheme.breakpoint]);
80
-
81
- // update childLayoutMode based on windowWidth and the calculated stackingBreakpoint
82
- (0, _react.useEffect)(function () {
83
- if (windowWidth >= stackingBreakpointValue) {
84
- setChildLayoutMode('side-by-side');
85
- } else {
86
- setChildLayoutMode('stacked');
87
- }
88
- }, [windowWidth, stackingBreakpointValue]);
89
-
90
- // report isChildFlyoutOpen changes to the parent EuiFlyout
91
- (0, _react.useEffect)(function () {
92
- reportIsChildOpen(isChildFlyoutOpen);
93
- }, [isChildFlyoutOpen, reportIsChildOpen]);
94
-
95
- // report childLayoutMode changes to the parent EuiFlyout
96
- (0, _react.useEffect)(function () {
97
- reportChildLayoutMode(childLayoutMode);
98
- }, [childLayoutMode, reportChildLayoutMode]);
99
- var contextValue = (0, _react.useMemo)(function () {
100
- return {
101
- parentSize: parentSize,
102
- parentFlyoutRef: parentFlyoutRef,
103
- isChildFlyoutOpen: isChildFlyoutOpen,
104
- setIsChildFlyoutOpen: setIsChildFlyoutOpen,
105
- childLayoutMode: childLayoutMode
106
- };
107
- }, [parentSize, parentFlyoutRef, isChildFlyoutOpen, setIsChildFlyoutOpen, childLayoutMode]);
108
- return (0, _react2.jsx)(_flyout_context.EuiFlyoutContext.Provider, {
109
- value: contextValue
110
- }, childrenToRender);
111
- };
112
- EuiFlyoutChildProvider.propTypes = {
113
- parentSize: _propTypes.default.oneOf(["s", "m"]).isRequired,
114
- parentFlyoutRef: _propTypes.default.any.isRequired,
115
- childElement: _propTypes.default.element.isRequired,
116
- childrenToRender: _propTypes.default.node.isRequired,
117
- reportIsChildOpen: _propTypes.default.func.isRequired,
118
- reportChildLayoutMode: _propTypes.default.func.isRequired
119
- };
@@ -1,100 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.useEuiFlyoutSessionContext = exports.EuiFlyoutSessionProvider = void 0;
9
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
- var _react = _interopRequireWildcard(require("react"));
12
- var _index = require("../index");
13
- var _flyout_reducer = require("./flyout_reducer");
14
- var _react2 = require("@emotion/react");
15
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
16
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
17
- /*
18
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
19
- * or more contributor license agreements. Licensed under the Elastic License
20
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
21
- * in compliance with, at your election, the Elastic License 2.0 or the Server
22
- * Side Public License, v 1.
23
- */
24
-
25
- var EuiFlyoutSessionContext = /*#__PURE__*/(0, _react.createContext)(null);
26
-
27
- /**
28
- * Accesses the state data and dispatch function from the context of EuiFlyoutSessionProvider
29
- * Use this if you need to debug the state or need direct access to the dispatch function, otherwise use useEuiFlyoutSession hook.
30
- */
31
- var useEuiFlyoutSessionContext = exports.useEuiFlyoutSessionContext = function useEuiFlyoutSessionContext() {
32
- var context = (0, _react.useContext)(EuiFlyoutSessionContext);
33
- if (!context) {
34
- throw new Error('useEuiFlyoutSessionContext must be used within a EuiFlyoutSessionProvider');
35
- }
36
- return context;
37
- };
38
-
39
- /**
40
- * FlyoutProvider is a component that provides a context for Flyout components.
41
- * It is used to manage the state of the Flyout and its child.
42
- * It also renders the Flyout and FlyoutChild components.
43
- *
44
- * @param children - The children of the FlyoutProvider component.
45
- * @param renderMainFlyoutContent - A function that renders the content of the main Flyout.
46
- * @param renderChildFlyoutContent - A function that renders the content of the child Flyout.
47
- * @returns The FlyoutProvider component.
48
- */
49
- var EuiFlyoutSessionProvider = exports.EuiFlyoutSessionProvider = function EuiFlyoutSessionProvider(_ref) {
50
- var children = _ref.children,
51
- renderMainFlyoutContent = _ref.renderMainFlyoutContent,
52
- renderChildFlyoutContent = _ref.renderChildFlyoutContent,
53
- onUnmount = _ref.onUnmount;
54
- var _useReducer = (0, _react.useReducer)(_flyout_reducer.flyoutReducer, _flyout_reducer.initialFlyoutState),
55
- _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
56
- state = _useReducer2[0],
57
- dispatch = _useReducer2[1];
58
- var activeFlyoutGroup = state.activeFlyoutGroup;
59
- var handleClose = function handleClose() {
60
- dispatch({
61
- type: 'CLOSE_SESSION'
62
- });
63
- };
64
- var handleCloseChild = function handleCloseChild() {
65
- dispatch({
66
- type: 'CLOSE_CHILD_FLYOUT'
67
- });
68
- };
69
- var mainFlyoutContentNode = null;
70
- var childFlyoutContentNode = null;
71
- if (activeFlyoutGroup) {
72
- var renderContext = {
73
- activeFlyoutGroup: activeFlyoutGroup,
74
- meta: activeFlyoutGroup.meta
75
- };
76
- mainFlyoutContentNode = renderMainFlyoutContent(renderContext);
77
- if (activeFlyoutGroup.isChildOpen && renderChildFlyoutContent) {
78
- childFlyoutContentNode = renderChildFlyoutContent(renderContext);
79
- } else if (activeFlyoutGroup.isChildOpen && !renderChildFlyoutContent) {
80
- console.warn('EuiFlyoutSessionProvider: A child flyout is open, but renderChildFlyoutContent was not provided.');
81
- }
82
- }
83
- var config = activeFlyoutGroup === null || activeFlyoutGroup === void 0 ? void 0 : activeFlyoutGroup.config;
84
- var flyoutPropsMain = (config === null || config === void 0 ? void 0 : config.mainFlyoutProps) || {};
85
- var flyoutPropsChild = (config === null || config === void 0 ? void 0 : config.childFlyoutProps) || {};
86
- return (0, _react2.jsx)(EuiFlyoutSessionContext.Provider, {
87
- value: {
88
- state: state,
89
- dispatch: dispatch,
90
- onUnmount: onUnmount
91
- }
92
- }, children, (activeFlyoutGroup === null || activeFlyoutGroup === void 0 ? void 0 : activeFlyoutGroup.isMainOpen) && (0, _react2.jsx)(_index.EuiFlyout, (0, _extends2.default)({
93
- onClose: handleClose,
94
- size: config === null || config === void 0 ? void 0 : config.mainSize,
95
- ownFocus: !activeFlyoutGroup.isChildOpen
96
- }, flyoutPropsMain), mainFlyoutContentNode, activeFlyoutGroup.isChildOpen && childFlyoutContentNode && (0, _react2.jsx)(_index.EuiFlyoutChild, (0, _extends2.default)({
97
- onClose: handleCloseChild,
98
- size: config === null || config === void 0 ? void 0 : config.childSize
99
- }, flyoutPropsChild), childFlyoutContentNode)));
100
- };