@elastic/eui 97.0.0 → 97.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (161) hide show
  1. package/es/components/datagrid/body/cell/data_grid_cell.styles.js +4 -2
  2. package/es/components/datagrid/body/cell/focus_utils.js +14 -4
  3. package/es/components/datagrid/body/data_grid_body.js +2 -1
  4. package/es/components/datagrid/body/data_grid_body_custom.js +5 -2
  5. package/es/components/datagrid/body/data_grid_body_virtualized.js +8 -4
  6. package/es/components/datagrid/body/header/column_actions.js +262 -27
  7. package/es/components/datagrid/body/header/{data_grid_column_resizer.js → column_resizer.js} +10 -4
  8. package/es/components/datagrid/body/header/{data_grid_column_resizer.styles.js → column_resizer.styles.js} +6 -1
  9. package/es/components/datagrid/body/header/column_sorting.js +134 -0
  10. package/es/components/datagrid/body/header/data_grid_control_header_cell.js +3 -3
  11. package/es/components/datagrid/body/header/data_grid_header_cell.js +86 -305
  12. package/es/components/datagrid/body/header/data_grid_header_cell.styles.js +1 -1
  13. package/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js +19 -17
  14. package/es/components/datagrid/body/header/data_grid_header_cell_wrapper.styles.js +1 -2
  15. package/es/components/datagrid/body/header/data_grid_header_row.js +25 -10
  16. package/es/components/datagrid/body/header/draggable_columns.js +301 -0
  17. package/es/components/datagrid/body/header/draggable_columns.styles.js +38 -0
  18. package/es/components/datagrid/data_grid.js +2 -1
  19. package/es/components/datagrid/data_grid.stories.utils.js +9 -6
  20. package/es/components/datagrid/utils/col_widths.js +4 -6
  21. package/es/components/datagrid/utils/focus.js +2 -2
  22. package/es/components/datagrid/utils/scrolling.js +13 -10
  23. package/es/components/date_picker/super_date_picker/date_popover/absolute_tab.js +8 -2
  24. package/es/components/date_picker/super_date_picker/date_popover/date_popover_button.js +8 -2
  25. package/es/components/date_picker/super_date_picker/date_popover/date_popover_content.js +8 -2
  26. package/es/components/date_picker/super_date_picker/super_date_picker.js +27 -5
  27. package/es/components/drag_and_drop/draggable.js +13 -5
  28. package/es/components/header/header.styles.js +6 -12
  29. package/es/components/header/header_links/header_links.js +1 -1
  30. package/es/components/header/header_links/header_links.styles.js +1 -0
  31. package/es/components/page_template/inner/page_inner.styles.js +3 -4
  32. package/es/components/tabs/tab.js +1 -1
  33. package/eui.d.ts +417 -307
  34. package/i18ntokens.json +175 -175
  35. package/lib/components/datagrid/body/cell/data_grid_cell.styles.js +4 -2
  36. package/lib/components/datagrid/body/cell/focus_utils.js +14 -4
  37. package/lib/components/datagrid/body/data_grid_body.js +2 -1
  38. package/lib/components/datagrid/body/data_grid_body_custom.js +5 -2
  39. package/lib/components/datagrid/body/data_grid_body_virtualized.js +8 -4
  40. package/lib/components/datagrid/body/header/column_actions.js +265 -29
  41. package/lib/components/datagrid/body/header/{data_grid_column_resizer.js → column_resizer.js} +11 -5
  42. package/{optimize/lib/components/datagrid/body/header/data_grid_column_resizer.styles.js → lib/components/datagrid/body/header/column_resizer.styles.js} +6 -1
  43. package/lib/components/datagrid/body/header/column_sorting.js +144 -0
  44. package/lib/components/datagrid/body/header/data_grid_control_header_cell.js +3 -3
  45. package/lib/components/datagrid/body/header/data_grid_header_cell.js +86 -305
  46. package/lib/components/datagrid/body/header/data_grid_header_cell.styles.js +1 -1
  47. package/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js +19 -17
  48. package/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.styles.js +1 -2
  49. package/lib/components/datagrid/body/header/data_grid_header_row.js +24 -9
  50. package/lib/components/datagrid/body/header/draggable_columns.js +308 -0
  51. package/lib/components/datagrid/body/header/draggable_columns.styles.js +42 -0
  52. package/lib/components/datagrid/data_grid.js +2 -1
  53. package/lib/components/datagrid/data_grid.stories.utils.js +9 -6
  54. package/lib/components/datagrid/utils/col_widths.js +4 -6
  55. package/lib/components/datagrid/utils/focus.js +2 -2
  56. package/lib/components/datagrid/utils/scrolling.js +13 -10
  57. package/lib/components/date_picker/super_date_picker/date_popover/absolute_tab.js +8 -2
  58. package/lib/components/date_picker/super_date_picker/date_popover/date_popover_button.js +8 -2
  59. package/lib/components/date_picker/super_date_picker/date_popover/date_popover_content.js +8 -2
  60. package/lib/components/date_picker/super_date_picker/super_date_picker.js +27 -5
  61. package/lib/components/drag_and_drop/draggable.js +13 -5
  62. package/lib/components/header/header.styles.js +6 -12
  63. package/lib/components/header/header_links/header_links.js +1 -1
  64. package/lib/components/header/header_links/header_links.styles.js +1 -0
  65. package/lib/components/page_template/inner/page_inner.styles.js +3 -4
  66. package/lib/components/tabs/tab.js +1 -1
  67. package/optimize/es/components/datagrid/body/cell/data_grid_cell.styles.js +4 -2
  68. package/optimize/es/components/datagrid/body/cell/focus_utils.js +13 -4
  69. package/optimize/es/components/datagrid/body/data_grid_body_custom.js +3 -1
  70. package/optimize/es/components/datagrid/body/data_grid_body_virtualized.js +6 -3
  71. package/optimize/es/components/datagrid/body/header/column_actions.js +250 -26
  72. package/optimize/es/components/datagrid/body/header/{data_grid_column_resizer.js → column_resizer.js} +8 -3
  73. package/optimize/es/components/datagrid/body/header/{data_grid_column_resizer.styles.js → column_resizer.styles.js} +6 -1
  74. package/optimize/es/components/datagrid/body/header/column_sorting.js +134 -0
  75. package/optimize/es/components/datagrid/body/header/data_grid_control_header_cell.js +2 -2
  76. package/optimize/es/components/datagrid/body/header/data_grid_header_cell.js +82 -302
  77. package/optimize/es/components/datagrid/body/header/data_grid_header_cell.styles.js +1 -1
  78. package/optimize/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js +15 -14
  79. package/optimize/es/components/datagrid/body/header/data_grid_header_cell_wrapper.styles.js +1 -2
  80. package/optimize/es/components/datagrid/body/header/data_grid_header_row.js +25 -10
  81. package/optimize/es/components/datagrid/body/header/draggable_columns.js +223 -0
  82. package/optimize/es/components/datagrid/body/header/draggable_columns.styles.js +38 -0
  83. package/optimize/es/components/datagrid/data_grid.js +2 -1
  84. package/optimize/es/components/datagrid/data_grid.stories.utils.js +7 -5
  85. package/optimize/es/components/datagrid/utils/col_widths.js +4 -6
  86. package/optimize/es/components/datagrid/utils/focus.js +2 -2
  87. package/optimize/es/components/datagrid/utils/scrolling.js +13 -10
  88. package/optimize/es/components/date_picker/super_date_picker/date_popover/absolute_tab.js +5 -1
  89. package/optimize/es/components/date_picker/super_date_picker/date_popover/date_popover_button.js +6 -2
  90. package/optimize/es/components/date_picker/super_date_picker/date_popover/date_popover_content.js +6 -2
  91. package/optimize/es/components/date_picker/super_date_picker/super_date_picker.js +11 -5
  92. package/optimize/es/components/drag_and_drop/draggable.js +8 -3
  93. package/optimize/es/components/header/header.styles.js +6 -12
  94. package/optimize/es/components/header/header_links/header_links.js +1 -1
  95. package/optimize/es/components/header/header_links/header_links.styles.js +1 -0
  96. package/optimize/es/components/page_template/inner/page_inner.styles.js +3 -4
  97. package/optimize/es/components/tabs/tab.js +1 -1
  98. package/optimize/lib/components/datagrid/body/cell/data_grid_cell.styles.js +4 -2
  99. package/optimize/lib/components/datagrid/body/cell/focus_utils.js +13 -4
  100. package/optimize/lib/components/datagrid/body/data_grid_body_custom.js +3 -1
  101. package/optimize/lib/components/datagrid/body/data_grid_body_virtualized.js +6 -3
  102. package/optimize/lib/components/datagrid/body/header/column_actions.js +253 -27
  103. package/optimize/lib/components/datagrid/body/header/{data_grid_column_resizer.js → column_resizer.js} +9 -4
  104. package/{test-env/components/datagrid/body/header/data_grid_column_resizer.styles.js → optimize/lib/components/datagrid/body/header/column_resizer.styles.js} +6 -1
  105. package/optimize/lib/components/datagrid/body/header/column_sorting.js +144 -0
  106. package/optimize/lib/components/datagrid/body/header/data_grid_control_header_cell.js +2 -2
  107. package/optimize/lib/components/datagrid/body/header/data_grid_header_cell.js +80 -300
  108. package/optimize/lib/components/datagrid/body/header/data_grid_header_cell.styles.js +1 -1
  109. package/optimize/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js +15 -14
  110. package/optimize/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.styles.js +1 -2
  111. package/optimize/lib/components/datagrid/body/header/data_grid_header_row.js +24 -9
  112. package/optimize/lib/components/datagrid/body/header/draggable_columns.js +231 -0
  113. package/optimize/lib/components/datagrid/body/header/draggable_columns.styles.js +43 -0
  114. package/optimize/lib/components/datagrid/data_grid.js +2 -1
  115. package/optimize/lib/components/datagrid/data_grid.stories.utils.js +7 -5
  116. package/optimize/lib/components/datagrid/utils/col_widths.js +4 -6
  117. package/optimize/lib/components/datagrid/utils/focus.js +2 -2
  118. package/optimize/lib/components/datagrid/utils/scrolling.js +13 -10
  119. package/optimize/lib/components/date_picker/super_date_picker/date_popover/absolute_tab.js +5 -1
  120. package/optimize/lib/components/date_picker/super_date_picker/date_popover/date_popover_button.js +6 -2
  121. package/optimize/lib/components/date_picker/super_date_picker/date_popover/date_popover_content.js +6 -2
  122. package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.js +11 -5
  123. package/optimize/lib/components/drag_and_drop/draggable.js +8 -3
  124. package/optimize/lib/components/header/header.styles.js +6 -12
  125. package/optimize/lib/components/header/header_links/header_links.js +1 -1
  126. package/optimize/lib/components/header/header_links/header_links.styles.js +1 -0
  127. package/optimize/lib/components/page_template/inner/page_inner.styles.js +3 -4
  128. package/optimize/lib/components/tabs/tab.js +1 -1
  129. package/package.json +1 -1
  130. package/test-env/components/datagrid/body/cell/data_grid_cell.styles.js +4 -2
  131. package/test-env/components/datagrid/body/cell/focus_utils.js +13 -4
  132. package/test-env/components/datagrid/body/data_grid_body.js +2 -1
  133. package/test-env/components/datagrid/body/data_grid_body_custom.js +5 -2
  134. package/test-env/components/datagrid/body/data_grid_body_virtualized.js +8 -4
  135. package/test-env/components/datagrid/body/header/column_actions.js +261 -27
  136. package/test-env/components/datagrid/body/header/{data_grid_column_resizer.js → column_resizer.js} +11 -5
  137. package/{lib/components/datagrid/body/header/data_grid_column_resizer.styles.js → test-env/components/datagrid/body/header/column_resizer.styles.js} +6 -1
  138. package/test-env/components/datagrid/body/header/column_sorting.js +144 -0
  139. package/test-env/components/datagrid/body/header/data_grid_control_header_cell.js +3 -3
  140. package/test-env/components/datagrid/body/header/data_grid_header_cell.js +82 -301
  141. package/test-env/components/datagrid/body/header/data_grid_header_cell.styles.js +1 -1
  142. package/test-env/components/datagrid/body/header/data_grid_header_cell_wrapper.js +19 -17
  143. package/test-env/components/datagrid/body/header/data_grid_header_cell_wrapper.styles.js +1 -2
  144. package/test-env/components/datagrid/body/header/data_grid_header_row.js +24 -9
  145. package/test-env/components/datagrid/body/header/draggable_columns.js +305 -0
  146. package/test-env/components/datagrid/body/header/draggable_columns.styles.js +43 -0
  147. package/test-env/components/datagrid/data_grid.js +2 -1
  148. package/test-env/components/datagrid/data_grid.stories.utils.js +9 -6
  149. package/test-env/components/datagrid/utils/col_widths.js +4 -6
  150. package/test-env/components/datagrid/utils/focus.js +2 -2
  151. package/test-env/components/datagrid/utils/scrolling.js +13 -10
  152. package/test-env/components/date_picker/super_date_picker/date_popover/absolute_tab.js +8 -2
  153. package/test-env/components/date_picker/super_date_picker/date_popover/date_popover_button.js +8 -2
  154. package/test-env/components/date_picker/super_date_picker/date_popover/date_popover_content.js +8 -2
  155. package/test-env/components/date_picker/super_date_picker/super_date_picker.js +27 -5
  156. package/test-env/components/drag_and_drop/draggable.js +13 -5
  157. package/test-env/components/header/header.styles.js +6 -12
  158. package/test-env/components/header/header_links/header_links.js +1 -1
  159. package/test-env/components/header/header_links/header_links.styles.js +1 -0
  160. package/test-env/components/page_template/inner/page_inner.styles.js +3 -4
  161. package/test-env/components/tabs/tab.js +1 -1
package/eui.d.ts CHANGED
@@ -14470,7 +14470,7 @@ declare module '@elastic/eui/src/components/token' {
14470
14470
 
14471
14471
  }
14472
14472
  declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
14473
- import { ComponentType, JSXElementConstructor, ReactNode, HTMLAttributes, CSSProperties, ReactElement, AriaAttributes, MutableRefObject, Ref, Component, ComponentClass } from 'react';
14473
+ import { ComponentType, JSXElementConstructor, ReactNode, HTMLAttributes, CSSProperties, ReactElement, AriaAttributes, MutableRefObject, Ref, Component, ComponentClass, KeyboardEventHandler } from 'react';
14474
14474
  import { VariableSizeGridProps, VariableSizeGrid as Grid, GridOnItemsRenderedProps } from 'react-window';
14475
14475
  import { EuiListGroupItemProps } from '@elastic/eui/src/components/list_group';
14476
14476
  import { EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui/src/components/button';
@@ -14583,27 +14583,30 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
14583
14583
  setVisibleColumns: (columnId: string[]) => void;
14584
14584
  switchColumnPos: (colFromId: string, colToId: string) => void;
14585
14585
  gridStyles: EuiDataGridStyle;
14586
+ canDragAndDropColumns?: boolean;
14586
14587
  }
14587
14588
  export type EuiDataGridHeaderRowProps = CommonProps & HTMLAttributes<HTMLDivElement> & EuiDataGridHeaderRowPropsSpecificProps;
14588
- export interface EuiDataGridHeaderCellProps extends Omit<EuiDataGridHeaderRowPropsSpecificProps, 'leadingControlColumns' | 'gridStyles'> {
14589
- column: EuiDataGridColumn;
14589
+ export interface EuiDataGridHeaderCellProps extends Omit<EuiDataGridHeaderRowPropsSpecificProps, 'leadingControlColumns' | 'trailingControlColumns' | 'visibleColCount'> {
14590
14590
  index: number;
14591
+ column: EuiDataGridColumn;
14592
+ isLastColumn: boolean;
14591
14593
  }
14592
14594
  export interface EuiDataGridControlHeaderCellProps {
14593
14595
  index: number;
14594
- visibleColCount: number;
14596
+ isLastColumn: boolean;
14595
14597
  controlColumn: EuiDataGridControlColumn;
14596
14598
  }
14597
14599
  export interface EuiDataGridHeaderCellWrapperProps {
14598
14600
  children: ReactNode | ((renderFocusTrap: boolean) => ReactNode);
14599
14601
  id: string;
14600
14602
  index: number;
14601
- visibleColCount: number;
14603
+ isLastColumn: boolean;
14602
14604
  width?: number | null;
14603
14605
  className?: string;
14604
14606
  'aria-label'?: AriaAttributes['aria-label'];
14605
- hasActionsPopover?: boolean;
14606
- openActionsPopover?: () => void;
14607
+ hasColumnActions?: boolean;
14608
+ isDragging?: boolean;
14609
+ onKeyDown?: KeyboardEventHandler;
14607
14610
  }
14608
14611
  export type EuiDataGridFooterRowProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
14609
14612
  rowIndex: number;
@@ -14633,7 +14636,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
14633
14636
  export type EuiDataGridFocusedCell = [number, number];
14634
14637
  export interface DataGridFocusContextShape {
14635
14638
  focusedCell?: EuiDataGridFocusedCell;
14636
- setFocusedCell: (cell: EuiDataGridFocusedCell) => void;
14639
+ setFocusedCell: (cell: EuiDataGridFocusedCell, forceUpdate?: boolean) => void;
14637
14640
  setIsFocusedCellInView: (isFocusedCellInView: boolean) => void;
14638
14641
  onFocusUpdate: (cell: EuiDataGridFocusedCell, updateFocus: Function) => () => void;
14639
14642
  focusFirstVisibleInteractiveCell: () => void;
@@ -14832,6 +14835,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
14832
14835
  columnId: string;
14833
14836
  columnWidth: number;
14834
14837
  setColumnWidth: (columnId: string, width: number) => void;
14838
+ isLastColumn: boolean;
14835
14839
  }
14836
14840
  export interface EuiDataGridColumnResizerState {
14837
14841
  initialX: number;
@@ -14878,6 +14882,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
14878
14882
  gridItemsRendered: MutableRefObject<GridOnItemsRenderedProps | null>;
14879
14883
  wrapperRef: MutableRefObject<HTMLDivElement | null>;
14880
14884
  className?: string;
14885
+ canDragAndDropColumns?: boolean;
14881
14886
  }
14882
14887
  export interface EuiDataGridCustomBodyProps {
14883
14888
  /**
@@ -15191,6 +15196,8 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
15191
15196
  * A callback for when a column's visibility or order is modified by the user.
15192
15197
  */
15193
15198
  setVisibleColumns: (visibleColumns: string[]) => void;
15199
+ /** Enables reordering grid columns on drag and drop via the headers cells */
15200
+ canDragAndDropColumns?: boolean;
15194
15201
  }
15195
15202
  export interface EuiDataGridColumnWidths {
15196
15203
  [key: string]: number;
@@ -15455,6 +15462,165 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
15455
15462
  }
15456
15463
  export {};
15457
15464
 
15465
+ }
15466
+ declare module '@elastic/eui/src/components/drag_and_drop/drag_drop_context' {
15467
+ import React, { FunctionComponent } from 'react';
15468
+ import { DragDropContextProps } from '@hello-pangea/dnd'; type EuiDraggingType = string | null;
15469
+ export interface EuiDragDropContextProps {
15470
+ isDraggingType: EuiDraggingType;
15471
+ }
15472
+ export const EuiDragDropContextContext: React.Context<EuiDragDropContextProps>;
15473
+ export const EuiDragDropContext: FunctionComponent<DragDropContextProps>;
15474
+ export {};
15475
+
15476
+ }
15477
+ declare module '@elastic/eui/src/components/drag_and_drop/droppable.styles' {
15478
+ import { UseEuiTheme } from '@elastic/eui/src/services';
15479
+ export const euiDroppableStyles: (euiThemeContext: UseEuiTheme) => {
15480
+ euiDroppable: import("@emotion/utils").SerializedStyles;
15481
+ isDragging: import("@emotion/utils").SerializedStyles;
15482
+ isDraggingOver: import("@emotion/utils").SerializedStyles;
15483
+ grow: import("@emotion/utils").SerializedStyles;
15484
+ noGrow: import("@emotion/utils").SerializedStyles;
15485
+ spacing: {
15486
+ none: null;
15487
+ s: import("@emotion/utils").SerializedStyles;
15488
+ m: import("@emotion/utils").SerializedStyles;
15489
+ l: import("@emotion/utils").SerializedStyles;
15490
+ };
15491
+ };
15492
+ export const sharedSpacingPadding: ({ euiTheme }: UseEuiTheme) => {
15493
+ none: null;
15494
+ s: import("@emotion/utils").SerializedStyles;
15495
+ m: import("@emotion/utils").SerializedStyles;
15496
+ l: import("@emotion/utils").SerializedStyles;
15497
+ };
15498
+
15499
+ }
15500
+ declare module '@elastic/eui/src/components/drag_and_drop/droppable' {
15501
+ import React, { CSSProperties, FunctionComponent, ReactElement } from 'react';
15502
+ import { DroppableProps } from '@hello-pangea/dnd';
15503
+ import { CommonProps } from '@elastic/eui/src/components/common';
15504
+ export const SPACINGS: readonly ["none", "s", "m", "l"];
15505
+ export interface EuiDroppableProps extends CommonProps, Omit<DroppableProps, 'children'> {
15506
+ /**
15507
+ * ReactNode to render as this component's content
15508
+ */
15509
+ children: ReactElement | ReactElement[] | DroppableProps['children'];
15510
+ className?: string;
15511
+ /**
15512
+ * Makes its items immutable. Dragging creates cloned items that can be dropped elsewhere.
15513
+ */
15514
+ cloneDraggables?: boolean;
15515
+ style?: CSSProperties;
15516
+ /**
15517
+ * Adds padding to the droppable area
15518
+ */
15519
+ spacing?: (typeof SPACINGS)[number];
15520
+ /**
15521
+ * Adds an EuiPanel style to the droppable area
15522
+ */
15523
+ withPanel?: boolean;
15524
+ /**
15525
+ * Allow the panel to flex-grow?
15526
+ */
15527
+ grow?: boolean;
15528
+ }
15529
+ export const EuiDroppableContext: React.Context<{
15530
+ cloneItems: boolean;
15531
+ }>;
15532
+ export const EuiDroppable: FunctionComponent<EuiDroppableProps>;
15533
+
15534
+ }
15535
+ declare module '@elastic/eui/src/components/drag_and_drop/draggable.styles' {
15536
+ import { UseEuiTheme } from '@elastic/eui/src/services';
15537
+ export const euiDraggableStyles: (euiThemeContext: UseEuiTheme) => {
15538
+ euiDraggable: import("@emotion/utils").SerializedStyles;
15539
+ isDragging: import("@emotion/utils").SerializedStyles;
15540
+ hasClone: import("@emotion/utils").SerializedStyles;
15541
+ isRemovable: import("@emotion/utils").SerializedStyles;
15542
+ spacing: {
15543
+ none: null;
15544
+ s: import("@emotion/utils").SerializedStyles;
15545
+ m: import("@emotion/utils").SerializedStyles;
15546
+ l: import("@emotion/utils").SerializedStyles;
15547
+ };
15548
+ };
15549
+ export const euiDraggableItemStyles: {
15550
+ euiDraggable__item: import("@emotion/utils").SerializedStyles;
15551
+ disabled: import("@emotion/utils").SerializedStyles;
15552
+ };
15553
+
15554
+ }
15555
+ declare module '@elastic/eui/src/components/drag_and_drop/draggable' {
15556
+ import { CSSProperties, FunctionComponent, ReactElement } from 'react';
15557
+ import { DraggableProps } from '@hello-pangea/dnd';
15558
+ import { CommonProps } from '@elastic/eui/src/components/common';
15559
+ import { SPACINGS } from '@elastic/eui/src/components/drag_and_drop/droppable';
15560
+ export interface EuiDraggableProps extends CommonProps, Omit<DraggableProps, 'children'> {
15561
+ /**
15562
+ * ReactNode to render as this component's content
15563
+ */
15564
+ children: ReactElement | DraggableProps['children'];
15565
+ className?: string;
15566
+ /**
15567
+ * Whether the `children` will provide and set up its own drag handle.
15568
+ * The `custom` value additionally removes the `role` from the draggable container.
15569
+ * Use this if the `children` element is focusable and should keep its
15570
+ * semantic role for accessibility purposes.
15571
+ */
15572
+ customDragHandle?: boolean | 'custom';
15573
+ /**
15574
+ * Whether the container has interactive children and should have `role="group"` instead of `"button"`.
15575
+ * Setting this flag ensures your drag & drop container is keyboard and screen reader accessible.
15576
+ */
15577
+ hasInteractiveChildren?: boolean;
15578
+ /**
15579
+ * Whether the item is currently in a position to be removed
15580
+ */
15581
+ isRemovable?: boolean;
15582
+ /**
15583
+ * Whether the currently dragged item is cloned into a portal in the body. This settings will
15584
+ * ensure that drag & drop still works as expected within stacking contexts (e.g. within `EuiFlyout`,
15585
+ * `EuiModal` and `EuiPopover`).
15586
+ *
15587
+ * Make sure to apply styles directly to the Draggable content as relative styling from an outside
15588
+ * scope might not be applied when the content is placed in a portal as the DOM structure changes.
15589
+ */
15590
+ usePortal?: boolean;
15591
+ /**
15592
+ * Adds padding to the draggable item
15593
+ */
15594
+ spacing?: (typeof SPACINGS)[number];
15595
+ style?: CSSProperties;
15596
+ }
15597
+ export const EuiDraggable: FunctionComponent<EuiDraggableProps>;
15598
+
15599
+ }
15600
+ declare module '@elastic/eui/src/components/drag_and_drop/services' {
15601
+ import { DraggableLocation } from '@hello-pangea/dnd';
15602
+ interface DropResult {
15603
+ [droppableId: string]: any[];
15604
+ }
15605
+ export const euiDragDropReorder: <T extends any[]>(list: T, startIndex: number, endIndex: number) => T;
15606
+ export const euiDragDropMove: (sourceList: any[], destinationList: any[], dropResultSource: DraggableLocation, dropResultDestination: DraggableLocation) => DropResult;
15607
+ export const euiDragDropCopy: (sourceList: any[], destinationList: any[], dropResultSource: DraggableLocation, dropResultDestination: DraggableLocation, idModification: {
15608
+ property: string | number;
15609
+ modifier: () => string | number;
15610
+ }) => DropResult;
15611
+ export {};
15612
+
15613
+ }
15614
+ declare module '@elastic/eui/src/components/drag_and_drop' {
15615
+ export type { EuiDragDropContextProps } from '@elastic/eui/src/components/drag_and_drop/drag_drop_context';
15616
+ export { EuiDragDropContext } from '@elastic/eui/src/components/drag_and_drop/drag_drop_context';
15617
+ export type { EuiDraggableProps } from '@elastic/eui/src/components/drag_and_drop/draggable';
15618
+ export { EuiDraggable } from '@elastic/eui/src/components/drag_and_drop/draggable';
15619
+ export type { EuiDroppableProps } from '@elastic/eui/src/components/drag_and_drop/droppable';
15620
+ export { EuiDroppable } from '@elastic/eui/src/components/drag_and_drop/droppable';
15621
+ export { euiDragDropCopy, euiDragDropMove, euiDragDropReorder, } from '@elastic/eui/src/components/drag_and_drop/services';
15622
+ export type { DraggableLocation, DraggableProps, DraggableProvidedDragHandleProps, DragDropContextProps, DragStart, DroppableProps, DropResult, ResponderProvided, } from '@hello-pangea/dnd';
15623
+
15458
15624
  }
15459
15625
  declare module '@elastic/eui/src/components/datagrid/utils/focus' {
15460
15626
  import { HTMLAttributes, KeyboardEvent } from 'react';
@@ -15489,6 +15655,108 @@ declare module '@elastic/eui/src/components/datagrid/utils/focus' {
15489
15655
  export const getParentCellContent: (_element: Node | HTMLElement) => HTMLElement | null;
15490
15656
  export {};
15491
15657
 
15658
+ }
15659
+ declare module '@elastic/eui/src/components/datagrid/data_grid.styles' {
15660
+ import { UseEuiTheme } from '@elastic/eui/src/services';
15661
+ export const euiDataGridVariables: (euiThemeContext: UseEuiTheme) => {
15662
+ cellPadding: {
15663
+ s: string;
15664
+ m: string;
15665
+ l: string;
15666
+ };
15667
+ lineHeight: {
15668
+ s: import("csstype").Property.LineHeight<string | number> | undefined;
15669
+ m: import("csstype").Property.LineHeight<string | number> | undefined;
15670
+ };
15671
+ fontSize: {
15672
+ s: import("csstype").Property.FontSize<string | number> | undefined;
15673
+ m: import("csstype").Property.FontSize<string | number> | undefined;
15674
+ };
15675
+ levels: {
15676
+ cellPopover: number;
15677
+ readonly stickyHeader: number;
15678
+ };
15679
+ };
15680
+ export const euiDataGridStyles: (euiThemeContext: UseEuiTheme) => {
15681
+ euiDataGrid: import("@emotion/utils").SerializedStyles;
15682
+ cellPadding: {
15683
+ cellPadding: (size: 's' | 'm' | 'l') => import("@emotion/utils").SerializedStyles;
15684
+ readonly s: import("@emotion/utils").SerializedStyles;
15685
+ readonly m: import("@emotion/utils").SerializedStyles;
15686
+ readonly l: import("@emotion/utils").SerializedStyles;
15687
+ };
15688
+ fontSize: {
15689
+ fontSize: (size: 's' | 'm') => import("@emotion/utils").SerializedStyles;
15690
+ readonly s: import("@emotion/utils").SerializedStyles;
15691
+ readonly m: import("@emotion/utils").SerializedStyles;
15692
+ readonly l: import("@emotion/utils").SerializedStyles;
15693
+ };
15694
+ borders: {
15695
+ none: null;
15696
+ horizontal: import("@emotion/utils").SerializedStyles;
15697
+ all: import("@emotion/utils").SerializedStyles;
15698
+ };
15699
+ euiDataGrid__content: import("@emotion/utils").SerializedStyles;
15700
+ euiDataGrid__focusWrap: import("@emotion/utils").SerializedStyles;
15701
+ };
15702
+
15703
+ }
15704
+ declare module '@elastic/eui/src/components/datagrid/body/header/draggable_columns.styles' {
15705
+ import { UseEuiTheme } from '@elastic/eui/src/services';
15706
+ export const euiDataGridDraggableHeaderStyles: ({ euiTheme }: UseEuiTheme) => {
15707
+ euiDataGridHeaderDroppable: import("@emotion/utils").SerializedStyles;
15708
+ euiDataGridHeaderCellDraggableWrapper: import("@emotion/utils").SerializedStyles;
15709
+ euiDataGridHeaderCellDraggable: import("@emotion/utils").SerializedStyles;
15710
+ isKeyboardDragging: import("@emotion/utils").SerializedStyles;
15711
+ underline: import("@emotion/utils").SerializedStyles;
15712
+ shade: import("@emotion/utils").SerializedStyles;
15713
+ noLeadingBorder: import("@emotion/utils").SerializedStyles;
15714
+ };
15715
+
15716
+ }
15717
+ declare module '@elastic/eui/src/components/datagrid/body/header/draggable_columns' {
15718
+ import { CSSProperties, FunctionComponent, ComponentProps, ReactElement, ReactNode } from 'react';
15719
+ import { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd';
15720
+ import { EuiDroppableProps } from '@elastic/eui/src/components/drag_and_drop';
15721
+ import { EuiDataGridHeaderRowProps, EuiDataGridStyle } from '@elastic/eui/src/components/datagrid/data_grid_types';
15722
+ /**
15723
+ * Parent context + EuiDroppable wrapper
15724
+ */
15725
+ export const DroppableColumns: FunctionComponent<Pick<EuiDataGridHeaderRowProps, 'columns' | 'switchColumnPos'> & {
15726
+ indexOffset: number;
15727
+ children: EuiDroppableProps['children'];
15728
+ }>;
15729
+ /**
15730
+ * Individual EuiDraggable columns
15731
+ */
15732
+ export const DraggableColumn: FunctionComponent<{
15733
+ id: string;
15734
+ index: number;
15735
+ gridStyles: EuiDataGridStyle;
15736
+ columnResizer?: ReactNode;
15737
+ actionsPopoverToggle?: HTMLButtonElement | null;
15738
+ children: (dragProps?: Partial<DraggableProvidedDragHandleProps> & {
15739
+ 'data-column-moving'?: boolean;
15740
+ }) => ReactElement;
15741
+ }>; type CanDragAndDropColumns = {
15742
+ canDragAndDropColumns: boolean;
15743
+ };
15744
+ export const ConditionalDroppableColumns: FunctionComponent<ComponentProps<typeof DroppableColumns> & CanDragAndDropColumns>;
15745
+ export const ConditionalDraggableColumn: FunctionComponent<ComponentProps<typeof DraggableColumn> & CanDragAndDropColumns>;
15746
+ /**
15747
+ * Creates an invisible overlay that prevents hover interactions/transitions
15748
+ * on other elements that the dragged element is dragged over, and also maintains
15749
+ * the intended drag cursor over any location.
15750
+ *
15751
+ * TODO: If this is useful elsewhere, consider moving it to `src/services`
15752
+ */
15753
+ export const DragOverlay: FunctionComponent<{
15754
+ isDragging?: boolean;
15755
+ cursor?: CSSProperties['cursor'];
15756
+ zIndex?: CSSProperties['zIndex'];
15757
+ }>;
15758
+ export {};
15759
+
15492
15760
  }
15493
15761
  declare module '@elastic/eui/src/utils/prop_types/is' {
15494
15762
  export const is: <T>(expectedValue: any) => {
@@ -15582,209 +15850,54 @@ declare module '@elastic/eui/src/components/datagrid/body/cell/data_grid_cell.st
15582
15850
  focusTrapped: string;
15583
15851
  };
15584
15852
  actions: {
15585
- hoverZone: string;
15586
- hoverColor: string;
15587
- showAnimation: string;
15588
- hoverAnimation: string;
15589
- };
15590
- header: {
15591
- focus: string;
15592
- focusTrapped: string;
15593
- hideActions: string;
15594
- };
15595
- };
15596
- export const euiDataGridRowCellStyles: (euiThemeContext: UseEuiTheme) => {
15597
- euiDataGridRowCell: import("@emotion/utils").SerializedStyles;
15598
- content: {
15599
- euiDataGridRowCell__content: import("@emotion/utils").SerializedStyles;
15600
- autoHeight: import("@emotion/utils").SerializedStyles;
15601
- defaultHeight: import("@emotion/utils").SerializedStyles;
15602
- controlColumn: import("@emotion/utils").SerializedStyles;
15603
- };
15604
- };
15605
-
15606
- }
15607
- declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_cell_wrapper.styles' {
15608
- import { UseEuiTheme } from '@elastic/eui/src/services';
15609
- /**
15610
- * Styles that apply to both control and non-control columns
15611
- */
15612
- export const euiDataGridHeaderCellWrapperStyles: (euiThemeContext: UseEuiTheme) => {
15613
- euiDataGridHeaderCell: import("@emotion/utils").SerializedStyles;
15614
- };
15615
-
15616
- }
15617
- declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_cell_wrapper' {
15618
- import { FunctionComponent } from 'react';
15619
- import { EuiDataGridHeaderCellWrapperProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
15620
- /**
15621
- * This is a wrapper that handles repeated concerns between control &
15622
- * standard header cells. Most of its shared logic is around focus state/UX,
15623
- * but it also DRY's out certain class/data-test-subj/style attributes
15624
- */
15625
- export const EuiDataGridHeaderCellWrapper: FunctionComponent<EuiDataGridHeaderCellWrapperProps>;
15626
-
15627
- }
15628
- declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_control_header_cell' {
15629
- import { FunctionComponent } from 'react';
15630
- import { EuiDataGridControlHeaderCellProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
15631
- export const EuiDataGridControlHeaderCell: FunctionComponent<EuiDataGridControlHeaderCellProps>;
15632
-
15633
- }
15634
- declare module '@elastic/eui/src/components/drag_and_drop/drag_drop_context' {
15635
- import React, { FunctionComponent } from 'react';
15636
- import { DragDropContextProps } from '@hello-pangea/dnd'; type EuiDraggingType = string | null;
15637
- export interface EuiDragDropContextProps {
15638
- isDraggingType: EuiDraggingType;
15639
- }
15640
- export const EuiDragDropContextContext: React.Context<EuiDragDropContextProps>;
15641
- export const EuiDragDropContext: FunctionComponent<DragDropContextProps>;
15642
- export {};
15643
-
15644
- }
15645
- declare module '@elastic/eui/src/components/drag_and_drop/droppable.styles' {
15646
- import { UseEuiTheme } from '@elastic/eui/src/services';
15647
- export const euiDroppableStyles: (euiThemeContext: UseEuiTheme) => {
15648
- euiDroppable: import("@emotion/utils").SerializedStyles;
15649
- isDragging: import("@emotion/utils").SerializedStyles;
15650
- isDraggingOver: import("@emotion/utils").SerializedStyles;
15651
- grow: import("@emotion/utils").SerializedStyles;
15652
- noGrow: import("@emotion/utils").SerializedStyles;
15653
- spacing: {
15654
- none: null;
15655
- s: import("@emotion/utils").SerializedStyles;
15656
- m: import("@emotion/utils").SerializedStyles;
15657
- l: import("@emotion/utils").SerializedStyles;
15658
- };
15659
- };
15660
- export const sharedSpacingPadding: ({ euiTheme }: UseEuiTheme) => {
15661
- none: null;
15662
- s: import("@emotion/utils").SerializedStyles;
15663
- m: import("@emotion/utils").SerializedStyles;
15664
- l: import("@emotion/utils").SerializedStyles;
15665
- };
15666
-
15667
- }
15668
- declare module '@elastic/eui/src/components/drag_and_drop/droppable' {
15669
- import React, { CSSProperties, FunctionComponent, ReactElement } from 'react';
15670
- import { DroppableProps } from '@hello-pangea/dnd';
15671
- import { CommonProps } from '@elastic/eui/src/components/common';
15672
- export const SPACINGS: readonly ["none", "s", "m", "l"];
15673
- export interface EuiDroppableProps extends CommonProps, Omit<DroppableProps, 'children'> {
15674
- /**
15675
- * ReactNode to render as this component's content
15676
- */
15677
- children: ReactElement | ReactElement[] | DroppableProps['children'];
15678
- className?: string;
15679
- /**
15680
- * Makes its items immutable. Dragging creates cloned items that can be dropped elsewhere.
15681
- */
15682
- cloneDraggables?: boolean;
15683
- style?: CSSProperties;
15684
- /**
15685
- * Adds padding to the droppable area
15686
- */
15687
- spacing?: (typeof SPACINGS)[number];
15688
- /**
15689
- * Adds an EuiPanel style to the droppable area
15690
- */
15691
- withPanel?: boolean;
15692
- /**
15693
- * Allow the panel to flex-grow?
15694
- */
15695
- grow?: boolean;
15696
- }
15697
- export const EuiDroppableContext: React.Context<{
15698
- cloneItems: boolean;
15699
- }>;
15700
- export const EuiDroppable: FunctionComponent<EuiDroppableProps>;
15701
-
15702
- }
15703
- declare module '@elastic/eui/src/components/drag_and_drop/draggable.styles' {
15704
- import { UseEuiTheme } from '@elastic/eui/src/services';
15705
- export const euiDraggableStyles: (euiThemeContext: UseEuiTheme) => {
15706
- euiDraggable: import("@emotion/utils").SerializedStyles;
15707
- isDragging: import("@emotion/utils").SerializedStyles;
15708
- hasClone: import("@emotion/utils").SerializedStyles;
15709
- isRemovable: import("@emotion/utils").SerializedStyles;
15710
- spacing: {
15711
- none: null;
15712
- s: import("@emotion/utils").SerializedStyles;
15713
- m: import("@emotion/utils").SerializedStyles;
15714
- l: import("@emotion/utils").SerializedStyles;
15853
+ hoverZone: string;
15854
+ hoverColor: string;
15855
+ showAnimation: string;
15856
+ hoverAnimation: string;
15857
+ };
15858
+ header: {
15859
+ focus: string;
15860
+ focusTrapped: string;
15861
+ showActions: string;
15862
+ hideActions: string;
15715
15863
  };
15716
15864
  };
15717
- export const euiDraggableItemStyles: {
15718
- euiDraggable__item: import("@emotion/utils").SerializedStyles;
15719
- disabled: import("@emotion/utils").SerializedStyles;
15865
+ export const euiDataGridRowCellStyles: (euiThemeContext: UseEuiTheme) => {
15866
+ euiDataGridRowCell: import("@emotion/utils").SerializedStyles;
15867
+ content: {
15868
+ euiDataGridRowCell__content: import("@emotion/utils").SerializedStyles;
15869
+ autoHeight: import("@emotion/utils").SerializedStyles;
15870
+ defaultHeight: import("@emotion/utils").SerializedStyles;
15871
+ controlColumn: import("@emotion/utils").SerializedStyles;
15872
+ };
15720
15873
  };
15721
15874
 
15722
15875
  }
15723
- declare module '@elastic/eui/src/components/drag_and_drop/draggable' {
15724
- import { CSSProperties, FunctionComponent, ReactElement } from 'react';
15725
- import { DraggableProps } from '@hello-pangea/dnd';
15726
- import { CommonProps } from '@elastic/eui/src/components/common';
15727
- import { SPACINGS } from '@elastic/eui/src/components/drag_and_drop/droppable';
15728
- export interface EuiDraggableProps extends CommonProps, Omit<DraggableProps, 'children'> {
15729
- /**
15730
- * ReactNode to render as this component's content
15731
- */
15732
- children: ReactElement | DraggableProps['children'];
15733
- className?: string;
15734
- /**
15735
- * Whether the `children` will provide and set up its own drag handle
15736
- */
15737
- customDragHandle?: boolean;
15738
- /**
15739
- * Whether the container has interactive children and should have `role="group"` instead of `"button"`.
15740
- * Setting this flag ensures your drag & drop container is keyboard and screen reader accessible.
15741
- */
15742
- hasInteractiveChildren?: boolean;
15743
- /**
15744
- * Whether the item is currently in a position to be removed
15745
- */
15746
- isRemovable?: boolean;
15747
- /**
15748
- * Whether the currently dragged item is cloned into a portal in the body. This settings will
15749
- * ensure that drag & drop still works as expected within stacking contexts (e.g. within `EuiFlyout`,
15750
- * `EuiModal` and `EuiPopover`).
15751
- *
15752
- * Make sure to apply styles directly to the Draggable content as relative styling from an outside
15753
- * scope might not be applied when the content is placed in a portal as the DOM structure changes.
15754
- */
15755
- usePortal?: boolean;
15756
- /**
15757
- * Adds padding to the draggable item
15758
- */
15759
- spacing?: (typeof SPACINGS)[number];
15760
- style?: CSSProperties;
15761
- }
15762
- export const EuiDraggable: FunctionComponent<EuiDraggableProps>;
15876
+ declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_cell_wrapper.styles' {
15877
+ import { UseEuiTheme } from '@elastic/eui/src/services';
15878
+ /**
15879
+ * Styles that apply to both control and non-control columns
15880
+ */
15881
+ export const euiDataGridHeaderCellWrapperStyles: (euiThemeContext: UseEuiTheme) => {
15882
+ euiDataGridHeaderCell: import("@emotion/utils").SerializedStyles;
15883
+ };
15763
15884
 
15764
15885
  }
15765
- declare module '@elastic/eui/src/components/drag_and_drop/services' {
15766
- import { DraggableLocation } from '@hello-pangea/dnd';
15767
- interface DropResult {
15768
- [droppableId: string]: any[];
15769
- }
15770
- export const euiDragDropReorder: <T extends any[]>(list: T, startIndex: number, endIndex: number) => T;
15771
- export const euiDragDropMove: (sourceList: any[], destinationList: any[], dropResultSource: DraggableLocation, dropResultDestination: DraggableLocation) => DropResult;
15772
- export const euiDragDropCopy: (sourceList: any[], destinationList: any[], dropResultSource: DraggableLocation, dropResultDestination: DraggableLocation, idModification: {
15773
- property: string | number;
15774
- modifier: () => string | number;
15775
- }) => DropResult;
15776
- export {};
15886
+ declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_cell_wrapper' {
15887
+ import { FunctionComponent } from 'react';
15888
+ import { EuiDataGridHeaderCellWrapperProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
15889
+ /**
15890
+ * This is a wrapper that handles repeated concerns between control &
15891
+ * standard header cells. Most of its shared logic is around focus state/UX,
15892
+ * but it also DRY's out certain class/data-test-subj/style attributes
15893
+ */
15894
+ export const EuiDataGridHeaderCellWrapper: FunctionComponent<EuiDataGridHeaderCellWrapperProps>;
15777
15895
 
15778
15896
  }
15779
- declare module '@elastic/eui/src/components/drag_and_drop' {
15780
- export type { EuiDragDropContextProps } from '@elastic/eui/src/components/drag_and_drop/drag_drop_context';
15781
- export { EuiDragDropContext } from '@elastic/eui/src/components/drag_and_drop/drag_drop_context';
15782
- export type { EuiDraggableProps } from '@elastic/eui/src/components/drag_and_drop/draggable';
15783
- export { EuiDraggable } from '@elastic/eui/src/components/drag_and_drop/draggable';
15784
- export type { EuiDroppableProps } from '@elastic/eui/src/components/drag_and_drop/droppable';
15785
- export { EuiDroppable } from '@elastic/eui/src/components/drag_and_drop/droppable';
15786
- export { euiDragDropCopy, euiDragDropMove, euiDragDropReorder, } from '@elastic/eui/src/components/drag_and_drop/services';
15787
- export type { DraggableLocation, DraggableProps, DraggableProvidedDragHandleProps, DragDropContextProps, DragStart, DroppableProps, DropResult, ResponderProvided, } from '@hello-pangea/dnd';
15897
+ declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_control_header_cell' {
15898
+ import { FunctionComponent } from 'react';
15899
+ import { EuiDataGridControlHeaderCellProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
15900
+ export const EuiDataGridControlHeaderCell: FunctionComponent<EuiDataGridControlHeaderCellProps>;
15788
15901
 
15789
15902
  }
15790
15903
  declare module '@elastic/eui/src/components/datagrid/controls/column_sorting.styles' {
@@ -15813,10 +15926,51 @@ declare module '@elastic/eui/src/components/datagrid/controls/column_sorting_dra
15813
15926
  export const defaultSortDescLabel: React.JSX.Element;
15814
15927
  export const EuiDataGridColumnSortingDraggable: FunctionComponent<EuiDataGridColumnSortingDraggableProps>;
15815
15928
 
15929
+ }
15930
+ declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_cell.styles' {
15931
+ import { UseEuiTheme } from '@elastic/eui/src/services';
15932
+ /**
15933
+ * Styles only applied to data header cell content, not control header cells
15934
+ */
15935
+ export const euiDataGridHeaderCellStyles: (euiThemeContext: UseEuiTheme) => {
15936
+ euiDataGridHeaderCell__content: import("@emotion/utils").SerializedStyles;
15937
+ right: import("@emotion/utils").SerializedStyles;
15938
+ euiDataGridHeaderCell__popover: import("@emotion/utils").SerializedStyles;
15939
+ euiDataGridHeaderCell__actions: import("@emotion/utils").SerializedStyles;
15940
+ };
15941
+
15816
15942
  }
15817
15943
  declare module '@elastic/eui/src/components/datagrid/body/header/column_actions' {
15818
- import { EuiDataGridColumn, EuiDataGridColumnActions, EuiDataGridSchema, EuiDataGridSchemaDetector, EuiDataGridSorting, DataGridFocusContextShape } from '@elastic/eui/src/components/datagrid/data_grid_types';
15944
+ import React, { Ref, KeyboardEventHandler, FunctionComponent } from 'react';
15819
15945
  import { EuiListGroupItemProps } from '@elastic/eui/src/components/list_group';
15946
+ import { EuiDataGridHeaderCellProps, EuiDataGridColumn, EuiDataGridColumnActions, EuiDataGridSchema, EuiDataGridSchemaDetector, EuiDataGridSorting, DataGridFocusContextShape } from '@elastic/eui/src/components/datagrid/data_grid_types';
15947
+ export const useHasColumnActions: (columnActions: EuiDataGridColumn['actions']) => boolean;
15948
+ export type PropsFromColumnActions = {
15949
+ className?: string;
15950
+ onKeyDown?: KeyboardEventHandler;
15951
+ 'data-column-moving'?: boolean;
15952
+ };
15953
+ export const ColumnActions: FunctionComponent<Pick<EuiDataGridHeaderCellProps, 'index' | 'column' | 'columns' | 'schema' | 'schemaDetectors' | 'setVisibleColumns' | 'switchColumnPos' | 'sorting'> & {
15954
+ id: string;
15955
+ title: string;
15956
+ hasFocusTrap: boolean;
15957
+ setPropsFromColumnActions: (props: PropsFromColumnActions) => void;
15958
+ actionsButtonRef: Ref<HTMLButtonElement>;
15959
+ }>;
15960
+ /**
15961
+ * Add keyboard arrow navigation to the cell actions popover
15962
+ * to match the UX of the rest of EuiDataGrid
15963
+ */
15964
+ export const usePopoverArrowNavigation: () => {
15965
+ panelRef: (ref: HTMLElement | null) => void;
15966
+ panelProps: {
15967
+ onKeyDown: (e: React.KeyboardEvent) => void;
15968
+ };
15969
+ popoverScreenReaderText: React.JSX.Element;
15970
+ };
15971
+ /**
15972
+ * Logic for returning an array of actions/items to pass to EuiListGroup
15973
+ */
15820
15974
  interface GetColumnActions {
15821
15975
  column: EuiDataGridColumn;
15822
15976
  columns: EuiDataGridColumn[];
@@ -15827,10 +15981,11 @@ declare module '@elastic/eui/src/components/datagrid/body/header/column_actions'
15827
15981
  setIsPopoverOpen: (value: boolean) => void;
15828
15982
  sorting: EuiDataGridSorting | undefined;
15829
15983
  switchColumnPos: (colFromId: string, colToId: string) => void;
15984
+ setIsColumnMoving: (value: boolean) => void;
15830
15985
  setFocusedCell: DataGridFocusContextShape['setFocusedCell'];
15831
15986
  columnFocusIndex: number;
15832
15987
  }
15833
- export const getColumnActions: ({ column, columns, schema, schemaDetectors, setVisibleColumns, focusFirstVisibleInteractiveCell, setIsPopoverOpen, sorting, switchColumnPos, setFocusedCell, columnFocusIndex, }: GetColumnActions) => EuiListGroupItemProps[]; type HideColumnAction = Pick<GetColumnActions, 'column' | 'columns' | 'setVisibleColumns' | 'focusFirstVisibleInteractiveCell'>;
15988
+ export const getColumnActions: ({ column, columns, schema, schemaDetectors, setVisibleColumns, focusFirstVisibleInteractiveCell, setIsPopoverOpen, sorting, switchColumnPos, setIsColumnMoving, setFocusedCell, columnFocusIndex, }: GetColumnActions) => EuiListGroupItemProps[]; type HideColumnAction = Pick<GetColumnActions, 'column' | 'columns' | 'setVisibleColumns' | 'focusFirstVisibleInteractiveCell'>;
15834
15989
  export const getHideColumnAction: ({ column, columns, setVisibleColumns, focusFirstVisibleInteractiveCell, }: HideColumnAction) => EuiListGroupItemProps[]; type SortColumnActions = Pick<GetColumnActions, 'column' | 'sorting' | 'schema' | 'schemaDetectors'>;
15835
15990
  export const getSortColumnActions: ({ column, sorting, schema, schemaDetectors, }: SortColumnActions) => EuiListGroupItemProps[];
15836
15991
  /**
@@ -15843,15 +15998,34 @@ declare module '@elastic/eui/src/components/datagrid/body/header/column_actions'
15843
15998
  export {};
15844
15999
 
15845
16000
  }
15846
- declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_column_resizer.styles' {
16001
+ declare module '@elastic/eui/src/components/datagrid/body/header/column_sorting' {
16002
+ import React from 'react';
16003
+ import { EuiDataGridSorting } from '@elastic/eui/src/components/datagrid/data_grid_types';
16004
+ /**
16005
+ * Column sorting utility helpers
16006
+ */
16007
+ export const useColumnSorting: ({ sorting, id, hasColumnActions, }: {
16008
+ sorting?: EuiDataGridSorting | undefined;
16009
+ id: string;
16010
+ hasColumnActions: boolean;
16011
+ }) => {
16012
+ sortingArrow: React.JSX.Element | null;
16013
+ ariaSort: "ascending" | "descending" | undefined;
16014
+ sortingAriaId: string;
16015
+ sortingScreenReaderText: React.JSX.Element | null;
16016
+ };
16017
+
16018
+ }
16019
+ declare module '@elastic/eui/src/components/datagrid/body/header/column_resizer.styles' {
15847
16020
  import { UseEuiTheme } from '@elastic/eui/src/services';
15848
16021
  export const euiDataGridColumnResizerStyles: (euiThemeContext: UseEuiTheme) => {
15849
16022
  euiDataGridColumnResizer: import("@emotion/utils").SerializedStyles;
16023
+ isLastColumn: import("@emotion/utils").SerializedStyles;
15850
16024
  isDragging: import("@emotion/utils").SerializedStyles;
15851
16025
  };
15852
16026
 
15853
16027
  }
15854
- declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_column_resizer' {
16028
+ declare module '@elastic/eui/src/components/datagrid/body/header/column_resizer' {
15855
16029
  import React, { Component } from 'react';
15856
16030
  import { EuiDataGridColumnResizerProps, EuiDataGridColumnResizerState } from '@elastic/eui/src/components/datagrid/data_grid_types';
15857
16031
  export class EuiDataGridColumnResizer extends Component<EuiDataGridColumnResizerProps, EuiDataGridColumnResizerState> {
@@ -15867,92 +16041,11 @@ declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_colum
15867
16041
  render(): React.JSX.Element;
15868
16042
  }
15869
16043
 
15870
- }
15871
- declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_cell.styles' {
15872
- import { UseEuiTheme } from '@elastic/eui/src/services';
15873
- /**
15874
- * Styles only applied to data header cell content, not control header cells
15875
- */
15876
- export const euiDataGridHeaderCellStyles: (euiThemeContext: UseEuiTheme) => {
15877
- euiDataGridHeaderCell__content: import("@emotion/utils").SerializedStyles;
15878
- right: import("@emotion/utils").SerializedStyles;
15879
- euiDataGridHeaderCell__popover: import("@emotion/utils").SerializedStyles;
15880
- euiDataGridHeaderCell__button: import("@emotion/utils").SerializedStyles;
15881
- };
15882
-
15883
16044
  }
15884
16045
  declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_cell' {
15885
- import React, { FunctionComponent } from 'react';
15886
- import { EuiDataGridHeaderCellProps, EuiDataGridSorting } from '@elastic/eui/src/components/datagrid/data_grid_types';
16046
+ import { FunctionComponent } from 'react';
16047
+ import { EuiDataGridHeaderCellProps } from '@elastic/eui/src/components/datagrid/data_grid_types';
15887
16048
  export const EuiDataGridHeaderCell: FunctionComponent<EuiDataGridHeaderCellProps>;
15888
- /**
15889
- * Column sorting utility helpers
15890
- */
15891
- export const useSortingUtils: ({ sorting, id, showColumnActions, }: {
15892
- sorting?: EuiDataGridSorting | undefined;
15893
- id: string;
15894
- showColumnActions: boolean;
15895
- }) => {
15896
- sortingArrow: React.JSX.Element | null;
15897
- ariaSort: "ascending" | "descending" | undefined;
15898
- sortingScreenReaderText: React.JSX.Element | null;
15899
- };
15900
- /**
15901
- * Add keyboard arrow navigation to the cell actions popover
15902
- * to match the UX of the rest of EuiDataGrid
15903
- */
15904
- export const usePopoverArrowNavigation: () => {
15905
- panelRef: (ref: HTMLElement | null) => void;
15906
- panelProps: {
15907
- onKeyDown: (e: React.KeyboardEvent) => void;
15908
- };
15909
- popoverScreenReaderText: React.JSX.Element;
15910
- };
15911
-
15912
- }
15913
- declare module '@elastic/eui/src/components/datagrid/data_grid.styles' {
15914
- import { UseEuiTheme } from '@elastic/eui/src/services';
15915
- export const euiDataGridVariables: (euiThemeContext: UseEuiTheme) => {
15916
- cellPadding: {
15917
- s: string;
15918
- m: string;
15919
- l: string;
15920
- };
15921
- lineHeight: {
15922
- s: import("csstype").Property.LineHeight<string | number> | undefined;
15923
- m: import("csstype").Property.LineHeight<string | number> | undefined;
15924
- };
15925
- fontSize: {
15926
- s: import("csstype").Property.FontSize<string | number> | undefined;
15927
- m: import("csstype").Property.FontSize<string | number> | undefined;
15928
- };
15929
- levels: {
15930
- cellPopover: number;
15931
- readonly stickyHeader: number;
15932
- };
15933
- };
15934
- export const euiDataGridStyles: (euiThemeContext: UseEuiTheme) => {
15935
- euiDataGrid: import("@emotion/utils").SerializedStyles;
15936
- cellPadding: {
15937
- cellPadding: (size: 's' | 'm' | 'l') => import("@emotion/utils").SerializedStyles;
15938
- readonly s: import("@emotion/utils").SerializedStyles;
15939
- readonly m: import("@emotion/utils").SerializedStyles;
15940
- readonly l: import("@emotion/utils").SerializedStyles;
15941
- };
15942
- fontSize: {
15943
- fontSize: (size: 's' | 'm') => import("@emotion/utils").SerializedStyles;
15944
- readonly s: import("@emotion/utils").SerializedStyles;
15945
- readonly m: import("@emotion/utils").SerializedStyles;
15946
- readonly l: import("@emotion/utils").SerializedStyles;
15947
- };
15948
- borders: {
15949
- none: null;
15950
- horizontal: import("@emotion/utils").SerializedStyles;
15951
- all: import("@emotion/utils").SerializedStyles;
15952
- };
15953
- euiDataGrid__content: import("@emotion/utils").SerializedStyles;
15954
- euiDataGrid__focusWrap: import("@emotion/utils").SerializedStyles;
15955
- };
15956
16049
 
15957
16050
  }
15958
16051
  declare module '@elastic/eui/src/components/datagrid/body/header/data_grid_header_row.styles' {
@@ -16235,6 +16328,7 @@ declare module '@elastic/eui/src/components/datagrid/utils/scrolling' {
16235
16328
  footerRowHeight: number;
16236
16329
  visibleRowCount: number;
16237
16330
  hasStickyFooter: boolean;
16331
+ canDragAndDropColumns?: boolean;
16238
16332
  }
16239
16333
  /**
16240
16334
  * The primary goal of this scroll logic is to ensure keyboard navigation works accessibly,
@@ -16249,7 +16343,7 @@ declare module '@elastic/eui/src/components/datagrid/utils/scrolling' {
16249
16343
  * Ensures that the passed cell is always fully in view by using cell position
16250
16344
  * checks and scroll adjustments/workarounds.
16251
16345
  */
16252
- export const useScrollCellIntoView: ({ gridRef, outerGridRef, hasGridScrolling, headerRowHeight, footerRowHeight, visibleRowCount, hasStickyFooter, }: Dependencies) => {
16346
+ export const useScrollCellIntoView: ({ gridRef, outerGridRef, hasGridScrolling, headerRowHeight, footerRowHeight, visibleRowCount, hasStickyFooter, canDragAndDropColumns, }: Dependencies) => {
16253
16347
  scrollCellIntoView: ({ rowIndex, colIndex }: ScrollCellIntoView) => Promise<void>;
16254
16348
  };
16255
16349
  /**
@@ -17354,7 +17448,7 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_p
17354
17448
  }
17355
17449
  declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_content' {
17356
17450
  import { FunctionComponent } from 'react';
17357
- import { LocaleSpecifier } from 'moment';
17451
+ import { LocaleSpecifier, Moment } from 'moment';
17358
17452
  import { TimeOptions } from '@elastic/eui/src/components/date_picker/super_date_picker/time_options';
17359
17453
  export interface EuiDatePopoverContentProps {
17360
17454
  value: string;
@@ -17366,6 +17460,8 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_p
17366
17460
  locale?: LocaleSpecifier;
17367
17461
  position: 'start' | 'end';
17368
17462
  utcOffset?: number;
17463
+ minDate?: Moment;
17464
+ maxDate?: Moment;
17369
17465
  timeOptions: TimeOptions;
17370
17466
  }
17371
17467
  export const EuiDatePopoverContent: FunctionComponent<EuiDatePopoverContentProps>;
@@ -17382,7 +17478,7 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_p
17382
17478
  }
17383
17479
  declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab' {
17384
17480
  import { FunctionComponent } from 'react';
17385
- import { LocaleSpecifier } from 'moment';
17481
+ import { Moment, LocaleSpecifier } from 'moment';
17386
17482
  import { EuiDatePopoverContentProps } from '@elastic/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_content';
17387
17483
  export interface EuiAbsoluteTabProps {
17388
17484
  dateFormat: string;
@@ -17393,6 +17489,8 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_p
17393
17489
  roundUp: boolean;
17394
17490
  labelPrefix: string;
17395
17491
  utcOffset?: number;
17492
+ minDate?: Moment;
17493
+ maxDate?: Moment;
17396
17494
  }
17397
17495
  export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps>;
17398
17496
 
@@ -17464,7 +17562,7 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_p
17464
17562
  }
17465
17563
  declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button' {
17466
17564
  import { FunctionComponent, ButtonHTMLAttributes, MouseEventHandler } from 'react';
17467
- import { LocaleSpecifier } from 'moment';
17565
+ import { LocaleSpecifier, Moment } from 'moment';
17468
17566
  import { CommonProps } from '@elastic/eui/src/components/common';
17469
17567
  import { EuiPopoverProps } from '@elastic/eui/src/components/popover';
17470
17568
  import { TimeOptions } from '@elastic/eui/src/components/date_picker/super_date_picker/time_options';
@@ -17487,6 +17585,8 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_p
17487
17585
  timeFormat: string;
17488
17586
  value: string;
17489
17587
  utcOffset?: number;
17588
+ minDate?: Moment;
17589
+ maxDate?: Moment;
17490
17590
  compressed?: boolean;
17491
17591
  timeOptions: TimeOptions;
17492
17592
  }
@@ -17929,7 +18029,7 @@ declare module '@elastic/eui/src/components/date_picker/auto_refresh/auto_refres
17929
18029
  }
17930
18030
  declare module '@elastic/eui/src/components/date_picker/super_date_picker/super_date_picker' {
17931
18031
  import React, { Component, FocusEventHandler, FunctionComponent, ReactNode } from 'react';
17932
- import { LocaleSpecifier } from 'moment';
18032
+ import moment, { LocaleSpecifier } from 'moment';
17933
18033
  import { CommonProps } from '@elastic/eui/src/components/common';
17934
18034
  import { ShortDate, Milliseconds, DurationRange, ApplyTime, ApplyRefreshInterval, RefreshUnitsOptions, QuickSelectPanel } from '@elastic/eui/src/components/date_picker/types';
17935
18035
  import { TimeOptions } from '@elastic/eui/src/components/date_picker/super_date_picker/time_options';
@@ -18040,6 +18140,14 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/super_
18040
18140
  * @default 'now'
18041
18141
  */
18042
18142
  end?: ShortDate;
18143
+ /**
18144
+ * Defines min. date accepted as a selection (in moment format)
18145
+ */
18146
+ minDate?: moment.Moment;
18147
+ /**
18148
+ * Defines max. date accepted as a selection (in moment format)
18149
+ */
18150
+ maxDate?: moment.Moment;
18043
18151
  /**
18044
18152
  * Specifies the formatted used when displaying times
18045
18153
  * @default 'HH:mm'
@@ -18922,6 +19030,7 @@ declare module '@elastic/eui/src/components/header/header_links/header_links.sty
18922
19030
  euiHeaderLinks: import("@emotion/utils").SerializedStyles;
18923
19031
  euiHeaderLinks__list: import("@emotion/utils").SerializedStyles;
18924
19032
  gutterSizes: {
19033
+ xxs: import("@emotion/utils").SerializedStyles;
18925
19034
  xs: import("@emotion/utils").SerializedStyles;
18926
19035
  s: import("@emotion/utils").SerializedStyles;
18927
19036
  m: import("@emotion/utils").SerializedStyles;
@@ -18938,7 +19047,7 @@ declare module '@elastic/eui/src/components/header/header_links/header_links' {
18938
19047
  import { EuiPopoverProps } from '@elastic/eui/src/components/popover';
18939
19048
  import { EuiHeaderSectionItemButtonProps } from '@elastic/eui/src/components/header/header_section';
18940
19049
  import { EuiBreakpointSize } from '@elastic/eui/src/services/breakpoint';
18941
- export const GUTTER_SIZES: readonly ["xs", "s", "m", "l"]; type EuiHeaderLinksGutterSize = (typeof GUTTER_SIZES)[number]; type EuiHeaderLinksPopoverButtonProps = Partial<EuiHeaderSectionItemButtonProps> & {
19050
+ export const GUTTER_SIZES: readonly ["xxs", "xs", "s", "m", "l"]; type EuiHeaderLinksGutterSize = (typeof GUTTER_SIZES)[number]; type EuiHeaderLinksPopoverButtonProps = Partial<EuiHeaderSectionItemButtonProps> & {
18942
19051
  iconType?: IconType;
18943
19052
  };
18944
19053
  export type EuiHeaderLinksProps = CommonProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
@@ -25273,15 +25382,6 @@ declare module '@elastic/eui/src/components/datagrid/data_grid.stories.utils' {
25273
25382
  actions?: undefined;
25274
25383
  isResizable?: undefined;
25275
25384
  schema?: undefined;
25276
- } | {
25277
- id: string;
25278
- displayAsText: string;
25279
- defaultSortDirection?: undefined;
25280
- cellActions?: undefined;
25281
- initialWidth?: undefined;
25282
- actions?: undefined;
25283
- isResizable?: undefined;
25284
- schema?: undefined;
25285
25385
  } | {
25286
25386
  id: string;
25287
25387
  displayAsText: string;
@@ -25304,6 +25404,15 @@ declare module '@elastic/eui/src/components/datagrid/data_grid.stories.utils' {
25304
25404
  initialWidth?: undefined;
25305
25405
  isResizable?: undefined;
25306
25406
  schema?: undefined;
25407
+ } | {
25408
+ id: string;
25409
+ displayAsText: string;
25410
+ defaultSortDirection?: undefined;
25411
+ cellActions?: undefined;
25412
+ initialWidth?: undefined;
25413
+ actions?: undefined;
25414
+ isResizable?: undefined;
25415
+ schema?: undefined;
25307
25416
  } | {
25308
25417
  id: string;
25309
25418
  displayAsText: string;
@@ -25340,6 +25449,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid.stories.utils' {
25340
25449
  columnVisibility: {
25341
25450
  visibleColumns: string[];
25342
25451
  setVisibleColumns: () => void;
25452
+ canDragAndDropColumns: boolean;
25343
25453
  };
25344
25454
  inMemory: {
25345
25455
  readonly level: "sorting";
@@ -31148,20 +31258,20 @@ declare module '@elastic/eui' {
31148
31258
  "euiDataGridCell.expansionEnterPrompt": any;
31149
31259
  "euiDataGridCell.focusTrapExitPrompt": any;
31150
31260
  "euiDataGridCell.focusTrapEnterPrompt": any;
31261
+ "euiDataGridHeaderCell.actionsButtonAriaLabel": any;
31262
+ "euiDataGridHeaderCell.actionsEnterKeyInstructions": any;
31263
+ "euiDataGridHeaderCell.actionsPopoverScreenReaderText": any;
31151
31264
  "euiColumnActions.hideColumn": any;
31152
31265
  "euiColumnActions.moveLeft": any;
31153
31266
  "euiColumnActions.moveRight": any;
31154
31267
  "euiColumnActions.unsort": any;
31155
31268
  "euiColumnActions.sort": any;
31156
- "euiDataGridHeaderCell.actionsButtonAriaLabel": any;
31157
- "euiDataGridHeaderCell.actionsEnterKeyInstructions": any;
31158
31269
  "euiDataGridHeaderCell.sortedByAscendingSingle": any;
31159
31270
  "euiDataGridHeaderCell.sortedByDescendingSingle": any;
31160
31271
  "euiDataGridHeaderCell.sortedByAscendingFirst": any;
31161
31272
  "euiDataGridHeaderCell.sortedByDescendingFirst": any;
31162
31273
  "euiDataGridHeaderCell.sortedByAscendingMultiple": any;
31163
31274
  "euiDataGridHeaderCell.sortedByDescendingMultiple": any;
31164
- "euiDataGridHeaderCell.actionsPopoverScreenReaderText": any;
31165
31275
  "euiColumnSelector.dragHandleAriaLabel": any;
31166
31276
  "euiColumnSelector.button": any;
31167
31277
  "euiColumnSelector.search": any;