diff --git a/package.json b/package.json index 76948decf33a7..1dd9b003a8199 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,7 @@ "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.2.0-canary.2", "@elastic/ems-client": "8.2.0", - "@elastic/eui": "53.0.1", + "@elastic/eui": "54.0.0", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", @@ -117,10 +117,10 @@ "@elastic/request-crypto": "2.0.1", "@elastic/safer-lodash-set": "link:bazel-bin/packages/elastic-safer-lodash-set", "@elastic/search-ui-app-search-connector": "^1.6.0", - "@emotion/cache": "^11.4.0", - "@emotion/css": "^11.4.0", - "@emotion/react": "^11.4.0", - "@emotion/serialize": "^1.0.2", + "@emotion/cache": "^11.7.1", + "@emotion/css": "^11.9.0", + "@emotion/react": "^11.9.0", + "@emotion/serialize": "^1.0.3", "@hapi/accept": "^5.0.2", "@hapi/boom": "^9.1.4", "@hapi/cookie": "^11.0.2", @@ -466,7 +466,7 @@ "@elastic/makelogs": "^6.0.0", "@elastic/synthetics": "^1.0.0-beta.22", "@emotion/babel-preset-css-prop": "^11.2.0", - "@emotion/jest": "^11.3.0", + "@emotion/jest": "^11.9.0", "@istanbuljs/nyc-config-typescript": "^1.0.2", "@istanbuljs/schema": "^0.1.2", "@jest/console": "^26.6.2", diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap index 828955b8489dd..b639f7e63610d 100644 --- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap +++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap @@ -1,11 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ElasticAgentCard renders 1`] = ` -.emotion-0 { - max-width: 400px; - margin-inline: auto; -} - + + + , + ], + }, + } + } + isStringTag={false} + serialized={ + Object { + "map": undefined, + "name": "1hu4pg0-EuiCard", + "next": undefined, + "styles": "max-width:400px;margin-inline:auto;;label:EuiCard;", + "toString": [Function], + } + } + />
is rendered 1`] = ` -.emotion-0.euiButtonGroupButton { - background-color: #FFF; - border: 1px solid #D3DAE6!important; -} - -.emotion-0.euiButtonGroupButton:first-of-type { - border-top-left-radius: 6px!important; - border-bottom-left-radius: 6px!important; -} - -.emotion-0.euiButtonGroupButton:last-of-type { - border-top-right-radius: 6px!important; - border-bottom-right-radius: 6px!important; -} - is rendered 1`] = ` > is rendered 1`] = ` size="m" title="Text" > - + + + + + , + , + , + , + ], + }, + } + } + isStringTag={false} + serialized={ + Object { + "map": undefined, + "name": "iuv015-EuiButtonGroup", + "next": undefined, + "styles": "&.euiButtonGroupButton{background-color:#FFF;border:1px solid #D3DAE6 !important;&:first-of-type{border-top-left-radius:6px !important;border-bottom-left-radius:6px !important;}&:last-of-type{border-top-right-radius:6px !important;border-bottom-right-radius:6px !important;}};;label:EuiButtonGroup;", + "toString": [Function], + } + } + /> + - - + + + +
diff --git a/packages/kbn-test/jest-preset.js b/packages/kbn-test/jest-preset.js index fd14c973683f7..1021283936495 100644 --- a/packages/kbn-test/jest-preset.js +++ b/packages/kbn-test/jest-preset.js @@ -84,7 +84,7 @@ module.exports = { snapshotSerializers: [ '/src/plugins/kibana_react/public/util/test_helpers/react_mount_serializer.ts', '/node_modules/enzyme-to-json/serializer', - '/node_modules/@emotion/jest/serializer', + '/node_modules/@kbn/test/target_node/jest/setup/emotion.js', ], // The test environment that will be used for testing diff --git a/packages/kbn-test/src/jest/setup/emotion.js b/packages/kbn-test/src/jest/setup/emotion.js new file mode 100644 index 0000000000000..dc135f4e56c5a --- /dev/null +++ b/packages/kbn-test/src/jest/setup/emotion.js @@ -0,0 +1,14 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { createSerializer } from '@emotion/jest'; + +module.exports = createSerializer({ + classNameReplacer: (className) => className, + includeStyles: false, +}); diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index cb1c61b0a47e0..2a067a54d472e 100644 --- a/src/dev/license_checker/config.ts +++ b/src/dev/license_checker/config.ts @@ -77,6 +77,6 @@ export const LICENSE_OVERRIDES = { 'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint '@elastic/ems-client@8.2.0': ['Elastic License 2.0'], - '@elastic/eui@53.0.1': ['SSPL-1.0 OR Elastic License 2.0'], + '@elastic/eui@54.0.0': ['SSPL-1.0 OR Elastic License 2.0'], 'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry }; diff --git a/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/url/__snapshots__/url.test.tsx.snap b/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/url/__snapshots__/url.test.tsx.snap index c37e1d28dab4c..a90cf78b4f46f 100644 --- a/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/url/__snapshots__/url.test.tsx.snap +++ b/src/plugins/data_view_field_editor/public/components/field_format_editor/editors/url/__snapshots__/url.test.tsx.snap @@ -29,7 +29,7 @@ exports[`UrlFormatEditor should render normally 1`] = ` class="euiFormControlLayout__childrenWrapper" >
@@ -769,7 +754,7 @@ exports[`CronEditor is rendered with a DAY frequency 1`] = `
@@ -1794,7 +1759,7 @@ exports[`CronEditor is rendered with a HOUR frequency 1`] = ` >
@@ -3011,7 +2956,7 @@ exports[`CronEditor is rendered with a MINUTE frequency 1`] = ` >
@@ -4017,7 +3942,7 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = ` >
@@ -4944,7 +4849,7 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = `
@@ -6084,7 +5969,7 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = ` >
@@ -6867,7 +6732,7 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = `
@@ -8176,7 +8021,7 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = ` >
@@ -8968,7 +8793,7 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
{ sortedRows, table.formattedColumns, uiStateProps.columnsWidth, - props.fireEvent + props.fireEvent, + undefined ); const { onSort } = comp.find('EuiDataGrid').prop('sorting'); diff --git a/src/plugins/vis_types/table/public/components/table_vis_basic.tsx b/src/plugins/vis_types/table/public/components/table_vis_basic.tsx index adfeb9f5f614c..300435997129e 100644 --- a/src/plugins/vis_types/table/public/components/table_vis_basic.tsx +++ b/src/plugins/vis_types/table/public/components/table_vis_basic.tsx @@ -6,8 +6,14 @@ * Side Public License, v 1. */ -import React, { memo, useCallback, useMemo } from 'react'; -import { EuiDataGrid, EuiDataGridProps, EuiDataGridSorting, EuiTitle } from '@elastic/eui'; +import React, { memo, useCallback, useMemo, useRef } from 'react'; +import { + EuiDataGrid, + EuiDataGridProps, + EuiDataGridRefProps, + EuiDataGridSorting, + EuiTitle, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { orderBy } from 'lodash'; @@ -34,6 +40,8 @@ export const TableVisBasic = memo( title, uiStateProps: { columnsWidth, sort, setColumnsWidth, setSort }, }: TableVisBasicProps) => { + const dataGridRef = useRef(null); + const { columns, rows, formattedColumns } = table; // custom sorting is in place until the EuiDataGrid sorting gets rid of flaws -> https://github.com/elastic/eui/issues/4108 @@ -65,7 +73,8 @@ export const TableVisBasic = memo( sortedRows, formattedColumns, columnsWidth, - fireEvent + fireEvent, + dataGridRef.current?.closeCellPopover ); // Pagination config @@ -158,6 +167,7 @@ export const TableVisBasic = memo( sorting={{ columns: sortingColumns, onSort }} onColumnResize={onColumnResize} minSizeForControls={1} + ref={dataGridRef} /> ); diff --git a/src/plugins/vis_types/table/public/components/table_vis_columns.tsx b/src/plugins/vis_types/table/public/components/table_vis_columns.tsx index 17d32264998ea..ce323c7c38611 100644 --- a/src/plugins/vis_types/table/public/components/table_vis_columns.tsx +++ b/src/plugins/vis_types/table/public/components/table_vis_columns.tsx @@ -30,7 +30,8 @@ export const createGridColumns = ( rows: DatatableRow[], formattedColumns: FormattedColumns, columnsWidth: TableVisUiState['colWidth'], - fireEvent: IInterpreterRenderHandlers['event'] + fireEvent: IInterpreterRenderHandlers['event'], + closeCellPopover?: Function ) => { const onFilterClick = (data: FilterCellData, negate: boolean) => { fireEvent({ @@ -55,7 +56,7 @@ export const createGridColumns = ( const formattedColumn = formattedColumns[col.id]; const cellActions = formattedColumn.filterable ? [ - ({ rowIndex, columnId, Component, closePopover }: EuiDataGridColumnCellActionProps) => { + ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => { const rowValue = rows[rowIndex][columnId]; if (rowValue == null) return null; const cellContent = formattedColumn.formatter.convert(rowValue); @@ -82,7 +83,7 @@ export const createGridColumns = ( data-test-subj="tbvChartCell__filterForCellValue" onClick={() => { onFilterClick({ row: rowIndex, column: colIndex, value: rowValue }, false); - closePopover?.(); + closeCellPopover?.(); }} iconType="plusInCircle" > @@ -90,7 +91,7 @@ export const createGridColumns = ( ); }, - ({ rowIndex, columnId, Component, closePopover }: EuiDataGridColumnCellActionProps) => { + ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => { const rowValue = rows[rowIndex][columnId]; if (rowValue == null) return null; const cellContent = formattedColumn.formatter.convert(rowValue); @@ -116,7 +117,7 @@ export const createGridColumns = ( aria-label={filterOutAriaLabel} onClick={() => { onFilterClick({ row: rowIndex, column: colIndex, value: rowValue }, true); - closePopover?.(); + closeCellPopover?.(); }} iconType="minusInCircle" > diff --git a/x-pack/plugins/apm/public/components/app/service_map/cytoscape_options.ts b/x-pack/plugins/apm/public/components/app/service_map/cytoscape_options.ts index e137f2dbb0f78..24d605a85b69e 100644 --- a/x-pack/plugins/apm/public/components/app/service_map/cytoscape_options.ts +++ b/x-pack/plugins/apm/public/components/app/service_map/cytoscape_options.ts @@ -98,7 +98,7 @@ const zIndexEdgeHighlight = 110; const zIndexEdgeHover = 120; export const getNodeHeight = (theme: EuiTheme): number => - parseInt(theme.eui.avatarSizing.l.size, 10); + parseInt(theme.eui.euiSizeXXL, 10); function isService(el: cytoscape.NodeSingular) { return el.data(SERVICE_NAME) !== undefined; @@ -156,7 +156,7 @@ const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => { 'text-max-width': '200px', 'text-valign': 'bottom', 'text-wrap': 'ellipsis', - width: theme.eui.avatarSizing.l.size, + width: theme.eui.euiSizeXXL, 'z-index': zIndexNode, }, }, diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__stories__/__snapshots__/dropdown_filter.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__stories__/__snapshots__/dropdown_filter.stories.storyshot index 0ded42439fb95..6ddc57397fd5d 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__stories__/__snapshots__/dropdown_filter.stories.storyshot +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/component/__stories__/__snapshots__/dropdown_filter.stories.storyshot @@ -11,7 +11,7 @@ exports[`Storyshots renderers/DropdownFilter default 1`] = ` className="euiFormControlLayout__childrenWrapper" > +
+ + + +
@@ -518,12 +538,24 @@ Array [ className="euiFormControlLayout__childrenWrapper" > +
+ + + +
@@ -561,12 +593,24 @@ Array [ className="euiFormControlLayout__childrenWrapper" > +
+ + + +
@@ -604,12 +648,24 @@ Array [ className="euiFormControlLayout__childrenWrapper" > +
+ + + +
@@ -647,12 +703,24 @@ Array [ className="euiFormControlLayout__childrenWrapper" > +
+ + + +
@@ -690,12 +758,24 @@ Array [ className="euiFormControlLayout__childrenWrapper" > +
+ + + +
@@ -733,12 +813,24 @@ Array [ className="euiFormControlLayout__childrenWrapper" > +
+ + + +
@@ -785,6 +877,7 @@ Array [ className="euiFormControlLayout__childrenWrapper" > void) | undefined, alignments: Record, headerRowHeight: 'auto' | 'single' | 'custom', - headerRowLines: number + headerRowLines: number, + closeCellPopover?: Function ) => { const columnsReverseLookup = table.columns.reduce< Record @@ -73,7 +74,7 @@ export const createGridColumns = ( const cellActions = filterable && handleFilterClick ? [ - ({ rowIndex, columnId, Component, closePopover }: EuiDataGridColumnCellActionProps) => { + ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => { const { rowValue, contentsIsDefined, cellContent } = getContentData({ rowIndex, columnId, @@ -102,7 +103,7 @@ export const createGridColumns = ( data-test-subj="lensDatatableFilterFor" onClick={() => { handleFilterClick(field, rowValue, colIndex, rowIndex); - closePopover?.(); + closeCellPopover?.(); }} iconType="plusInCircle" > @@ -111,7 +112,7 @@ export const createGridColumns = ( ) ); }, - ({ rowIndex, columnId, Component, closePopover }: EuiDataGridColumnCellActionProps) => { + ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => { const { rowValue, contentsIsDefined, cellContent } = getContentData({ rowIndex, columnId, @@ -140,7 +141,7 @@ export const createGridColumns = ( aria-label={filterOutAriaLabel} onClick={() => { handleFilterClick(field, rowValue, colIndex, rowIndex, true); - closePopover?.(); + closeCellPopover?.(); }} iconType="minusInCircle" > diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx index 7c90f19949332..ebf68d5c2b226 100644 --- a/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx +++ b/x-pack/plugins/lens/public/datatable_visualization/components/table_basic.tsx @@ -13,6 +13,7 @@ import useDeepCompareEffect from 'react-use/lib/useDeepCompareEffect'; import { EuiButtonIcon, EuiDataGrid, + EuiDataGridRefProps, EuiDataGridControlColumn, EuiDataGridColumn, EuiDataGridSorting, @@ -55,6 +56,8 @@ export const DEFAULT_PAGE_SIZE = 10; const PAGE_SIZE_OPTIONS = [DEFAULT_PAGE_SIZE, 20, 30, 50, 100]; export const DatatableComponent = (props: DatatableRenderProps) => { + const dataGridRef = useRef(null); + const [firstTable] = Object.values(props.data.tables); const isInteractive = props.interactive; @@ -272,7 +275,8 @@ export const DatatableComponent = (props: DatatableRenderProps) => { onColumnHide, alignments, headerRowHeight, - headerRowLines + headerRowLines, + dataGridRef.current?.closeCellPopover ), [ bucketColumns, @@ -454,6 +458,7 @@ export const DatatableComponent = (props: DatatableRenderProps) => { onColumnResize={onColumnResize} toolbarVisibility={false} renderFooterCellValue={renderSummaryRow} + ref={dataGridRef} /> diff --git a/x-pack/plugins/security/public/nav_control/nav_control_service.test.ts b/x-pack/plugins/security/public/nav_control/nav_control_service.test.ts index 21352f16d2354..bbbee1d710c07 100644 --- a/x-pack/plugins/security/public/nav_control/nav_control_service.test.ts +++ b/x-pack/plugins/security/public/nav_control/nav_control_service.test.ts @@ -85,7 +85,7 @@ describe('SecurityNavControlService', () => { >