@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.
- package/dist/eui_theme_dark.css +3 -18
- package/dist/eui_theme_dark.min.css +1 -1
- package/dist/eui_theme_light.css +3 -18
- package/dist/eui_theme_light.min.css +1 -1
- package/es/components/aspect_ratio/aspect_ratio.js +1 -1
- package/es/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
- package/es/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
- package/es/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
- package/es/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
- package/es/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
- package/es/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
- package/es/components/datagrid/body/cell/focus_utils.js +166 -0
- package/es/components/datagrid/body/cell/index.js +11 -0
- package/es/components/datagrid/body/data_grid_body.js +0 -2
- package/es/components/datagrid/body/data_grid_body_custom.js +1 -7
- package/es/components/datagrid/body/data_grid_body_virtualized.js +1 -7
- package/es/components/datagrid/body/footer/data_grid_footer_row.js +1 -2
- package/es/components/datagrid/body/header/data_grid_control_header_cell.js +3 -6
- package/es/components/datagrid/body/header/data_grid_header_cell.js +27 -12
- package/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js +45 -116
- package/es/components/datagrid/body/header/data_grid_header_row.js +5 -10
- package/es/components/datagrid/body/header/use_data_grid_header.js +3 -14
- package/es/components/datagrid/data_grid.js +2 -12
- package/es/components/datagrid/utils/focus.js +25 -54
- package/es/components/datagrid/utils/scrolling.js +1 -1
- package/es/components/flyout/flyout_resizable.js +10 -10
- package/es/components/flyout/flyout_resizable.styles.js +12 -6
- package/es/components/resizable_container/helpers.js +5 -6
- package/es/components/resizable_container/resizable_button.js +13 -4
- package/es/components/resizable_container/resizable_button.styles.js +18 -8
- package/es/components/resizable_container/resizable_container.js +28 -22
- package/es/components/steps/step_number.styles.js +6 -7
- package/es/components/tree_view/tree_view.js +9 -2
- package/eui.d.ts +130 -90
- package/i18ntokens.json +108 -72
- package/lib/components/aspect_ratio/aspect_ratio.js +1 -1
- package/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
- package/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
- package/lib/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
- package/lib/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
- package/lib/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
- package/lib/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
- package/lib/components/datagrid/body/cell/focus_utils.js +174 -0
- package/lib/components/datagrid/body/cell/index.js +32 -0
- package/lib/components/datagrid/body/data_grid_body.js +0 -2
- package/lib/components/datagrid/body/data_grid_body_custom.js +2 -8
- package/lib/components/datagrid/body/data_grid_body_virtualized.js +2 -8
- package/lib/components/datagrid/body/footer/data_grid_footer_row.js +5 -6
- package/lib/components/datagrid/body/header/data_grid_control_header_cell.js +3 -6
- package/lib/components/datagrid/body/header/data_grid_header_cell.js +35 -20
- package/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js +47 -119
- package/lib/components/datagrid/body/header/data_grid_header_row.js +5 -10
- package/lib/components/datagrid/body/header/use_data_grid_header.js +10 -24
- package/lib/components/datagrid/data_grid.js +4 -14
- package/lib/components/datagrid/utils/focus.js +26 -56
- package/lib/components/datagrid/utils/scrolling.js +2 -2
- package/lib/components/flyout/flyout_resizable.js +10 -10
- package/lib/components/flyout/flyout_resizable.styles.js +12 -6
- package/lib/components/resizable_container/helpers.js +7 -7
- package/lib/components/resizable_container/resizable_button.js +13 -4
- package/lib/components/resizable_container/resizable_button.styles.js +18 -8
- package/lib/components/resizable_container/resizable_container.js +28 -22
- package/lib/components/steps/step_number.styles.js +6 -7
- package/lib/components/tree_view/tree_view.js +9 -2
- package/optimize/es/components/aspect_ratio/aspect_ratio.js +1 -1
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
- package/optimize/es/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
- package/optimize/es/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
- package/optimize/es/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
- package/optimize/es/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
- package/optimize/es/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
- package/optimize/es/components/datagrid/body/cell/focus_utils.js +153 -0
- package/optimize/es/components/datagrid/body/cell/index.js +11 -0
- package/optimize/es/components/datagrid/body/data_grid_body_custom.js +1 -5
- package/optimize/es/components/datagrid/body/data_grid_body_virtualized.js +1 -5
- package/optimize/es/components/datagrid/body/footer/data_grid_footer_row.js +1 -2
- package/optimize/es/components/datagrid/body/header/data_grid_control_header_cell.js +2 -4
- package/optimize/es/components/datagrid/body/header/data_grid_header_cell.js +25 -10
- package/optimize/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js +41 -115
- package/optimize/es/components/datagrid/body/header/data_grid_header_row.js +4 -8
- package/optimize/es/components/datagrid/body/header/use_data_grid_header.js +3 -13
- package/optimize/es/components/datagrid/data_grid.js +2 -12
- package/optimize/es/components/datagrid/utils/focus.js +25 -54
- package/optimize/es/components/datagrid/utils/scrolling.js +1 -1
- package/optimize/es/components/flyout/flyout_resizable.js +10 -10
- package/optimize/es/components/flyout/flyout_resizable.styles.js +12 -6
- package/optimize/es/components/resizable_container/helpers.js +5 -6
- package/optimize/es/components/resizable_container/resizable_button.js +5 -2
- package/optimize/es/components/resizable_container/resizable_button.styles.js +18 -8
- package/optimize/es/components/resizable_container/resizable_container.js +28 -22
- package/optimize/es/components/steps/step_number.styles.js +6 -7
- package/optimize/es/components/tree_view/tree_view.js +9 -2
- package/optimize/lib/components/aspect_ratio/aspect_ratio.js +1 -1
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
- package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
- package/optimize/lib/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
- package/optimize/lib/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
- package/optimize/lib/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
- package/optimize/lib/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
- package/optimize/lib/components/datagrid/body/cell/focus_utils.js +163 -0
- package/optimize/lib/components/datagrid/body/cell/index.js +32 -0
- package/optimize/lib/components/datagrid/body/data_grid_body_custom.js +2 -6
- package/optimize/lib/components/datagrid/body/data_grid_body_virtualized.js +2 -6
- package/optimize/lib/components/datagrid/body/footer/data_grid_footer_row.js +5 -6
- package/optimize/lib/components/datagrid/body/header/data_grid_control_header_cell.js +2 -4
- package/optimize/lib/components/datagrid/body/header/data_grid_header_cell.js +25 -10
- package/optimize/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js +41 -115
- package/optimize/lib/components/datagrid/body/header/data_grid_header_row.js +4 -8
- package/optimize/lib/components/datagrid/body/header/use_data_grid_header.js +4 -14
- package/optimize/lib/components/datagrid/data_grid.js +4 -14
- package/optimize/lib/components/datagrid/utils/focus.js +26 -56
- package/optimize/lib/components/datagrid/utils/scrolling.js +2 -2
- package/optimize/lib/components/flyout/flyout_resizable.js +10 -10
- package/optimize/lib/components/flyout/flyout_resizable.styles.js +12 -6
- package/optimize/lib/components/resizable_container/helpers.js +7 -7
- package/optimize/lib/components/resizable_container/resizable_button.js +5 -2
- package/optimize/lib/components/resizable_container/resizable_button.styles.js +18 -8
- package/optimize/lib/components/resizable_container/resizable_container.js +28 -22
- package/optimize/lib/components/steps/step_number.styles.js +6 -7
- package/optimize/lib/components/tree_view/tree_view.js +9 -2
- package/package.json +1 -1
- package/src/components/datagrid/body/header/_data_grid_header_row.scss +8 -7
- package/test-env/components/aspect_ratio/aspect_ratio.js +1 -1
- package/test-env/components/collapsible_nav_beta/collapsible_nav_body_footer.js +7 -3
- package/test-env/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js +4 -4
- package/test-env/components/datagrid/body/{data_grid_cell.js → cell/data_grid_cell.js} +111 -244
- package/test-env/components/datagrid/body/{data_grid_cell_actions.js → cell/data_grid_cell_actions.js} +5 -5
- package/test-env/components/datagrid/body/{data_grid_cell_popover.js → cell/data_grid_cell_popover.js} +4 -4
- package/test-env/components/datagrid/body/{data_grid_cell_wrapper.js → cell/data_grid_cell_wrapper.js} +1 -1
- package/test-env/components/datagrid/body/cell/focus_utils.js +172 -0
- package/test-env/components/datagrid/body/cell/index.js +32 -0
- package/test-env/components/datagrid/body/data_grid_body.js +0 -2
- package/test-env/components/datagrid/body/data_grid_body_custom.js +2 -8
- package/test-env/components/datagrid/body/data_grid_body_virtualized.js +2 -8
- package/test-env/components/datagrid/body/footer/data_grid_footer_row.js +5 -6
- package/test-env/components/datagrid/body/header/data_grid_control_header_cell.js +3 -6
- package/test-env/components/datagrid/body/header/data_grid_header_cell.js +25 -10
- package/test-env/components/datagrid/body/header/data_grid_header_cell_wrapper.js +44 -116
- package/test-env/components/datagrid/body/header/data_grid_header_row.js +5 -10
- package/test-env/components/datagrid/body/header/use_data_grid_header.js +4 -14
- package/test-env/components/datagrid/data_grid.js +4 -14
- package/test-env/components/datagrid/utils/focus.js +26 -56
- package/test-env/components/datagrid/utils/scrolling.js +2 -2
- package/test-env/components/flyout/flyout_resizable.js +10 -10
- package/test-env/components/flyout/flyout_resizable.styles.js +12 -6
- package/test-env/components/resizable_container/helpers.js +7 -7
- package/test-env/components/resizable_container/resizable_button.js +13 -4
- package/test-env/components/resizable_container/resizable_button.styles.js +18 -8
- package/test-env/components/resizable_container/resizable_container.js +28 -22
- package/test-env/components/steps/step_number.styles.js +6 -7
- package/test-env/components/tree_view/tree_view.js +9 -2
- package/es/components/datagrid/body/header/header_is_interactive.js +0 -58
- package/lib/components/datagrid/body/header/header_is_interactive.js +0 -63
- package/optimize/es/components/datagrid/body/header/header_is_interactive.js +0 -53
- package/optimize/lib/components/datagrid/body/header/header_is_interactive.js +0 -61
- 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
|
|
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,
|
|
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
|
-
*
|
|
11035
|
-
*
|
|
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
|
-
*
|
|
11055
|
-
*
|
|
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
|
-
|
|
11348
|
-
|
|
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
|
-
|
|
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
|
|
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: (
|
|
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,
|
|
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
|
-
*
|
|
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
|
|
14361
|
-
|
|
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';
|
|
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: (
|
|
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/
|
|
14708
|
-
import 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
|
-
|
|
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
|
|
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;
|