Upgrade EUI to v87.1.0 (#163961)

`v86.0.0`⏩`v87.1.0`

⚠️ The biggest set of type changes in this PR come from the breaking
change that makes `pageSize` and `pageSizeOptions` now optional props
for `EuiBasicTable.pagination`, `EuiInMemoryTable.pagination` and
`EuiDataGrid.pagination`.

This caused several other components that were cloning EUI's pagination
type to start throwing type warnings about `pageSize` being optional.
Where I came across these errors, I modified the extended types to
require `pageSize`. These types and their usages may end up changing
again in any case once the Shared UX team looks into
#56406.

---

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

- Updated the underlying library powering `EuiAutoSizer`. This primarily
affects typing around the `disableHeight` and `disableWidth` props
([#6798](elastic/eui#6798))
- Added new `EuiAutoSize`, `EuiAutoSizeHorizontal`, and
`EuiAutoSizeVertical` types to support `EuiAutoSizer`'s now-stricter
typing ([#6798](elastic/eui#6798))
- Updated `EuiDatePickerRange` to support `compressed` display
([#7058](elastic/eui#7058))
- Updated `EuiFlyoutBody` with a new `scrollableTabIndex` prop
([#7061](elastic/eui#7061))
- Added a new `panelMinWidth` prop to `EuiInputPopover`
([#7071](elastic/eui#7071))
- Added a new `inputPopoverProps` prop for `EuiRange`s and
`EuiDualRange`s with `showInput="inputWithPopover"` set
([#7082](elastic/eui#7082))

**Bug fixes**

- Fixed `EuiToolTip` overriding instead of merging its
`aria-describedby` tooltip ID with any existing `aria-describedby`s
([#7055](elastic/eui#7055))
- Fixed `EuiSuperDatePicker`'s `compressed` display
([#7058](elastic/eui#7058))
- Fixed `EuiAccordion` to remove tabbable children from sequential
keyboard navigation when the accordion is closed
([#7064](elastic/eui#7064))
- Fixed `EuiFlyout`s to accept custom `aria-describedby` IDs
([#7065](elastic/eui#7065))

**Accessibility**

- Removed the default `dialog` role and `tabIndex` from push
`EuiFlyout`s. Push flyouts, compared to overlay flyouts, require manual
accessibility management.
([#7065](elastic/eui#7065))

## [`87.0.0`](https://github.com/elastic/eui/tree/v87.0.0)

- Added beta `componentDefaults` prop to `EuiProvider`, which will allow
configuring certain default props globally. This list of components and
defaults is still under consideration.
([#6923](elastic/eui#6923))
- `EuiPortal`'s `insert` prop can now be configured globally via
`EuiProvider.componentDefaults`
([#6941](elastic/eui#6941))
- `EuiFocusTrap`'s `crossFrame` and `gapMode` props can now be
configured globally via `EuiProvider.componentDefaults`
([#6942](elastic/eui#6942))
- `EuiTablePagination`'s `itemsPerPage`, `itemsPerPageOptions`, and
`showPerPageOptions` props can now be configured globally via
`EuiProvider.componentDefaults`
([#6951](elastic/eui#6951))
- `EuiBasicTable`, `EuiInMemoryTable`, and `EuiDataGrid` now allow
`pagination.pageSize` to be undefined. If undefined, `pageSize` defaults
to `EuiTablePagination`'s `itemsPerPage` component default.
([#6993](elastic/eui#6993))
- `EuiBasicTable`, `EuiInMemoryTable`, and `EuiDataGrid`'s
`pagination.pageSizeOptions` will now fall back to
`EuiTablePagination`'s `itemsPerPageOptions` component default.
([#6993](elastic/eui#6993))
- Updated `EuiHeaderLinks`'s `gutterSize` spacings
([#7005](elastic/eui#7005))
- Updated `EuiHeaderAlert`'s stacking styles
([#7005](elastic/eui#7005))
- Added `toolTipProps` to `EuiListGroupItem` that allows customizing
item tooltips. ([#7018](elastic/eui#7018))
- Updated `EuiBreadcrumbs` to support breadcrumbs that toggle popovers
via `popoverContent` and `popoverProps`
([#7031](elastic/eui#7031))
- Improved the contrast ratio of disabled titles within `EuiSteps` and
`EuiStepsHorizontal` to meet WCAG AA guidelines.
([#7032](elastic/eui#7032))
- Updated `EuiSteps` and `EuiStepsHorizontal` to highlight and provide a
more clear visual indication of the current step
([#7048](elastic/eui#7048))

**Bug fixes**

- Single uses of `<EuiHeaderSectionItem side="right" />` now align right
as expected without needing a previous `side="left"` sibling.
([#7005](elastic/eui#7005))
- `EuiPageTemplate` now correctly displays `panelled={true}`
([#7044](elastic/eui#7044))

**Breaking changes**

- `EuiTablePagination`'s default `itemsPerPage` is now `10` (was
previously `50`). This can be configured through
`EuiProvider.componentDefaults`.
([#6993](elastic/eui#6993))
- `EuiTablePagination`'s default `itemsPerPageOptions` is now `[10, 25,
50]` (was previously `[10, 20, 50, 100]`). This can be configured
through `EuiProvider.componentDefaults`.
([#6993](elastic/eui#6993))
- Removed `border` prop from `EuiHeaderSectionItem` (unused since
Amsterdam theme) ([#7005](elastic/eui#7005))
- Removed `borders` object configuration from `EuiHeader.sections`
([#7005](elastic/eui#7005))

**CSS-in-JS conversions**

- Converted `EuiHeaderAlert` to Emotion; Removed unused
`.euiHeaderAlert__dismiss` CSS
([#7005](elastic/eui#7005))
- Converted `EuiHeaderSection`, `EuiHeaderSectionItem`, and
`EuiHeaderSectionItemButton` to Emotion
([#7005](elastic/eui#7005))
- Converted `EuiHeaderLinks` and `EuiHeaderLink` to Emotion; Removed
`$euiHeaderLinksGutterSizes` Sass variables
([#7005](elastic/eui#7005))
- Removed `$euiHeaderBackgroundColor` Sass variable; use
`$euiColorEmptyShade` instead
([#7005](elastic/eui#7005))
- Removed `$euiHeaderChildSize` Sass variable; use `$euiSizeXXL` instead
([#7005](elastic/eui#7005))

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Patryk Kopyciński <contact@patrykkopycinski.com>

examples/bfetch_explorer/public/components/page/index.tsx

@@ -16,7 +16,7 @@ export interface PageProps {
 
 export const Page: React.FC<PageProps> = ({ title = 'Untitled', sidebar, children }) => {
   return (
-    <EuiPageTemplate panelled={true} offset={0} grow={true}>
+    <EuiPageTemplate offset={0} grow={true}>
       <EuiPageTemplate.Sidebar>{sidebar}</EuiPageTemplate.Sidebar>
       <EuiPageTemplate.Header>
         <EuiPageHeader pageTitle={title} />

package.json

@@ -99,7 +99,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1",
     "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "86.0.0",
+    "@elastic/eui": "87.1.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

packages/core/chrome/core-chrome-browser-internal/src/ui/header/header.tsx

@@ -129,7 +129,6 @@ export function Header({
                     customBranding$={customBranding$}
                   />,
                 ],
-                borders: 'none',
               },
               {
                 ...(observables.navControlsCenter$ && {
@@ -139,7 +138,6 @@ export function Header({
                     </EuiShowFor>,
                   ],
                 }),
-                borders: 'none',
               },
               {
                 items: [
@@ -164,14 +162,13 @@ export function Header({
                   />,
                   <HeaderNavControls navControls$={observables.navControlsRight$} />,
                 ],
-                borders: 'none',
               },
             ]}
           />
 
           <EuiHeader position="fixed" className="header__secondBar">
             <EuiHeaderSection grow={false}>
-              <EuiHeaderSectionItem border="right" className="header__toggleNavButtonSection">
+              <EuiHeaderSectionItem className="header__toggleNavButtonSection">
                 <CollapsibleNav
                   appId$={application.currentAppId$}
                   id={navId}
@@ -230,7 +227,7 @@ export function Header({
             <HeaderBadge badge$={observables.badge$} />
 
             <EuiHeaderSection side="right">
-              <EuiHeaderSectionItem border="none">
+              <EuiHeaderSectionItem>
                 <HeaderActionMenu mounter={headerActionMenuMounter} />
               </EuiHeaderSectionItem>
             </EuiHeaderSection>

packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_logo.scss

@@ -1,7 +1,7 @@
 .chrHeaderLogo {
   display: flex;
   align-items: center;
-  height: $euiHeaderChildSize;
+  height: $euiSizeXXL;
   padding-inline: $euiSizeS;
 }
 

packages/core/chrome/core-chrome-browser-internal/src/ui/header/header_nav_controls.tsx

@@ -18,7 +18,7 @@ interface Props {
   side?: 'left' | 'right';
 }
 
-export function HeaderNavControls({ navControls$, side }: Props) {
+export function HeaderNavControls({ navControls$ }: Props) {
   const navControls = useObservable(navControls$, []);
 
   if (!navControls) {
@@ -30,10 +30,7 @@ export function HeaderNavControls({ navControls$, side }: Props) {
   return (
     <>
       {navControls.map((navControl: ChromeNavControl, index: number) => (
-        <EuiHeaderSectionItem
-          key={index}
-          border={side ? (side === 'left' ? 'right' : 'left') : 'none'}
-        >
+        <EuiHeaderSectionItem key={index}>
           <HeaderExtension extension={navControl.mount} />
         </EuiHeaderSectionItem>
       ))}

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

@@ -103,6 +103,9 @@ export const getEuiContextMapping = (): EuiTokensObject => {
       defaultMessage: 'Page level controls',
       description: 'Screen reader announcement about heading controls',
     }),
+    'euiBreadcrumb.popoverAriaLabel': i18n.translate('core.euiBreadcrumb.popoverAriaLabel', {
+      defaultMessage: 'Clicking this button will toggle a popover dialog.',
+    }),
     'euiBreadcrumb.collapsedBadge.ariaLabel': i18n.translate(
       'core.euiBreadcrumb.collapsedBadge.ariaLabel',
       {
@@ -158,6 +161,17 @@ export const getEuiContextMapping = (): EuiTokensObject => {
           'ARIA label and tooltip content describing a button that expands an actions menu',
       }
     ),
+    'euiCollapsibleNavBeta.ariaLabel': i18n.translate('core.euiCollapsibleNavBeta.ariaLabel', {
+      defaultMessage: 'Site menu',
+    }),
+    'euiCollapsibleNavButton.ariaLabelClose': i18n.translate(
+      'core.euiCollapsibleNavButton.ariaLabelClose',
+      { defaultMessage: 'Toggle navigation closed' }
+    ),
+    'euiCollapsibleNavButton.ariaLabelOpen': i18n.translate(
+      'core.euiCollapsibleNavButton.ariaLabelOpen',
+      { defaultMessage: 'Toggle navigation open' }
+    ),
     'euiColorPicker.alphaLabel': i18n.translate('core.euiColorPicker.alphaLabel', {
       defaultMessage: 'Alpha channel (opacity) value',
       description: 'Label describing color alpha channel',

packages/kbn-securitysolution-exception-list-components/src/exception_items/index.tsx

@@ -11,16 +11,14 @@ import { css } from '@emotion/react';
 import type { FC } from 'react';
 import { EuiCommentProps, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
-import type { Pagination as PaginationType } from '@elastic/eui';
-
 import type {
   CommentsArray,
   ExceptionListItemSchema,
   ExceptionListTypeEnum,
 } from '@kbn/securitysolution-io-ts-list-types';
 
 import { euiThemeVars } from '@kbn/ui-theme';
-import { EmptyViewerState, ExceptionItemCard, Pagination } from '../..';
+import { EmptyViewerState, ExceptionItemCard, Pagination, PaginationProps } from '../..';
 
 import type {
   RuleReferences,
@@ -46,7 +44,7 @@ interface ExceptionItemsProps {
   exceptions: ExceptionListItemSchema[];
   listType: ExceptionListTypeEnum;
   ruleReferences: RuleReferences;
-  pagination: PaginationType;
+  pagination: PaginationProps['pagination'];
   editActionLabel?: string;
   deleteActionLabel?: string;
   dataTestSubj?: string;

packages/kbn-securitysolution-exception-list-components/src/types/index.ts

@@ -12,15 +12,15 @@ import type { Pagination } from '@elastic/eui';
 import type { NamespaceType } from '@kbn/securitysolution-io-ts-list-types';
 
 export interface GetExceptionItemProps {
-  pagination?: Pagination;
+  pagination?: PaginationProps['pagination'];
   search?: string;
   filters?: string;
 }
 
 export interface PaginationProps {
   dataTestSubj?: string;
   ariaLabel?: string;
-  pagination: Pagination;
+  pagination: Pagination & { pageSize: number };
   onPaginationChange: (arg: GetExceptionItemProps) => void;
 }
 

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@86.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@87.1.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/packages/ml/data_grid/lib/types.ts

@@ -64,7 +64,7 @@ export interface RowCountInfo {
 /**
  * Type representing the pagination settings for an index.
  */
-export type IndexPagination = Pick<EuiDataGridPaginationProps, 'pageIndex' | 'pageSize'>;
+export type IndexPagination = Required<Pick<EuiDataGridPaginationProps, 'pageIndex' | 'pageSize'>>;
 
 /**
  * Type for callback function for changing items per page.

x-pack/packages/security-solution/data_table/components/data_table/index.tsx

@@ -92,7 +92,7 @@ interface BaseDataTableProps {
   rowRenderers: DeprecatedRowRenderer[];
   hasCrudPermissions?: boolean;
   unitCountText: string;
-  pagination: EuiDataGridPaginationProps;
+  pagination: EuiDataGridPaginationProps & { pageSize: number };
   totalItems: number;
   rowHeightsOptions?: EuiDataGridRowHeightsOptions;
   isEventRenderedView?: boolean;

x-pack/plugins/cloud_security_posture/public/common/hooks/use_cloud_posture_table/utils.ts

@@ -50,7 +50,7 @@ export const getPaginationTableParams = (
 export const getPaginationQuery = ({
   pageIndex,
   pageSize,
-}: Pick<Pagination, 'pageIndex' | 'pageSize'>) => ({
+}: Required<Pick<Pagination, 'pageIndex' | 'pageSize'>>) => ({
   from: pageIndex * pageSize,
   size: pageSize,
 });

x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings/latest_findings_table.tsx

@@ -31,7 +31,7 @@ type TableProps = Required<EuiBasicTableProps<CspFinding>>;
 interface Props {
   loading: boolean;
   items: CspFinding[];
-  pagination: Pagination;
+  pagination: Pagination & { pageSize: number };
   sorting: TableProps['sorting'];
   setTableOptions(options: CriteriaWithPagination<CspFinding>): void;
   onAddFilter: OnAddFilter;

x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings_by_resource/resource_findings/resource_findings_table.tsx

@@ -29,7 +29,7 @@ import { EmptyState } from '../../../../components/empty_state';
 export interface ResourceFindingsTableProps {
   items: CspFinding[];
   loading: boolean;
-  pagination: Pagination;
+  pagination: Pagination & { pageSize: number };
   sorting: Required<EuiBasicTableProps<CspFinding>>['sorting'];
   setTableOptions(options: CriteriaWithPagination<CspFinding>): void;
   onAddFilter: OnAddFilter;

x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx

@@ -500,7 +500,6 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVi
       grow={false}
       data-test-subj="dataVisualizerIndexPage"
       paddingSize="none"
-      panelled={true}
     >
       <EuiPageTemplate.Section>
         <EuiPageTemplate.Header data-test-subj="dataVisualizerPageHeader" css={dvPageHeader}>

x-pack/plugins/enterprise_search/public/applications/workplace_search/components/layout/account_header/account_header.tsx

@@ -68,11 +68,11 @@ export const AccountHeader: React.FC = () => {
   return (
     <EuiHeader>
       <EuiHeaderSection grow={false}>
-        <EuiHeaderSectionItem border="none">
+        <EuiHeaderSectionItem>
           <EuiHeaderLogo iconType="logoWorkplaceSearch" />
           <EuiText role="banner">{WORKPLACE_SEARCH_TITLE}</EuiText>
         </EuiHeaderSectionItem>
-        <EuiHeaderSectionItem border="none">
+        <EuiHeaderSectionItem>
           <EuiHeaderLinks>
             <EuiButtonEmptyTo to={PRIVATE_SOURCES_PATH}>{ACCOUNT_NAV.SOURCES}</EuiButtonEmptyTo>
           </EuiHeaderLinks>

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_table_settings.ts

@@ -32,7 +32,7 @@ export interface CriteriaWithPagination<T> extends Criteria<T> {
 
 interface UseTableSettingsReturnValue<T> {
   onTableChange: EuiBasicTableProps<T>['onChange'];
-  pagination: Pagination;
+  pagination: Required<Omit<Pagination, 'showPerPageOptions'>>;
   sorting: {
     sort: {
       field: keyof T;