@elastic/eui 92.0.0 → 92.1.1

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 (156) hide show
  1. package/dist/eui_theme_dark.css +3 -18
  2. package/dist/eui_theme_dark.min.css +1 -1
  3. package/dist/eui_theme_light.css +3 -18
  4. package/dist/eui_theme_light.min.css +1 -1
  5. package/es/components/aspect_ratio/aspect_ratio.js +1 -1
  6. package/es/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
  7. package/es/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
  8. package/es/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
  9. package/es/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
  10. package/es/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
  11. package/es/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
  12. package/es/components/datagrid/body/cell/focus_utils.js +166 -0
  13. package/es/components/datagrid/body/cell/index.js +11 -0
  14. package/es/components/datagrid/body/data_grid_body.js +0 -2
  15. package/es/components/datagrid/body/data_grid_body_custom.js +1 -7
  16. package/es/components/datagrid/body/data_grid_body_virtualized.js +1 -7
  17. package/es/components/datagrid/body/footer/data_grid_footer_row.js +1 -2
  18. package/es/components/datagrid/body/header/data_grid_control_header_cell.js +3 -6
  19. package/es/components/datagrid/body/header/data_grid_header_cell.js +27 -12
  20. package/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js +45 -116
  21. package/es/components/datagrid/body/header/data_grid_header_row.js +5 -10
  22. package/es/components/datagrid/body/header/use_data_grid_header.js +3 -14
  23. package/es/components/datagrid/data_grid.js +2 -12
  24. package/es/components/datagrid/utils/focus.js +25 -54
  25. package/es/components/datagrid/utils/scrolling.js +1 -1
  26. package/es/components/flyout/flyout_resizable.js +10 -10
  27. package/es/components/flyout/flyout_resizable.styles.js +12 -6
  28. package/es/components/resizable_container/helpers.js +5 -6
  29. package/es/components/resizable_container/resizable_button.js +13 -4
  30. package/es/components/resizable_container/resizable_button.styles.js +18 -8
  31. package/es/components/resizable_container/resizable_container.js +28 -22
  32. package/es/components/steps/step_number.styles.js +6 -7
  33. package/es/components/tree_view/tree_view.js +9 -2
  34. package/eui.d.ts +130 -90
  35. package/i18ntokens.json +108 -72
  36. package/lib/components/aspect_ratio/aspect_ratio.js +1 -1
  37. package/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
  38. package/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
  39. package/lib/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
  40. package/lib/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
  41. package/lib/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
  42. package/lib/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
  43. package/lib/components/datagrid/body/cell/focus_utils.js +174 -0
  44. package/lib/components/datagrid/body/cell/index.js +32 -0
  45. package/lib/components/datagrid/body/data_grid_body.js +0 -2
  46. package/lib/components/datagrid/body/data_grid_body_custom.js +2 -8
  47. package/lib/components/datagrid/body/data_grid_body_virtualized.js +2 -8
  48. package/lib/components/datagrid/body/footer/data_grid_footer_row.js +5 -6
  49. package/lib/components/datagrid/body/header/data_grid_control_header_cell.js +3 -6
  50. package/lib/components/datagrid/body/header/data_grid_header_cell.js +35 -20
  51. package/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js +47 -119
  52. package/lib/components/datagrid/body/header/data_grid_header_row.js +5 -10
  53. package/lib/components/datagrid/body/header/use_data_grid_header.js +10 -24
  54. package/lib/components/datagrid/data_grid.js +4 -14
  55. package/lib/components/datagrid/utils/focus.js +26 -56
  56. package/lib/components/datagrid/utils/scrolling.js +2 -2
  57. package/lib/components/flyout/flyout_resizable.js +10 -10
  58. package/lib/components/flyout/flyout_resizable.styles.js +12 -6
  59. package/lib/components/resizable_container/helpers.js +7 -7
  60. package/lib/components/resizable_container/resizable_button.js +13 -4
  61. package/lib/components/resizable_container/resizable_button.styles.js +18 -8
  62. package/lib/components/resizable_container/resizable_container.js +28 -22
  63. package/lib/components/steps/step_number.styles.js +6 -7
  64. package/lib/components/tree_view/tree_view.js +9 -2
  65. package/optimize/es/components/aspect_ratio/aspect_ratio.js +1 -1
  66. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
  67. package/optimize/es/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
  68. package/optimize/es/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
  69. package/optimize/es/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
  70. package/optimize/es/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
  71. package/optimize/es/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
  72. package/optimize/es/components/datagrid/body/cell/focus_utils.js +153 -0
  73. package/optimize/es/components/datagrid/body/cell/index.js +11 -0
  74. package/optimize/es/components/datagrid/body/data_grid_body_custom.js +1 -5
  75. package/optimize/es/components/datagrid/body/data_grid_body_virtualized.js +1 -5
  76. package/optimize/es/components/datagrid/body/footer/data_grid_footer_row.js +1 -2
  77. package/optimize/es/components/datagrid/body/header/data_grid_control_header_cell.js +2 -4
  78. package/optimize/es/components/datagrid/body/header/data_grid_header_cell.js +25 -10
  79. package/optimize/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js +41 -115
  80. package/optimize/es/components/datagrid/body/header/data_grid_header_row.js +4 -8
  81. package/optimize/es/components/datagrid/body/header/use_data_grid_header.js +3 -13
  82. package/optimize/es/components/datagrid/data_grid.js +2 -12
  83. package/optimize/es/components/datagrid/utils/focus.js +25 -54
  84. package/optimize/es/components/datagrid/utils/scrolling.js +1 -1
  85. package/optimize/es/components/flyout/flyout_resizable.js +10 -10
  86. package/optimize/es/components/flyout/flyout_resizable.styles.js +12 -6
  87. package/optimize/es/components/resizable_container/helpers.js +5 -6
  88. package/optimize/es/components/resizable_container/resizable_button.js +5 -2
  89. package/optimize/es/components/resizable_container/resizable_button.styles.js +18 -8
  90. package/optimize/es/components/resizable_container/resizable_container.js +28 -22
  91. package/optimize/es/components/steps/step_number.styles.js +6 -7
  92. package/optimize/es/components/tree_view/tree_view.js +9 -2
  93. package/optimize/lib/components/aspect_ratio/aspect_ratio.js +1 -1
  94. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
  95. package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
  96. package/optimize/lib/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
  97. package/optimize/lib/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
  98. package/optimize/lib/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
  99. package/optimize/lib/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
  100. package/optimize/lib/components/datagrid/body/cell/focus_utils.js +163 -0
  101. package/optimize/lib/components/datagrid/body/cell/index.js +32 -0
  102. package/optimize/lib/components/datagrid/body/data_grid_body_custom.js +2 -6
  103. package/optimize/lib/components/datagrid/body/data_grid_body_virtualized.js +2 -6
  104. package/optimize/lib/components/datagrid/body/footer/data_grid_footer_row.js +5 -6
  105. package/optimize/lib/components/datagrid/body/header/data_grid_control_header_cell.js +2 -4
  106. package/optimize/lib/components/datagrid/body/header/data_grid_header_cell.js +25 -10
  107. package/optimize/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js +41 -115
  108. package/optimize/lib/components/datagrid/body/header/data_grid_header_row.js +4 -8
  109. package/optimize/lib/components/datagrid/body/header/use_data_grid_header.js +4 -14
  110. package/optimize/lib/components/datagrid/data_grid.js +4 -14
  111. package/optimize/lib/components/datagrid/utils/focus.js +26 -56
  112. package/optimize/lib/components/datagrid/utils/scrolling.js +2 -2
  113. package/optimize/lib/components/flyout/flyout_resizable.js +10 -10
  114. package/optimize/lib/components/flyout/flyout_resizable.styles.js +12 -6
  115. package/optimize/lib/components/resizable_container/helpers.js +7 -7
  116. package/optimize/lib/components/resizable_container/resizable_button.js +5 -2
  117. package/optimize/lib/components/resizable_container/resizable_button.styles.js +18 -8
  118. package/optimize/lib/components/resizable_container/resizable_container.js +28 -22
  119. package/optimize/lib/components/steps/step_number.styles.js +6 -7
  120. package/optimize/lib/components/tree_view/tree_view.js +9 -2
  121. package/package.json +1 -1
  122. package/src/components/datagrid/body/header/_data_grid_header_row.scss +8 -7
  123. package/test-env/components/aspect_ratio/aspect_ratio.js +1 -1
  124. package/test-env/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
  125. package/test-env/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
  126. package/test-env/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
  127. package/test-env/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
  128. package/test-env/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
  129. package/test-env/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
  130. package/test-env/components/datagrid/body/cell/focus_utils.js +172 -0
  131. package/test-env/components/datagrid/body/cell/index.js +32 -0
  132. package/test-env/components/datagrid/body/data_grid_body.js +0 -2
  133. package/test-env/components/datagrid/body/data_grid_body_custom.js +2 -8
  134. package/test-env/components/datagrid/body/data_grid_body_virtualized.js +2 -8
  135. package/test-env/components/datagrid/body/footer/data_grid_footer_row.js +5 -6
  136. package/test-env/components/datagrid/body/header/data_grid_control_header_cell.js +3 -6
  137. package/test-env/components/datagrid/body/header/data_grid_header_cell.js +25 -10
  138. package/test-env/components/datagrid/body/header/data_grid_header_cell_wrapper.js +44 -116
  139. package/test-env/components/datagrid/body/header/data_grid_header_row.js +5 -10
  140. package/test-env/components/datagrid/body/header/use_data_grid_header.js +4 -14
  141. package/test-env/components/datagrid/data_grid.js +4 -14
  142. package/test-env/components/datagrid/utils/focus.js +26 -56
  143. package/test-env/components/datagrid/utils/scrolling.js +2 -2
  144. package/test-env/components/flyout/flyout_resizable.js +10 -10
  145. package/test-env/components/flyout/flyout_resizable.styles.js +12 -6
  146. package/test-env/components/resizable_container/helpers.js +7 -7
  147. package/test-env/components/resizable_container/resizable_button.js +13 -4
  148. package/test-env/components/resizable_container/resizable_button.styles.js +18 -8
  149. package/test-env/components/resizable_container/resizable_container.js +28 -22
  150. package/test-env/components/steps/step_number.styles.js +6 -7
  151. package/test-env/components/tree_view/tree_view.js +9 -2
  152. package/es/components/datagrid/body/header/header_is_interactive.js +0 -58
  153. package/lib/components/datagrid/body/header/header_is_interactive.js +0 -63
  154. package/optimize/es/components/datagrid/body/header/header_is_interactive.js +0 -53
  155. package/optimize/lib/components/datagrid/body/header/header_is_interactive.js +0 -61
  156. package/test-env/components/datagrid/body/header/header_is_interactive.js +0 -61
@@ -44,7 +44,9 @@ var EuiTreeViewContext = /*#__PURE__*/createContext('');
44
44
  function hasAriaLabel(x) {
45
45
  return x.hasOwnProperty('aria-label');
46
46
  }
47
- function getTreeId(propId, contextId, idGenerator) {
47
+ function getTreeId(propId) {
48
+ var contextId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
49
+ var idGenerator = arguments.length > 2 ? arguments[2] : undefined;
48
50
  return propId !== null && propId !== void 0 ? propId : contextId === '' ? idGenerator() : contextId;
49
51
  }
50
52
  var displayToClassNameMap = {
@@ -54,9 +56,14 @@ var displayToClassNameMap = {
54
56
  export var EuiTreeView = /*#__PURE__*/function (_Component) {
55
57
  _inherits(EuiTreeView, _Component);
56
58
  var _super = _createSuper(EuiTreeView);
57
- function EuiTreeView(props, context) {
59
+ function EuiTreeView(props,
60
+ // Without the optional ? typing, TS will throw errors on JSX component errors
61
+ // @see https://github.com/facebook/react/issues/13944#issuecomment-1183693239
62
+ context) {
58
63
  var _this;
59
64
  _classCallCheck(this, EuiTreeView);
65
+ // TODO: context in constructor has been deprecated.
66
+ // We should likely convert this to a function component
60
67
  _this = _super.call(this, props, context);
61
68
  _defineProperty(_assertThisInitialized(_this), "treeIdGenerator", htmlIdGenerator('euiTreeView'));
62
69
  _defineProperty(_assertThisInitialized(_this), "isNested", void 0);
package/eui.d.ts CHANGED
@@ -11012,6 +11012,16 @@ declare module '@elastic/eui/src/components/resizable_container/resizable_button
11012
11012
  euiResizableButton: import("@emotion/utils").SerializedStyles;
11013
11013
  horizontal: import("@emotion/utils").SerializedStyles;
11014
11014
  vertical: import("@emotion/utils").SerializedStyles;
11015
+ border: import("@emotion/utils").SerializedStyles;
11016
+ borderDirection: {
11017
+ horizontal: import("@emotion/utils").SerializedStyles;
11018
+ vertical: import("@emotion/utils").SerializedStyles;
11019
+ };
11020
+ handle: import("@emotion/utils").SerializedStyles;
11021
+ handleDirection: {
11022
+ horizontal: import("@emotion/utils").SerializedStyles;
11023
+ vertical: import("@emotion/utils").SerializedStyles;
11024
+ };
11015
11025
  alignIndicator: {
11016
11026
  center: import("@emotion/utils").SerializedStyles;
11017
11027
  start: import("@emotion/utils").SerializedStyles;
@@ -11031,8 +11041,14 @@ declare module '@elastic/eui/src/components/resizable_container/resizable_button
11031
11041
  */
11032
11042
  isHorizontal?: boolean;
11033
11043
  /**
11034
- * Specify the alignment of the initial resize indicator. Defaults to `center`,
11035
- * but consider using `start` for extremely tall content that scrolls off-screen
11044
+ * By default, EuiResizableButton will show a grab handle to indicate resizability.
11045
+ * This indicator can be optionally hidden to show a plain border instead.
11046
+ */
11047
+ indicator?: 'handle' | 'border';
11048
+ /**
11049
+ * Allows customizing the alignment of grab `handle` indicators (does nothing for
11050
+ * border indicators). Defaults to `center`, but consider using `start` for extremely
11051
+ * tall content that scrolls off-screen
11036
11052
  */
11037
11053
  alignIndicator?: 'center' | 'start' | 'end';
11038
11054
  /**
@@ -11051,8 +11067,14 @@ declare module '@elastic/eui/src/components/resizable_container/resizable_button
11051
11067
  */
11052
11068
  isHorizontal?: boolean | undefined;
11053
11069
  /**
11054
- * Specify the alignment of the initial resize indicator. Defaults to `center`,
11055
- * but consider using `start` for extremely tall content that scrolls off-screen
11070
+ * By default, EuiResizableButton will show a grab handle to indicate resizability.
11071
+ * This indicator can be optionally hidden to show a plain border instead.
11072
+ */
11073
+ indicator?: "border" | "handle" | undefined;
11074
+ /**
11075
+ * Allows customizing the alignment of grab `handle` indicators (does nothing for
11076
+ * border indicators). Defaults to `center`, but consider using `start` for extremely
11077
+ * tall content that scrolls off-screen
11056
11078
  */
11057
11079
  alignIndicator?: "center" | "end" | "start" | undefined;
11058
11080
  /**
@@ -11278,12 +11300,13 @@ declare module '@elastic/eui/src/components/resizable_container/helpers' {
11278
11300
  [key: string]: number;
11279
11301
  }) => any;
11280
11302
  }
11303
+ export const isTouchEvent: (event: MouseEvent | ReactMouseEvent | TouchEvent | ReactTouchEvent) => event is TouchEvent | ReactTouchEvent<Element>;
11281
11304
  export const pxToPercent: (proportion: number, whole: number) => number;
11282
11305
  export const sizesOnly: (panelObject: EuiResizableContainerRegistry['panels']) => {
11283
11306
  [key: string]: number;
11284
11307
  };
11285
11308
  export const getPanelMinSize: (panelMinSize: string[], containerSize: number) => number;
11286
- export const getPosition: (event: ReactMouseEvent | ReactTouchEvent, isHorizontal: boolean) => number;
11309
+ export const getPosition: (event: ReactMouseEvent | MouseEvent | ReactTouchEvent | TouchEvent, isHorizontal: boolean) => number;
11287
11310
  export const useContainerCallbacks: ({ initialState, containerRef, onPanelWidthChange, }: Params) => [EuiResizableContainerActions, EuiResizableContainerState];
11288
11311
  export {};
11289
11312
 
@@ -11344,8 +11367,14 @@ declare module '@elastic/eui/src/components/flyout/flyout_resizable.styles' {
11344
11367
  import { UseEuiTheme } from '@elastic/eui/src/services';
11345
11368
  export const euiFlyoutResizableButtonStyles: ({ euiTheme }: UseEuiTheme) => {
11346
11369
  euiFlyoutResizableButton: import("@emotion/utils").SerializedStyles;
11347
- left: import("@emotion/utils").SerializedStyles;
11348
- right: import("@emotion/utils").SerializedStyles;
11370
+ overlay: {
11371
+ left: import("@emotion/utils").SerializedStyles;
11372
+ right: import("@emotion/utils").SerializedStyles;
11373
+ };
11374
+ push: {
11375
+ left: import("@emotion/utils").SerializedStyles;
11376
+ right: import("@emotion/utils").SerializedStyles;
11377
+ };
11349
11378
  };
11350
11379
 
11351
11380
  }
@@ -11498,6 +11527,7 @@ declare module '@elastic/eui/src/components/collapsible_nav_beta/collapsible_nav
11498
11527
  };
11499
11528
  export const euiCollapsibleNavFooterStyles: (euiThemeContext: UseEuiTheme) => {
11500
11529
  euiCollapsibleNav__footer: import("@emotion/utils").SerializedStyles;
11530
+ euiFlyoutFooter__overflow: import("@emotion/utils").SerializedStyles;
11501
11531
  isPushCollapsed: import("@emotion/utils").SerializedStyles;
11502
11532
  };
11503
11533
 
@@ -13483,7 +13513,6 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
13483
13513
  setColumnWidth: (columnId: string, width: number) => void;
13484
13514
  setVisibleColumns: (columnId: string[]) => void;
13485
13515
  switchColumnPos: (colFromId: string, colToId: string) => void;
13486
- headerIsInteractive: boolean;
13487
13516
  }
13488
13517
  export type EuiDataGridHeaderRowProps = CommonProps & HTMLAttributes<HTMLDivElement> & EuiDataGridHeaderRowPropsSpecificProps;
13489
13518
  export interface EuiDataGridHeaderCellProps extends Omit<EuiDataGridHeaderRowPropsSpecificProps, 'leadingControlColumns'> {
@@ -13493,14 +13522,15 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
13493
13522
  export interface EuiDataGridControlHeaderCellProps {
13494
13523
  index: number;
13495
13524
  controlColumn: EuiDataGridControlColumn;
13496
- headerIsInteractive: boolean;
13497
13525
  }
13498
13526
  export interface EuiDataGridHeaderCellWrapperProps extends PropsWithChildren {
13499
13527
  id: string;
13500
13528
  index: number;
13501
- headerIsInteractive: boolean;
13502
13529
  width?: number | null;
13503
13530
  className?: string;
13531
+ hasActionsPopover?: boolean;
13532
+ isActionsButtonFocused?: boolean;
13533
+ focusActionsButton?: () => void;
13504
13534
  }
13505
13535
  export type EuiDataGridFooterRowProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
13506
13536
  rowIndex: number;
@@ -13753,8 +13783,6 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
13753
13783
  renderCustomGridBody?: EuiDataGridProps['renderCustomGridBody'];
13754
13784
  interactiveCellId: EuiDataGridCellProps['interactiveCellId'];
13755
13785
  pagination?: Required<EuiDataGridPaginationProps>;
13756
- headerIsInteractive: boolean;
13757
- handleHeaderMutation: MutationCallback;
13758
13786
  setVisibleColumns: EuiDataGridHeaderRowProps['setVisibleColumns'];
13759
13787
  switchColumnPos: EuiDataGridHeaderRowProps['switchColumnPos'];
13760
13788
  onColumnResize?: EuiDataGridOnColumnResizeHandler;
@@ -13904,9 +13932,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
13904
13932
  export interface EuiDataGridCellState {
13905
13933
  cellProps: EuiDataGridSetCellProps;
13906
13934
  isFocused: boolean;
13907
- isEntered: boolean;
13908
- enableInteractions: boolean;
13909
- disableCellTabIndex: boolean;
13935
+ isHovered: boolean;
13910
13936
  cellTextAlign: 'Left' | 'Right';
13911
13937
  }
13912
13938
  export type EuiDataGridCellValueProps = Omit<EuiDataGridCellProps, 'width' | 'interactiveCellId' | 'popoverContext' | 'rowManager'>;
@@ -14319,24 +14345,20 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
14319
14345
 
14320
14346
  }
14321
14347
  declare module '@elastic/eui/src/components/datagrid/utils/focus' {
14322
- import { HTMLAttributes, KeyboardEvent, MutableRefObject } from 'react';
14323
- import { GridOnItemsRenderedProps } from 'react-window';
14348
+ import { HTMLAttributes, KeyboardEvent } from 'react';
14324
14349
  import { DataGridFocusContextShape, EuiDataGridFocusedCell, EuiDataGridProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
14325
14350
  export const DataGridFocusContext: import("react").Context<DataGridFocusContextShape>; type FocusProps = Pick<HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onKeyUp'>;
14326
14351
  /**
14327
14352
  * Main focus context and overarching focus state management
14328
14353
  */
14329
- export const useFocus: ({ headerIsInteractive, gridItemsRendered, }: {
14330
- headerIsInteractive: boolean;
14331
- gridItemsRendered: MutableRefObject<GridOnItemsRenderedProps | null>;
14332
- }) => DataGridFocusContextShape & {
14354
+ export const useFocus: () => DataGridFocusContextShape & {
14333
14355
  focusProps: FocusProps;
14334
14356
  };
14335
14357
  export const notifyCellOfFocusState: (cellsUpdateFocus: Map<string, Function>, cell: EuiDataGridFocusedCell, isFocused: boolean) => void;
14336
14358
  /**
14337
14359
  * Keydown handler for connecting focus state with keyboard navigation
14338
14360
  */
14339
- export const createKeyDownHandler: ({ gridElement, visibleColCount, visibleRowCount, visibleRowStartIndex, rowCount, pagination, hasFooter, headerIsInteractive, focusContext, }: {
14361
+ export const createKeyDownHandler: ({ gridElement, visibleColCount, visibleRowCount, visibleRowStartIndex, rowCount, pagination, hasFooter, focusContext, }: {
14340
14362
  gridElement: HTMLDivElement | null;
14341
14363
  visibleColCount: number;
14342
14364
  visibleRowCount: number;
@@ -14344,7 +14366,6 @@ declare module '@elastic/eui/src/components/datagrid/utils/focus' {
14344
14366
  rowCount: EuiDataGridProps['rowCount'];
14345
14367
  pagination: Required<EuiDataGridProps['pagination']>;
14346
14368
  hasFooter: boolean;
14347
- headerIsInteractive: boolean;
14348
14369
  focusContext: DataGridFocusContextShape;
14349
14370
  }) => (event: KeyboardEvent<HTMLDivElement>) => void;
14350
14371
  /**
@@ -14354,11 +14375,34 @@ declare module '@elastic/eui/src/components/datagrid/utils/focus' {
14354
14375
  */
14355
14376
  export const preventTabbing: (records: MutationRecord[]) => void;
14356
14377
  export const getParentCellContent: (_element: Node | HTMLElement) => HTMLElement | null;
14378
+ export {};
14379
+
14380
+ }
14381
+ declare module '@elastic/eui/src/components/datagrid/body/cell/focus_utils' {
14382
+ import { PropsWithChildren, FunctionComponent } from 'react';
14357
14383
  /**
14358
- * Focus fixes & workarounds
14384
+ * This internal utility component is used by all cells, both header and body/footer cells.
14385
+ * It always handles:
14386
+ * 1. Removing any interactive children from keyboard tab order on cell mount
14387
+ * 2. Listening for focus on any interactive children and updating the cell focus context
14388
+ *
14389
+ * It should *only* render focus traps for:
14390
+ * 1. Header cells that are `actions: false` but still have interactive children
14391
+ * 2. Body cells that are `isExpandable: false` but still have interactive children
14359
14392
  */
14360
- export const useHeaderFocusWorkaround: (headerIsInteractive: boolean) => void;
14361
- export {};
14393
+ export const HandleInteractiveChildren: FunctionComponent<PropsWithChildren & {
14394
+ cellEl?: HTMLElement | null;
14395
+ updateCellFocusContext: Function;
14396
+ renderFocusTrap?: boolean;
14397
+ }>;
14398
+ /**
14399
+ * Cells with interactive children but no cell popover expansion should render a
14400
+ * focus trap that can be entered with the Enter key, which cycles keyboard tabs
14401
+ * through the cell contents only, and exited with the Escape key
14402
+ */
14403
+ export const FocusTrappedChildren: FunctionComponent<PropsWithChildren & {
14404
+ cellEl: HTMLElement;
14405
+ }>;
14362
14406
 
14363
14407
  }
14364
14408
  declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_cell_wrapper' {
@@ -14614,53 +14658,20 @@ declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_heade
14614
14658
  }
14615
14659
  declare module '@elastic/eui/src/components/datagrid/body/header/use_data_grid_header' {
14616
14660
  import React from 'react';
14617
- import { EuiDataGridHeaderRowProps } from '@elastic/eui/src/components/datagrid/data_grid_types'; type Props = EuiDataGridHeaderRowProps & {
14618
- handleHeaderMutation: MutationCallback;
14619
- };
14661
+ import { EuiDataGridHeaderRowProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
14620
14662
  /**
14621
14663
  * DRY out setting up the grid header and its refs & observers
14622
14664
  */
14623
- export const useDataGridHeader: ({ handleHeaderMutation, ...props }: Props) => {
14665
+ export const useDataGridHeader: (props: EuiDataGridHeaderRowProps) => {
14624
14666
  headerRow: React.JSX.Element;
14625
14667
  headerRowHeight: number;
14626
14668
  };
14627
- export {};
14628
14669
 
14629
14670
  }
14630
14671
  declare module '@elastic/eui/src/components/datagrid/body/header' {
14631
14672
  export { EuiDataGridHeaderRow } from '@elastic/eui/src/components/datagrid/body/header/data_grid_header_row';
14632
14673
  export { useDataGridHeader } from '@elastic/eui/src/components/datagrid/body/header/use_data_grid_header';
14633
14674
 
14634
- }
14635
- declare module '@elastic/eui/src/components/datagrid/body/data_grid_cell_actions' {
14636
- import React from 'react';
14637
- import { EuiDataGridColumn } from '@elastic/eui/src/components/datagrid/data_grid_types';
14638
- export const EuiDataGridCellActions: ({ onExpandClick, column, rowIndex, colIndex, }: {
14639
- onExpandClick: () => void;
14640
- column?: EuiDataGridColumn | undefined;
14641
- rowIndex: number;
14642
- colIndex: number;
14643
- }) => React.JSX.Element;
14644
- export const EuiDataGridCellPopoverActions: ({ rowIndex, colIndex, column, }: {
14645
- column?: EuiDataGridColumn | undefined;
14646
- colIndex: number;
14647
- rowIndex: number;
14648
- }) => React.JSX.Element;
14649
-
14650
- }
14651
- declare module '@elastic/eui/src/components/datagrid/body/data_grid_cell_popover' {
14652
- import React, { ReactNode } from 'react';
14653
- import { DataGridCellPopoverContextShape, EuiDataGridCellPopoverElementProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
14654
- export const DataGridCellPopoverContext: React.Context<DataGridCellPopoverContextShape>;
14655
- export const useCellPopover: () => {
14656
- cellPopoverContext: DataGridCellPopoverContextShape;
14657
- cellPopover: ReactNode;
14658
- };
14659
- export const DefaultCellPopover: ({ schema, cellActions, children, cellContentsElement, }: EuiDataGridCellPopoverElementProps) => React.JSX.Element;
14660
- export const JsonPopoverContent: ({ cellText }: {
14661
- cellText: string;
14662
- }) => React.JSX.Element;
14663
-
14664
14675
  }
14665
14676
  declare module '@elastic/eui/src/utils/prop_types/is' {
14666
14677
  export const is: <T>(expectedValue: any) => {
@@ -14704,23 +14715,51 @@ declare module '@elastic/eui/src/utils' {
14704
14715
  export * from '@elastic/eui/src/utils/is_jest';
14705
14716
 
14706
14717
  }
14707
- declare module '@elastic/eui/src/components/datagrid/body/data_grid_cell' {
14708
- import React, { Component, ContextType, FocusEvent } from 'react';
14718
+ declare module '@elastic/eui/src/components/datagrid/body/cell/data_grid_cell_actions' {
14719
+ import React from 'react';
14720
+ import { EuiDataGridColumn } from '@elastic/eui/src/components/datagrid/data_grid_types';
14721
+ export const EuiDataGridCellActions: ({ onExpandClick, column, rowIndex, colIndex, }: {
14722
+ onExpandClick: () => void;
14723
+ column?: EuiDataGridColumn | undefined;
14724
+ rowIndex: number;
14725
+ colIndex: number;
14726
+ }) => React.JSX.Element;
14727
+ export const EuiDataGridCellPopoverActions: ({ rowIndex, colIndex, column, }: {
14728
+ column?: EuiDataGridColumn | undefined;
14729
+ colIndex: number;
14730
+ rowIndex: number;
14731
+ }) => React.JSX.Element;
14732
+
14733
+ }
14734
+ declare module '@elastic/eui/src/components/datagrid/body/cell/data_grid_cell_popover' {
14735
+ import React, { ReactNode } from 'react';
14736
+ import { DataGridCellPopoverContextShape, EuiDataGridCellPopoverElementProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
14737
+ export const DataGridCellPopoverContext: React.Context<DataGridCellPopoverContextShape>;
14738
+ export const useCellPopover: () => {
14739
+ cellPopoverContext: DataGridCellPopoverContextShape;
14740
+ cellPopover: ReactNode;
14741
+ };
14742
+ export const DefaultCellPopover: ({ schema, cellActions, children, cellContentsElement, }: EuiDataGridCellPopoverElementProps) => React.JSX.Element;
14743
+ export const JsonPopoverContent: ({ cellText }: {
14744
+ cellText: string;
14745
+ }) => React.JSX.Element;
14746
+
14747
+ }
14748
+ declare module '@elastic/eui/src/components/datagrid/body/cell/data_grid_cell' {
14749
+ import React, { Component, ContextType, KeyboardEvent } from 'react';
14709
14750
  import { DataGridFocusContext } from '@elastic/eui/src/components/datagrid/utils/focus';
14710
14751
  import { EuiDataGridCellProps, EuiDataGridCellState, EuiDataGridSetCellProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
14711
14752
  export class EuiDataGridCell extends Component<EuiDataGridCellProps, EuiDataGridCellState> {
14712
- static activeFocusTimeoutId: number | undefined;
14713
14753
  cellRef: React.MutableRefObject<HTMLDivElement | null>;
14714
14754
  contentObserver: any;
14715
14755
  popoverAnchorRef: React.MutableRefObject<HTMLDivElement | null>;
14716
14756
  cellContentsRef: HTMLDivElement | null;
14717
14757
  state: EuiDataGridCellState;
14718
14758
  unsubscribeCell?: Function;
14719
- focusTimeout: number | undefined;
14720
14759
  style: null;
14721
14760
  static contextType: React.Context<import ("@elastic/eui/src/components/datagrid/data_grid_types").DataGridFocusContextShape>;
14722
14761
  context: ContextType<typeof DataGridFocusContext>;
14723
- getInteractables: () => never[] | NodeListOf<HTMLElement>;
14762
+ updateCellFocusContext: () => void;
14724
14763
  takeFocus: (preventScroll: boolean) => void;
14725
14764
  recalculateAutoHeight: () => void;
14726
14765
  recalculateLineHeight: () => void;
@@ -14732,17 +14771,35 @@ declare module '@elastic/eui/src/components/datagrid/body/data_grid_cell' {
14732
14771
  shouldComponentUpdate(nextProps: EuiDataGridCellProps, nextState: EuiDataGridCellState): boolean;
14733
14772
  setCellProps: (cellProps: EuiDataGridSetCellProps) => void;
14734
14773
  setCellContentsRef: (ref: HTMLDivElement | null) => void;
14735
- onFocus: (e: FocusEvent<HTMLDivElement>) => void;
14736
- onBlur: () => void;
14737
- preventTabbing: () => void;
14738
- enableTabbing: () => void;
14739
14774
  setCellTextAlign: () => void;
14740
14775
  isExpandable: () => boolean;
14741
14776
  isPopoverOpen: () => boolean;
14742
14777
  handleCellPopover: () => void;
14778
+ handleCellKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
14779
+ handleCellExpansionClick: () => void;
14780
+ onMouseEnter: () => void;
14781
+ onMouseLeave: () => void;
14743
14782
  render(): React.JSX.Element;
14744
14783
  }
14745
14784
 
14785
+ }
14786
+ declare module '@elastic/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper' {
14787
+ import { FunctionComponent } from 'react';
14788
+ import { EuiDataGridCellProps, EuiDataGridBodyProps, EuiDataGridHeaderRowProps } from '@elastic/eui/src/components/datagrid/data_grid_types'; type CellProps = Pick<EuiDataGridCellProps, 'colIndex' | 'visibleRowIndex' | 'style' | 'renderCellValue' | 'renderCellPopover' | 'interactiveCellId' | 'rowHeightsOptions' | 'rowHeightUtils' | 'rowManager' | 'setRowHeight'> & Pick<EuiDataGridBodyProps, 'schema' | 'schemaDetectors' | 'pagination' | 'columns' | 'leadingControlColumns' | 'trailingControlColumns' | 'visibleColCount'> & Pick<EuiDataGridHeaderRowProps, 'columnWidths' | 'defaultColumnWidth'> & Partial<EuiDataGridCellProps>;
14789
+ /**
14790
+ * A DRY wrapper used by both custom and virtualized grid cells.
14791
+ * It grabs context, determines the type of cell being rendered
14792
+ * (e.g. control vs data cell), & sets shared props between all cells
14793
+ */
14794
+ export const Cell: FunctionComponent<CellProps>;
14795
+ export {};
14796
+
14797
+ }
14798
+ declare module '@elastic/eui/src/components/datagrid/body/cell' {
14799
+ export { EuiDataGridCell } from '@elastic/eui/src/components/datagrid/body/cell/data_grid_cell';
14800
+ export { Cell } from '@elastic/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper';
14801
+ export { DataGridCellPopoverContext, useCellPopover, } from '@elastic/eui/src/components/datagrid/body/cell/data_grid_cell_popover';
14802
+
14746
14803
  }
14747
14804
  declare module '@elastic/eui/src/components/datagrid/body/footer/data_grid_footer_row' {
14748
14805
  import React from 'react'; const EuiDataGridFooterRow: React.MemoExoticComponent<React.ForwardRefExoticComponent<import ("@elastic/eui/src/components").CommonProps & React.HTMLAttributes<HTMLDivElement> & {
@@ -14780,18 +14837,6 @@ declare module '@elastic/eui/src/components/datagrid/body/footer' {
14780
14837
  export { EuiDataGridFooterRow } from '@elastic/eui/src/components/datagrid/body/footer/data_grid_footer_row';
14781
14838
  export { useDataGridFooter } from '@elastic/eui/src/components/datagrid/body/footer/use_data_grid_footer';
14782
14839
 
14783
- }
14784
- declare module '@elastic/eui/src/components/datagrid/body/data_grid_cell_wrapper' {
14785
- import { FunctionComponent } from 'react';
14786
- import { EuiDataGridCellProps, EuiDataGridBodyProps, EuiDataGridHeaderRowProps } from '@elastic/eui/src/components/datagrid/data_grid_types'; type CellProps = Pick<EuiDataGridCellProps, 'colIndex' | 'visibleRowIndex' | 'style' | 'renderCellValue' | 'renderCellPopover' | 'interactiveCellId' | 'rowHeightsOptions' | 'rowHeightUtils' | 'rowManager' | 'setRowHeight'> & Pick<EuiDataGridBodyProps, 'schema' | 'schemaDetectors' | 'pagination' | 'columns' | 'leadingControlColumns' | 'trailingControlColumns' | 'visibleColCount'> & Pick<EuiDataGridHeaderRowProps, 'columnWidths' | 'defaultColumnWidth'> & Partial<EuiDataGridCellProps>;
14787
- /**
14788
- * A DRY wrapper used by both custom and virtualized grid cells.
14789
- * It grabs context, determines the type of cell being rendered
14790
- * (e.g. control vs data cell), & sets shared props between all cells
14791
- */
14792
- export const Cell: FunctionComponent<CellProps>;
14793
- export {};
14794
-
14795
14840
  }
14796
14841
  declare module '@elastic/eui/src/components/datagrid/body/data_grid_row_manager' {
14797
14842
  import { RefObject } from 'react';
@@ -15198,13 +15243,6 @@ declare module '@elastic/eui/src/components/datagrid/utils/in_memory' {
15198
15243
  */
15199
15244
  export const EuiDataGridInMemoryRenderer: FunctionComponent<EuiDataGridInMemoryRendererProps>;
15200
15245
 
15201
- }
15202
- declare module '@elastic/eui/src/components/datagrid/body/header/header_is_interactive' {
15203
- export const useHeaderIsInteractive: (gridElement: HTMLElement | null) => {
15204
- headerIsInteractive: boolean;
15205
- handleHeaderMutation: MutationCallback;
15206
- };
15207
-
15208
15246
  }
15209
15247
  declare module '@elastic/eui/src/components/datagrid/utils/row_count' {
15210
15248
  import { EuiDataGridProps, EuiDataGridVisibleRows } from '@elastic/eui/src/components/datagrid/data_grid_types';
@@ -19531,7 +19569,7 @@ declare module '@elastic/eui/src/components/tree_view/tree_view' {
19531
19569
  static contextType: React.Context<string>;
19532
19570
  context: ContextType<typeof EuiTreeViewContext>;
19533
19571
  isNested: boolean;
19534
- constructor(props: EuiTreeViewProps, context: ContextType<typeof EuiTreeViewContext>);
19572
+ constructor(props: EuiTreeViewProps, context?: ContextType<typeof EuiTreeViewContext>);
19535
19573
  componentDidUpdate(prevProps: EuiTreeViewProps): void;
19536
19574
  buttonRef: Array<HTMLButtonElement | undefined>;
19537
19575
  setButtonRef: (ref: HTMLButtonElement | HTMLAnchorElement | null, index: number) => void;
@@ -28477,6 +28515,8 @@ declare module '@elastic/eui' {
28477
28515
  "euiComboBox.listboxAriaLabel": any;
28478
28516
  "euiDataGridCellActions.expandButtonTitle": any;
28479
28517
  "euiDataGridCell.position": any;
28518
+ "euiDataGridCell.expansionEnterPrompt": any;
28519
+ "euiDataGridCell.focusTrapEnterPrompt": any;
28480
28520
  "euiColumnActions.hideColumn": any;
28481
28521
  "euiColumnActions.moveLeft": any;
28482
28522
  "euiColumnActions.moveRight": any;