Upgrade EUI to v81.2.0 (elastic#158781)

## Summary

`eui@81.0.0` ⏩ `eui@81.2.0`

- Most changes to source code in this PR are CSS cleanups/deprecations
in `EuiSuperDatePicker`/`EuiDatePickerRange`
- One team (ML) had a `inline` specific usage of `EuiDatePickerRange`
that they reached out to us about via Slack, and that we have fixed in
this PR.
- All other usages of date picker components should have remained
working as-is with no changes, but please ping us if you see otherwise!

___

## [`81.2.0`](https://github.com/elastic/eui/tree/v81.2.0)

- Updated `EuiSuperDatePicker` to accept an object configuration for
`isDisabled` ([elastic#6821](elastic/eui#6821))

**Bug fixes**

- Fixed broken `EuiSuperDatePicker` styles
([elastic#6821](elastic/eui#6821))

## [`81.1.0`](https://github.com/elastic/eui/tree/v81.1.0)

- Added `EuiInlineEditText` and `EuiInlineEditTitle` components
([elastic#6757](elastic/eui#6757))
- Updated `EuiDatePickerRange` to support `inline` display
([elastic#6795](elastic/eui#6795))
- Added an `onError` callback prop to `EuiErrorBoundary`
([elastic#6810](elastic/eui#6810))
- Updated `EuiDataGrid` to only render screen reader text announcing
cell position if the cell is currently focused. This should improve the
ability to copy and paste multiple cells without SR text.
([elastic#6817](elastic/eui#6817))

**Bug fixes**

- Fixed `EuiDatePicker`'s `inline` display to correctly render and
prevent user interaction when `disabled` or `readOnly`
([elastic#6795](elastic/eui#6795))
- Fixed `EuiDatePicker`'s `inline` display to correctly render
`isInvalid` and `isLoading` icons
([elastic#6795](elastic/eui#6795))

**CSS-in-JS conversions**

- Converted `EuiDatePickerRange` to Emotion
([elastic#6795](elastic/eui#6795))

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

package.json

@@ -98,7 +98,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.8.0-canary.2",
     "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "81.0.0",
+    "@elastic/eui": "81.2.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",
@@ -108,12 +108,12 @@
     "@elastic/search-ui": "^1.20.2",
     "@elastic/search-ui-app-search-connector": "^1.20.2",
     "@elastic/search-ui-engines-connector": "^1.20.2",
-    "@emotion/cache": "^11.10.3",
-    "@emotion/css": "^11.10.0",
-    "@emotion/react": "^11.10.4",
-    "@emotion/serialize": "^1.1.0",
-    "@emotion/server": "^11.10.0",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/css": "^11.11.0",
+    "@emotion/react": "^11.11.0",
+    "@emotion/serialize": "^1.1.2",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@grpc/grpc-js": "^1.6.7",
     "@hapi/accept": "^5.0.2",
     "@hapi/boom": "^9.1.4",
@@ -1011,8 +1011,8 @@
     "@elastic/eslint-plugin-eui": "0.0.2",
     "@elastic/makelogs": "^6.1.1",
     "@elastic/synthetics": "^1.0.0-beta.39",
-    "@emotion/babel-preset-css-prop": "^11.10.0",
-    "@emotion/jest": "^11.10.0",
+    "@emotion/babel-preset-css-prop": "^11.11.0",
+    "@emotion/jest": "^11.11.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@istanbuljs/schema": "^0.1.2",
     "@jest/console": "^29.3.1",

packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx

@@ -812,6 +812,22 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiImageButton.closeFullScreen': i18n.translate('core.euiImageButton.closeFullScreen', {
       defaultMessage: 'Press Escape or click to close image fullscreen mode',
     }),
+    'euiInlineEditForm.activateEditModeDescription': i18n.translate(
+      'core.euiInlineEditForm.activateEditModeDescription',
+      { defaultMessage: 'Click to edit this text inline.' }
+    ),
+    'euiInlineEditForm.inputKeyboardInstructions': i18n.translate(
+      'core.euiInlineEditForm.inputKeyboardInstructions',
+      { defaultMessage: 'Press Enter to save your edited text. Press Escape to cancel your edit.' }
+    ),
+    'euiInlineEditForm.cancelButtonAriaLabel': i18n.translate(
+      'core.euiInlineEditForm.cancelButtonAriaLabel',
+      { defaultMessage: 'Cancel edit' }
+    ),
+    'euiInlineEditForm.saveButtonAriaLabel': i18n.translate(
+      'core.euiInlineEditForm.saveButtonAriaLabel',
+      { defaultMessage: 'Save edit' }
+    ),
     'euiLink.external.ariaLabel': i18n.translate('core.euiLink.external.ariaLabel', {
       defaultMessage: 'External link',
     }),

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.4.0': ['Elastic License 2.0'],
-  '@elastic/eui@81.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@81.2.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
 };

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/time_filter.tsx

@@ -65,6 +65,7 @@ export const TimeFilter = ({ filter, commit, dateFormat, commonlyUsedRanges = []
   return (
     <div className="canvasTimeFilter">
       <EuiSuperDatePicker
+        width="full"
         start={start}
         end={end}
         isPaused={false}

x-pack/plugins/canvas/public/style/index.scss

@@ -51,5 +51,4 @@
 @import '../../canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.scss';
 @import '../../canvas_plugin_src/renderers/embeddable/embeddable.scss';
 @import '../../canvas_plugin_src/renderers/plot/plot.scss';
-@import '../../canvas_plugin_src/renderers/filters/time_filter/time_filter.scss';
 @import '../../canvas_plugin_src/uis/arguments/image_upload/image_upload.scss';

x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/components/series_date_picker/index.tsx

@@ -35,6 +35,7 @@ export function SeriesDatePicker({ series, seriesId }: Props) {
 
   return (
     <EuiSuperDatePicker
+      width="full"
       start={series?.time?.from}
       end={series?.time?.to}
       onTimeChange={onTimeChange}

x-pack/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/date_picker_col.tsx

@@ -78,10 +78,4 @@ export function DatePickerCol({ seriesId, series }: Props) {
 
 const Wrapper = styled.div`
   width: 100%;
-  .euiSuperDatePicker__flexWrapper {
-    width: 100%;
-    > .euiFlexItem {
-      margin-right: 0;
-    }
-  }
 `;

x-pack/plugins/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js

@@ -24,6 +24,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import moment from 'moment';
 import { TIME_FORMAT } from '../../../../../../common/constants/time_format';
 import { generateTempId } from '../utils';
@@ -32,6 +33,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 const VALID_DATE_STRING_LENGTH = 19;
+const INLINE_DATE_PICKER_RANGE_WIDTH = 553;
 
 export class NewEventModal extends Component {
   static propTypes = {
@@ -208,12 +210,15 @@ export class NewEventModal extends Component {
         <EuiSpacer size="s" />
         <EuiFormRow fullWidth>
           <EuiDatePickerRange
-            fullWidth
-            iconType={false}
+            inline
+            css={css`
+              @media (min-width: ${INLINE_DATE_PICKER_RANGE_WIDTH}px) {
+                inline-size: ${INLINE_DATE_PICKER_RANGE_WIDTH}px;
+                max-inline-size: 100%;
+              }
+            `}
             startDateControl={
               <EuiDatePicker
-                fullWidth
-                inline
                 selected={startDate}
                 onChange={this.handleChangeStart}
                 startDate={startDate}
@@ -231,8 +236,6 @@ export class NewEventModal extends Component {
             }
             endDateControl={
               <EuiDatePicker
-                fullWidth
-                inline
                 selected={endDate}
                 onChange={this.handleChangeEnd}
                 startDate={startDate}

x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx

@@ -77,10 +77,6 @@ const StyledDatePicker = styled.div`
   .euiFormControlLayout--group {
     background-color: rgba(0, 119, 204, 0.2);
   }
-
-  .euiDatePickerRange--readOnly {
-    background-color: ${(props) => props.theme.eui.euiFormBackgroundColor};
-  }
 `;
 const EndpointListNavLink = memo<{
   name: string;

x-pack/plugins/security_solution/public/timelines/components/timeline/eql_tab_content/index.tsx

@@ -113,15 +113,6 @@ const ScrollableFlexItem = styled(EuiFlexItem)`
   overflow: hidden;
 `;
 
-const DatePicker = styled(EuiFlexItem)`
-  .euiSuperDatePicker__flexWrapper {
-    max-width: none;
-    width: auto;
-  }
-`;
-
-DatePicker.displayName = 'DatePicker';
-
 const VerticalRule = styled.div`
   width: 2px;
   height: 100%;
@@ -277,9 +268,9 @@ export const EqlTabContentComponent: React.FC<Props> = ({
                   setFullScreen={setTimelineFullScreen}
                 />
               )}
-              <DatePicker grow={10}>
-                <SuperDatePicker id={InputsModelId.timeline} timelineId={timelineId} />
-              </DatePicker>
+              <EuiFlexItem grow={10}>
+                <SuperDatePicker width="auto" id={InputsModelId.timeline} timelineId={timelineId} />
+              </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <TimelineDatePickerLock />
               </EuiFlexItem>

x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx

@@ -118,14 +118,6 @@ const ScrollableFlexItem = styled(EuiFlexItem)`
   overflow: hidden;
 `;
 
-const DatePicker = styled(EuiFlexItem)`
-  .euiSuperDatePicker__flexWrapper {
-    max-width: none;
-    width: auto;
-  }
-`;
-DatePicker.displayName = 'DatePicker';
-
 const SourcererFlex = styled(EuiFlexItem)`
   align-items: flex-end;
 `;
@@ -369,13 +361,14 @@ export const QueryTabContentComponent: React.FC<Props> = ({
                   setFullScreen={setTimelineFullScreen}
                 />
               )}
-              <DatePicker grow={10}>
+              <EuiFlexItem grow={10}>
                 <SuperDatePicker
+                  width="auto"
                   id={InputsModelId.timeline}
                   timelineId={timelineId}
                   disabled={isDatePickerDisabled}
                 />
-              </DatePicker>
+              </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <TimelineDatePickerLock />
               </EuiFlexItem>