elastic · cee-chen · Aug 21, 2023 · Aug 15, 2023 · Aug 15, 2023 · Aug 15, 2023
diff --git a/package.json b/package.json
@@ -98,7 +98,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",

@@ -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>

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

@@ -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>
       ))}

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

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

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

@@ -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
 };
diff --git a/x-pack/packages/ml/data_grid/lib/types.ts b/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.

diff --git a/x-pack/packages/security-solution/data_table/components/data_table/index.tsx b/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;

@@ -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,
 });

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

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

@@ -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>

diff --git a/...rame_analytics/pages/analytics_management/components/analytics_list/use_table_settings.ts b/...rame_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;

@@ -90,7 +90,7 @@ describe('SecurityNavControlService', () => {
                 aria-expanded="false"
                 aria-haspopup="true"
                 aria-label="Account menu"
-                class="euiButtonEmpty euiHeaderSectionItemButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text"
+                class="euiButtonEmpty euiHeaderSectionItemButton emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiHeaderSectionItemButton"
                 data-test-subj="userMenuButton"
                 style="line-height: normal;"
                 type="button"
@@ -102,7 +102,7 @@ describe('SecurityNavControlService', () => {
                     class="eui-textTruncate euiButtonEmpty__text"
                   >
                     <span
-                      class="euiHeaderSectionItemButton__content"
+                      class="euiHeaderSectionItemButton__content emotion-euiHeaderSectionItemButton__content"
                     >
                       <span
                         aria-label="Loading"