Upgrade EUI to v92.0.0 (elastic#174487)

`v91.3.1`⏩`v92.0.0-backport.0` --- ## [`v92.0.0-backport.0`](https://github.com/elastic/eui/releases/v92.0.0-backport.0) **This is a backport release only intended for use by Kibana.** **Bug fixes** - Fixed an `EuiTreeView` JSX Typescript error ([elastic#7452](elastic/eui#7452)) - Fixed a color console warning being generated by disabled `EuiStep`s ([elastic#7454](elastic/eui#7454)) ## [`v92.0.0`](https://github.com/elastic/eui/releases/v92.0.0) - Updated generic types of `EuiBasicTable`, `EuiInMemoryTable` and `EuiSearchBar.Query.execute` to add `extends object` constraint ([elastic#7340](elastic/eui#7340)) - This change should have no impact on your applications since the updated types only affect properties that exclusively accept object values. - Added a new `EuiFlyoutResizable` component ([elastic#7439](elastic/eui#7439)) - Updated `EuiTextArea` to accept `isClearable` and `icon` as props ([elastic#7449](elastic/eui#7449)) **Bug fixes** - `EuiRange`/`EuiDualRange`'s track ticks & highlights now update their positions on resize ([elastic#7442](elastic/eui#7442)) **Deprecations** - Updated `EuiFilterButton` to remove the second `.euiFilterButton__textShift` span wrapper. Target `.euiFilterButton__text` instead ([elastic#7444](elastic/eui#7444)) **Breaking changes** - Removed deprecated `EuiNotificationEvent`. We recommend copying the component to your application if necessary ([elastic#7434](elastic/eui#7434)) - Removed deprecated `EuiControlBar`. We recommend using `EuiBottomBar` instead ([elastic#7435](elastic/eui#7435))
jughosta · Jan 10, 2024 · 517763e · 517763e
1 parent 797b29a
commit 517763e
Show file tree

Hide file tree

Showing 38 changed files with 449 additions and 639 deletions.
diff --git a/package.json b/package.json
@@ -102,7 +102,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1",
     "@elastic/ems-client": "8.5.1",
-    "@elastic/eui": "91.3.1",
+    "@elastic/eui": "92.0.0-backport.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

diff --git a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
diff --git a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
@@ -371,22 +371,6 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiCommonlyUsedTimeRanges.legend': i18n.translate('core.euiCommonlyUsedTimeRanges.legend', {
       defaultMessage: 'Commonly used',
     }),
-    'euiControlBar.screenReaderHeading': i18n.translate('core.euiControlBar.screenReaderHeading', {
-      defaultMessage: 'Page level controls',
-    }),
-    'euiControlBar.screenReaderAnnouncement': i18n.translate(
-      'core.euiControlBar.screenReaderAnnouncement',
-      {
-        defaultMessage:
-          'There is a new region landmark with page level controls at the end of the document.',
-      }
-    ),
-    'euiControlBar.customScreenReaderAnnouncement': ({ landmarkHeading }: EuiValues) =>
-      i18n.translate('core.euiControlBar.customScreenReaderAnnouncement', {
-        defaultMessage:
-          'There is a new region landmark called {landmarkHeading} with page level controls at the end of the document.',
-        values: { landmarkHeading },
-      }),
     'euiGlobalToastList.clearAllToastsButtonAriaLabel': i18n.translate(
       'core.euiGlobalToastList.clearAllToastsButtonAriaLabel',
       {
@@ -938,56 +922,10 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiModal.closeModal': i18n.translate('core.euiModal.closeModal', {
       defaultMessage: 'Closes this modal window',
     }),
-    'euiNotificationEventMessages.accordionButtonText': ({ messagesLength }: EuiValues) =>
-      i18n.translate('core.euiNotificationEventMessages.accordionButtonText', {
-        defaultMessage: '+ {messagesLength} more',
-        values: { messagesLength },
-      }),
     'euiErrorBoundary.error': i18n.translate('core.euiErrorBoundary.error', {
       defaultMessage: 'Error',
       description: 'Error boundary for uncaught exceptions when rendering part of the application',
     }),
-    'euiNotificationEventMessages.accordionAriaLabelButtonText': ({
-      messagesLength,
-      eventName,
-    }: EuiValues) =>
-      i18n.translate('core.euiNotificationEventMessages.accordionAriaLabelButtonText', {
-        defaultMessage: '+ {messagesLength} messages for {eventName}',
-        values: { messagesLength, eventName },
-      }),
-    'euiNotificationEventMeta.contextMenuButton': ({ eventName }: EuiValues) =>
-      i18n.translate('core.euiNotificationEventMeta.contextMenuButton', {
-        defaultMessage: 'Menu for {eventName}',
-        values: { eventName },
-      }),
-    'euiNotificationEventReadButton.markAsReadAria': ({ eventName }: EuiValues) =>
-      i18n.translate('core.euiNotificationEventReadButton.markAsReadAria', {
-        defaultMessage: 'Mark {eventName} as read',
-        values: { eventName },
-      }),
-    'euiNotificationEventReadButton.markAsUnreadAria': ({ eventName }: EuiValues) =>
-      i18n.translate('core.euiNotificationEventReadButton.markAsUnreadAria', {
-        defaultMessage: 'Mark {eventName} as unread',
-        values: { eventName },
-      }),
-    'euiNotificationEventReadButton.markAsRead': i18n.translate(
-      'core.euiNotificationEventReadButton.markAsRead',
-      {
-        defaultMessage: 'Mark as read',
-      }
-    ),
-    'euiNotificationEventReadButton.markAsUnread': i18n.translate(
-      'core.euiNotificationEventReadButton.markAsUnread',
-      {
-        defaultMessage: 'Mark as unread',
-      }
-    ),
-    'euiNotificationEventMessages.accordionHideText': i18n.translate(
-      'core.euiNotificationEventMessages.accordionHideText',
-      {
-        defaultMessage: 'hide',
-      }
-    ),
     'euiPagination.pageOfTotalCompressed': ({ page, total }: EuiValues) => (
       <FormattedMessage
         id="core.euiPagination.pageOfTotalCompressed"
@@ -1802,25 +1740,6 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: 'You can quickly navigate this list using arrow keys.',
       }
     ),
-    'euiNotificationEventReadIcon.read': i18n.translate('core.euiNotificationEventReadIcon.read', {
-      defaultMessage: 'Read',
-    }),
-    'euiNotificationEventReadIcon.readAria': ({ eventName }: EuiValues) =>
-      i18n.translate('core.euiNotificationEventReadIcon.readAria', {
-        defaultMessage: '{eventName} is read',
-        values: { eventName },
-      }),
-    'euiNotificationEventReadIcon.unread': i18n.translate(
-      'core.euiNotificationEventReadIcon.unread',
-      {
-        defaultMessage: 'Unread',
-      }
-    ),
-    'euiNotificationEventReadIcon.unreadAria': ({ eventName }: EuiValues) =>
-      i18n.translate('core.euiNotificationEventReadIcon.unreadAria', {
-        defaultMessage: '{eventName} is unread',
-        values: { eventName },
-      }),
     'euiSkeletonLoading.loadingAriaText': ({ contentAriaLabel }: EuiValues) =>
       i18n.translate('core.euiSkeletonLoading.loadingAriaText', {
         defaultMessage: 'Loading {contentAriaLabel}',

diff --git a/packages/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx b/packages/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.tsx
@@ -49,7 +49,7 @@ const popoverTitleStyle = css`
 `;
 const filterButtonStyle = css`
   &,
-  & .euiFilterButton__textShift {
+  & .euiFilterButton__text {
     min-width: 0;
     line-height: 1;
   }

diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -85,7 +85,7 @@ 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.5.1': ['Elastic License 2.0'],
-  '@elastic/eui@91.3.1': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@92.0.0-backport.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
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

diff --git a/src/plugins/controls/public/time_slider/components/time_slider.tsx b/src/plugins/controls/public/time_slider/components/time_slider.tsx
@@ -6,10 +6,9 @@
  * Side Public License, v 1.
  */
 
-import React, { FC, useRef } from 'react';
+import React, { FC } from 'react';
 import { EuiInputPopover } from '@elastic/eui';
 import { FROM_INDEX, TO_INDEX } from '../time_utils';
-import { EuiDualRangeRef } from './time_slider_sliding_window_range';
 import { getRoundedTimeRangeBounds } from '../time_slider_selectors';
 import { useTimeSlider } from '../embeddable/time_slider_embeddable';
 import { TimeSliderPopoverButton } from './time_slider_popover_button';
@@ -41,12 +40,6 @@ export const TimeSlider: FC<Props> = (props: Props) => {
     return state.componentState.isOpen;
   });
 
-  const rangeRef = useRef<EuiDualRangeRef>(null);
-
-  const onPanelResize = (width: number) => {
-    rangeRef.current?.onResize(width);
-  };
-
   const from = value ? value[FROM_INDEX] : timeRangeMin;
   const to = value ? value[TO_INDEX] : timeRangeMax;
 
@@ -67,10 +60,8 @@ export const TimeSlider: FC<Props> = (props: Props) => {
       isOpen={isOpen}
       closePopover={() => timeSlider.dispatch.setIsOpen({ isOpen: false })}
       panelPaddingSize="s"
-      onPanelResize={onPanelResize}
     >
       <TimeSliderPopoverContent
-        rangeRef={rangeRef}
         value={[from, to]}
         onChange={props.onChange}
         stepSize={stepSize}

diff --git a/src/plugins/controls/public/time_slider/components/time_slider_popover_content.tsx b/src/plugins/controls/public/time_slider/components/time_slider_popover_content.tsx
@@ -6,14 +6,14 @@
  * Side Public License, v 1.
  */
 
-import React, { Ref } from 'react';
+import React from 'react';
 import { EuiButtonIcon, EuiRangeTick, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 
 import { getIsAnchored } from '../time_slider_selectors';
 import { TimeSliderStrings } from './time_slider_strings';
 import { useTimeSlider } from '../embeddable/time_slider_embeddable';
 import { TimeSliderAnchoredRange } from './time_slider_anchored_range';
-import { EuiDualRangeRef, TimeSliderSlidingWindowRange } from './time_slider_sliding_window_range';
+import { TimeSliderSlidingWindowRange } from './time_slider_sliding_window_range';
 
 interface Props {
   value: [number, number];
@@ -22,7 +22,6 @@ interface Props {
   ticks: EuiRangeTick[];
   timeRangeMin: number;
   timeRangeMax: number;
-  rangeRef?: Ref<EuiDualRangeRef>;
 }
 
 export function TimeSliderPopoverContent(props: Props) {
@@ -55,7 +54,6 @@ export function TimeSliderPopoverContent(props: Props) {
       value={props.value}
       onChange={props.onChange}
       stepSize={props.stepSize}
-      rangeRef={props.rangeRef}
       ticks={ticks}
       timeRangeMin={props.timeRangeMin}
       timeRangeMax={props.timeRangeMax}

diff --git a/src/plugins/controls/public/time_slider/components/time_slider_sliding_window_range.tsx b/src/plugins/controls/public/time_slider/components/time_slider_sliding_window_range.tsx
@@ -6,12 +6,8 @@
  * Side Public License, v 1.
  */
 
-import React, { Ref, ComponentProps } from 'react';
+import React from 'react';
 import { EuiDualRange, EuiRangeTick } from '@elastic/eui';
-import type { EuiDualRangeClass } from '@elastic/eui/src/components/form/range/dual_range';
-
-// Unfortunately, wrapping EuiDualRange in `withEuiTheme` has created a super annoying/verbose typing
-export type EuiDualRangeRef = EuiDualRangeClass & ComponentProps<typeof EuiDualRange>;
 
 interface Props {
   value: [number, number];
@@ -20,7 +16,6 @@ interface Props {
   ticks: EuiRangeTick[];
   timeRangeMin: number;
   timeRangeMax: number;
-  rangeRef?: Ref<EuiDualRangeRef>;
 }
 
 export function TimeSliderSlidingWindowRange(props: Props) {
@@ -30,7 +25,6 @@ export function TimeSliderSlidingWindowRange(props: Props) {
 
   return (
     <EuiDualRange
-      ref={props.rangeRef}
       fullWidth={true}
       value={props.value}
       onChange={onChange}

diff --git a/x-pack/packages/ml/in_memory_table/hooks/use_table_state.ts b/x-pack/packages/ml/in_memory_table/hooks/use_table_state.ts
@@ -11,7 +11,7 @@ import { EuiInMemoryTable, Direction, Pagination } from '@elastic/eui';
 /**
  * Returned type for useTableState hook
  */
-export interface UseTableState<T> {
+export interface UseTableState<T extends object> {
   /**
    * Callback function which gets called whenever the pagination or sorting state of the table changed
    */
@@ -36,7 +36,7 @@ export interface UseTableState<T> {
  * @param {string} initialSortField - field name to sort by default
  * @param {string} initialSortDirection - default to 'asc'
  */
-export function useTableState<T>(
+export function useTableState<T extends object>(
   items: T[],
   initialSortField: string,
   initialSortDirection: 'asc' | 'desc' = 'asc'

diff --git a/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx b/x-pack/plugins/apm/public/components/shared/managed_table/index.tsx
@@ -14,7 +14,7 @@ import { useLegacyUrlParams } from '../../../context/url_params_context/use_url_
 import { fromQuery, toQuery } from '../links/url_helpers';
 
 // TODO: this should really be imported from EUI
-export interface ITableColumn<T> {
+export interface ITableColumn<T extends object> {
   name: ReactNode;
   actions?: Array<Record<string, unknown>>;
   field?: string;
@@ -26,7 +26,7 @@ export interface ITableColumn<T> {
   render?: (value: any, item: T) => unknown;
 }
 
-interface Props<T> {
+interface Props<T extends object> {
   items: T[];
   columns: Array<ITableColumn<T>>;
   initialPageSize: number;
@@ -59,7 +59,7 @@ export type SortFunction<T> = (
   sortDirection: 'asc' | 'desc'
 ) => T[];
 
-function UnoptimizedManagedTable<T>(props: Props<T>) {
+function UnoptimizedManagedTable<T extends object>(props: Props<T>) {
   const history = useHistory();
   const {
     items,

diff --git a/x-pack/plugins/cases/public/components/user_actions_activity_bar/filter_activity.tsx b/x-pack/plugins/cases/public/components/user_actions_activity_bar/filter_activity.tsx
@@ -28,7 +28,7 @@ const MyEuiFilterGroup = styled(EuiFilterGroup)`
 
 const FilterAllButton = styled(EuiFilterButton)`
   &,
-  & .euiFilterButton__textShift {
+  & .euiFilterButton__text {
     min-width: 28px;
   }
 `;

diff --git a/.../plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_data_table/utils.ts b/.../plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_data_table/utils.ts
@@ -7,7 +7,7 @@
 
 import type { EuiBasicTableProps, Pagination } from '@elastic/eui';
 
-type TablePagination = NonNullable<EuiBasicTableProps<unknown>['pagination']>;
+type TablePagination = NonNullable<EuiBasicTableProps<object>['pagination']>;
 
 export const getPaginationTableParams = (
   params: TablePagination & Pick<Required<TablePagination>, 'pageIndex' | 'pageSize'>,

diff --git a/x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_table/utils.ts b/x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_table/utils.ts
@@ -35,7 +35,7 @@ const getBaseQuery = ({
   }
 };
 
-type TablePagination = NonNullable<EuiBasicTableProps<unknown>['pagination']>;
+type TablePagination = NonNullable<EuiBasicTableProps<object>['pagination']>;
 
 export const getPaginationTableParams = (
   params: TablePagination & Pick<Required<TablePagination>, 'pageIndex' | 'pageSize'>,

diff --git a/x-pack/plugins/cloud_security_posture/public/pages/configurations/layout/findings_layout.tsx b/x-pack/plugins/cloud_security_posture/public/pages/configurations/layout/findings_layout.tsx
@@ -46,7 +46,7 @@ export const PageTitleText = ({ title }: { title: React.ReactNode }) => (
   </EuiText>
 );
 
-export const getExpandColumn = <T extends unknown>({
+export const getExpandColumn = <T extends object>({
   onClick,
 }: {
   onClick(item: T): void;

diff --git a/...cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_table_panel.tsx b/...cloud_security_posture/public/pages/vulnerability_dashboard/vulnerability_table_panel.tsx
@@ -23,7 +23,7 @@ import {
 } from './vulnerability_table_panel.config';
 import { ChartPanel } from '../../components/chart_panel';
 
-export interface VulnerabilityDashboardTableProps<T> {
+export interface VulnerabilityDashboardTableProps<T extends {}> {
   tableType: DASHBOARD_TABLE_TYPES;
   columns: Array<EuiBasicTableColumn<T>>;
   items: T[];

diff --git a/...sualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx b/...sualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx
@@ -51,7 +51,7 @@ const FIELD_NAME = 'fieldName';
 export type ItemIdToExpandedRowMap = Record<string, JSX.Element>;
 
 type DataVisualizerTableItem = FieldVisConfig | FileBasedFieldVisConfig;
-interface DataVisualizerTableProps<T> {
+interface DataVisualizerTableProps<T extends object> {
   items: T[];
   pageState: DataVisualizerTableState;
   updatePageState: (update: DataVisualizerTableState) => void;

diff --git a/...ns/data_visualizer/public/application/common/components/stats_table/use_table_settings.ts b/...ns/data_visualizer/public/application/common/components/stats_table/use_table_settings.ts
@@ -12,13 +12,13 @@ import type { DataVisualizerTableState } from '../../../../../common/types';
 
 const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
 
-interface UseTableSettingsReturnValue<T> {
+interface UseTableSettingsReturnValue<T extends object> {
   onTableChange: EuiBasicTableProps<T>['onChange'];
   pagination: Pagination;
   sorting: { sort: PropertySort };
 }
 
-export function useTableSettings<TypeOfItem>(
+export function useTableSettings<TypeOfItem extends object>(
   items: TypeOfItem[],
   pageState: DataVisualizerTableState,
   updatePageState: (update: DataVisualizerTableState) => void

diff --git a/...ics_collection_view/analytics_collection_explorer/analytics_collection_explorer_table.tsx b/...ics_collection_view/analytics_collection_explorer/analytics_collection_explorer_table.tsx
@@ -48,7 +48,7 @@ import {
 
 import { AnalyticsCollectionExplorerCallout } from './analytics_collection_explorer_callout';
 
-interface TableSetting<T = ExploreTableItem, K = T> {
+interface TableSetting<T extends object = ExploreTableItem, K extends object = T> {
   columns: Array<
     EuiBasicTableColumn<T & K> & {
       render?: (euiTheme: UseEuiTheme['euiTheme']) => EuiTableFieldDataColumnType<T & K>['render'];

diff --git a/...ics_collection_view/analytics_collection_overview/analytics_collection_overview_table.tsx b/...ics_collection_view/analytics_collection_overview/analytics_collection_overview_table.tsx
@@ -95,7 +95,7 @@ const tabsByFilter: Record<FilterBy, Array<{ id: ExploreTables; name: string }>>
   ],
 };
 
-interface TableSetting<T = ExploreTableItem, K = T> {
+interface TableSetting<T extends object = ExploreTableItem, K extends object = T> {
   columns: Array<
     EuiBasicTableColumn<T & K> & {
       render?: (euiTheme: UseEuiTheme['euiTheme']) => EuiTableFieldDataColumnType<T & K>['render'];