Upgrade EUI to v92.0.0

package.json

@@ -102,7 +102,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@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",

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}',

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;
   }

src/dev/license_checker/config.ts

@@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['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'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   '[email protected]': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/[email protected]': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

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}

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}

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}

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;
   }
 `;

x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/risk_score_mapping/index.tsx

@@ -51,7 +51,6 @@ interface RiskScoreFieldProps {
   idAria: string;
   indices: DataViewBase;
   isDisabled: boolean;
-  isActive: boolean;
   placeholder?: string;
 }
 
@@ -61,7 +60,6 @@ export const RiskScoreField = ({
   idAria,
   indices,
   isDisabled,
-  isActive,
   placeholder,
 }: RiskScoreFieldProps) => {
   const { value, isMappingChecked, mapping } = field.value;
@@ -149,39 +147,29 @@ export const RiskScoreField = ({
   return (
     <EuiFlexGroup direction={'column'}>
       <EuiFlexItem>
-        {
-          // TODO: https://github.com/elastic/kibana/issues/161456
-          // The About step page contains EuiRange component which does not work properly within memoized parents.
-          // EUI team suggested not to memoize EuiRange/EuiDualRange: https://github.com/elastic/eui/issues/6846
-          // Workaround: We force EuiRange re-rendering by removing/adding it into the DOM.
-          // NOTE: We should remove this workaround once EUI team fixed EuiRange.
-          // Related ticket: https://github.com/elastic/kibana/issues/160561
-        }
-        {isActive && (
-          <EuiFormRow
-            label={riskScoreLabel}
-            labelAppend={field.labelAppend}
-            helpText={field.helpText}
-            error={'errorMessage'}
-            isInvalid={false}
-            fullWidth
-            data-test-subj={`${dataTestSubj}-defaultRisk`}
-            describedByIds={idAria ? [idAria] : undefined}
-          >
-            <EuiRange
-              value={value}
-              onChange={handleDefaultRiskScoreChange}
-              max={100}
-              min={0}
-              showRange
-              showInput
-              fullWidth={false}
-              showTicks
-              tickInterval={25}
-              data-test-subj={`${dataTestSubj}-defaultRiskRange`}
-            />
-          </EuiFormRow>
-        )}
+        <EuiFormRow
+          label={riskScoreLabel}
+          labelAppend={field.labelAppend}
+          helpText={field.helpText}
+          error={'errorMessage'}
+          isInvalid={false}
+          fullWidth
+          data-test-subj={`${dataTestSubj}-defaultRisk`}
+          describedByIds={idAria ? [idAria] : undefined}
+        >
+          <EuiRange
+            value={value}
+            onChange={handleDefaultRiskScoreChange}
+            max={100}
+            min={0}
+            showRange
+            showInput
+            fullWidth={false}
+            showTicks
+            tickInterval={25}
+            data-test-subj={`${dataTestSubj}-defaultRiskRange`}
+          />
+        </EuiFormRow>
       </EuiFlexItem>
       <EuiFlexItem>
         <EuiFormRow

x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/step_about_rule/index.test.tsx

@@ -106,7 +106,6 @@ describe('StepAboutRuleComponent', () => {
         dataViewId={defineStepDefault.dataViewId}
         timestampOverride={stepAboutDefaultValue.timestampOverride}
         isLoading={false}
-        isActive={true}
         form={aboutStepForm}
       />
     );

x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/step_about_rule/index.tsx

@@ -50,13 +50,6 @@ interface StepAboutRuleProps extends RuleStepProps {
   timestampOverride: string;
   form: FormHook<AboutStepRule>;
   esqlQuery?: string | undefined;
-  // TODO: https://github.com/elastic/kibana/issues/161456
-  // The About step page contains EuiRange component which does not work properly within memoized parents.
-  // EUI team suggested not to memoize EuiRange/EuiDualRange: https://github.com/elastic/eui/issues/6846
-  // Workaround: We introduced this additional property to be able to do extra re-render on switching to/from the About step page.
-  // NOTE: We should remove this workaround once EUI team fixed EuiRange.
-  // Related ticket: https://github.com/elastic/kibana/issues/160561
-  isActive: boolean;
 }
 
 interface StepAboutRuleReadOnlyProps {
@@ -83,7 +76,6 @@ const StepAboutRuleComponent: FC<StepAboutRuleProps> = ({
   index,
   dataViewId,
   timestampOverride,
-  isActive = false,
   isUpdateView = false,
   isLoading,
   form,
@@ -188,7 +180,6 @@ const StepAboutRuleComponent: FC<StepAboutRuleProps> = ({
                 dataTestSubj: 'detectionEngineStepAboutRuleRiskScore',
                 idAria: 'detectionEngineStepAboutRuleRiskScore',
                 isDisabled: isLoading || indexPatternLoading,
-                isActive,
                 indices: indexPattern,
               }}
             />

x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/pages/rule_creation/index.tsx

@@ -596,7 +596,6 @@ const CreateRulePageComponent: React.FC = () => {
             dataViewId={defineStepData.dataViewId}
             timestampOverride={aboutStepData.timestampOverride}
             isLoading={isCreateRuleLoading || loading}
-            isActive={activeStep === RuleStep.aboutRule}
             form={aboutStepForm}
             esqlQuery={esqlQueryForAboutStep}
           />