Merge branch 'main' into row-height-auto-fix

packages/eui/changelogs/upcoming/8243.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Ensures that the `values` of `EuiI18n` used in `EuiPagination` use `key` attributes to prevent potential ["unique key" warnings](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key).

packages/eui/changelogs/upcoming/8248.md

@@ -0,0 +1,2 @@
+- Added two new icons: `createGenericJob` and `createGeoJob`
+

packages/eui/changelogs/upcoming/8256.md

@@ -0,0 +1,3 @@
+**Breaking changes**
+
+- Removed `EuiPopover`'s deprecated `hasDragDrop` prop. Use `usePortal` on any child `EuiDraggable` instead

packages/eui/src-docs/src/views/icon/ml.js

@@ -19,6 +19,8 @@ const iconTypes = [
   'createPopulationJob',
   'regressionJob',
   'createSingleMetricJob',
+  'createGenericJob',
+  'createGeoJob',
 ];
 
 export default () => (

packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.test.tsx

@@ -115,13 +115,17 @@ describe('EuiAbsoluteTab', () => {
         locale: LocaleSpecifier;
         dateString: string;
       }>([
-        { locale: 'en', dateString: 'Mon Jan 1st' },
-        { locale: 'zh-CN', dateString: '周一 1月 1日' },
-        { locale: 'ja-JP', dateString: '月 1月 1日' },
-        { locale: 'fr-FR', dateString: 'lun. janv. 1er' },
+        { locale: 'en', dateString: 'Mon Jan 2024 1st' },
+        { locale: 'zh-CN', dateString: '周一 1月 2024 1日' },
+        { locale: 'ja-JP', dateString: '月 1月 2024 1日' },
+        { locale: 'fr-FR', dateString: 'lun. janv. 2024 1er' },
       ])('%p', ({ locale, dateString }) => {
         const { getByTestSubject } = render(
-          <EuiAbsoluteTab {...props} dateFormat="ddd MMM Do" locale={locale} />
+          <EuiAbsoluteTab
+            {...props}
+            dateFormat="ddd MMM YYYY Do"
+            locale={locale}
+          />
         );
         const input = getByTestSubject('superDatePickerAbsoluteDateInput');
 

packages/eui/src/components/icon/__snapshots__/icon.test.tsx.snap

@@ -1922,6 +1922,52 @@ exports[`EuiIcon props type createAdvancedJob is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type createGenericJob is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
+  data-icon-type="createGenericJob"
+  data-is-loaded="true"
+  height="32"
+  role="img"
+  viewBox="0 0 32 32"
+  width="32"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16h-2c0-7.732-6.268-14-14-14S2 8.268 2 16s6.268 14 14 14v2Z"
+  />
+  <path
+    class="euiIcon__fillSecondary"
+    d="M17 15h6v2h-6v6h-2v-6H9v-2h6V9h2v6Zm15 15v2H20v-2h12Zm0-8H20v2h12v-2Zm0 4v2H20v-2h12Z"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type createGeoJob is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-app-isLoaded"
+  data-icon-type="createGeoJob"
+  data-is-loaded="true"
+  height="32"
+  role="img"
+  viewBox="0 0 32 32"
+  width="32"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16h-2c0-7.732-6.268-14-14-14S2 8.268 2 16s6.268 14 14 14v2Z"
+  />
+  <path
+    class="euiIcon__fillSecondary"
+    clip-rule="evenodd"
+    d="M23 15h-6V9h-2v6H9v2h6v6h2v-6h6v-2Zm-1 9.196C22 27.329 25.427 32 27 32s5-4.67 5-7.804V24a5 5 0 1 0-10 .096v.1ZM27 26a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type createMultiMetricJob is rendered 1`] = `
 <svg
   aria-hidden="true"

packages/eui/src/components/icon/assets/ml_create_generic_job.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import type { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const EuiIconMlCreateGenericJob = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={32}
+    height={32}
+    viewBox="0 0 32 32"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16h-2c0-7.732-6.268-14-14-14S2 8.268 2 16s6.268 14 14 14v2Z" />
+    <path
+      d="M17 15h6v2h-6v6h-2v-6H9v-2h6V9h2v6Zm15 15v2H20v-2h12Zm0-8H20v2h12v-2Zm0 4v2H20v-2h12Z"
+      className="euiIcon__fillSecondary"
+    />
+  </svg>
+);
+export const icon = EuiIconMlCreateGenericJob;

packages/eui/src/components/icon/assets/ml_create_geo_job.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import type { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const EuiIconMlCreateGeoJob = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={32}
+    height={32}
+    viewBox="0 0 32 32"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16h-2c0-7.732-6.268-14-14-14S2 8.268 2 16s6.268 14 14 14v2Z" />
+    <path
+      clipRule="evenodd"
+      fillRule="evenodd"
+      d="M23 15h-6V9h-2v6H9v2h6v6h2v-6h6v-2Zm-1 9.196C22 27.329 25.427 32 27 32s5-4.67 5-7.804V24a5 5 0 1 0-10 .096v.1ZM27 26a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
+      className="euiIcon__fillSecondary"
+    />
+  </svg>
+);
+export const icon = EuiIconMlCreateGeoJob;

packages/eui/src/components/icon/icon_map.ts

@@ -76,6 +76,8 @@ export const typeToPathMap = {
   copy: 'copy',
   copyClipboard: 'copy_clipboard',
   createAdvancedJob: 'ml_create_advanced_job',
+  createGenericJob: 'ml_create_generic_job',
+  createGeoJob: 'ml_create_geo_job',
   createMultiMetricJob: 'ml_create_multi_metric_job',
   createPopulationJob: 'ml_create_population_job',
   createSingleMetricJob: 'ml_create_single_metric_job',

packages/eui/src/components/pagination/pagination.tsx

@@ -159,8 +159,8 @@ export const EuiPagination: FunctionComponent<Props> = ({
             token="euiPagination.pageOfTotalCompressed"
             default="{page} of {total}"
             values={{
-              page: <span>{activePage + 1}</span>,
-              total: <span>{pageCount}</span>,
+              page: <span key="activePage">{activePage + 1}</span>,
+              total: <span key="pageCount">{pageCount}</span>,
             }}
           />
         </EuiText>

packages/eui/src/components/popover/input_popover.stories.tsx

@@ -37,7 +37,6 @@ const meta: Meta<EuiInputPopoverProps> = {
     panelMinWidth: 0,
     offset: undefined,
     buffer: undefined,
-    hasDragDrop: false,
     panelClassName: '',
     popoverScreenReaderText: '',
   },
@@ -50,7 +49,6 @@ moveStorybookControlsToCategory(
     'closePopover',
     'disableFocusTrap',
     'display',
-    'hasDragDrop',
     'isOpen',
     'offset',
     'onPositionChange',

packages/eui/src/components/popover/popover.stories.tsx

@@ -41,7 +41,6 @@ const meta: Meta<EuiPopoverProps> = {
     // adding defaults for quicker/easier QA
     arrowChildren: '',
     attachToAnchor: false,
-    hasDragDrop: false,
     panelClassName: '',
     popoverScreenReaderText: '',
   },

packages/eui/src/components/popover/popover.tsx

@@ -174,13 +174,6 @@ export interface EuiPopoverProps extends PropsWithChildren, CommonProps {
    * @default true
    */
   repositionToCrossAxis?: boolean;
-  /**
-   * Must be set to true if using `EuiDragDropContext` within a popover,
-   * otherwise your nested drag & drop will have incorrect positioning
-   *
-   * @deprecated - use `usePortal` prop on children `EuiDraggable` components instead.
-   */
-  hasDragDrop?: boolean;
   /**
    * By default, popover content inherits the z-index of the anchor
    * component; pass `zIndex` to override
@@ -635,7 +628,6 @@ export class EuiPopover extends Component<Props, State> {
       arrowChildren,
       repositionOnScroll,
       repositionToCrossAxis,
-      hasDragDrop,
       zIndex,
       attachToAnchor,
       display,
@@ -730,7 +722,6 @@ export class EuiPopover extends Component<Props, State> {
               position={this.state.arrowPosition}
               isAttached={attachToAnchor}
               className={classNames(panelClassName, panelProps?.className)}
-              hasDragDrop={hasDragDrop}
               hasShadow={false}
               paddingSize={panelPaddingSize}
               tabIndex={tabIndex}

packages/eui/src/components/popover/popover_panel/__snapshots__/_popover_panel.test.tsx.snap

@@ -9,13 +9,6 @@ exports[`EuiPopoverPanel is rendered 1`] = `
 />
 `;
 
-exports[`EuiPopoverPanel props hasDragDrop is rendered 1`] = `
-<div
-  class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-light-hasDragDrop"
-  data-popover-panel="true"
-/>
-`;
-
 exports[`EuiPopoverPanel props isAttached is rendered 1`] = `
 <div
   class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel emotion-euiPanel-grow-m-m-plain-hasShadow-euiPopover__panel-light-isOpen-hasTransform"

packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts

@@ -12,7 +12,6 @@ import {
   euiShadowFlat,
   euiShadowMedium,
 } from '../../../themes/amsterdam/global_styling/mixins';
-import { getShadowColor } from '../../../themes/amsterdam/global_styling/functions';
 import { UseEuiTheme, tint } from '../../../services';
 import {
   euiCanAnimate,
@@ -30,7 +29,7 @@ export const openAnimationTiming = 'slow';
  */
 
 export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
+  const { euiTheme } = euiThemeContext;
 
   const translateDistance = euiTheme.size.s;
   const animationSpeed = euiTheme.animation[openAnimationTiming];
@@ -119,49 +118,5 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
         return this.bottom;
       },
     },
-
-    // Has an arrow, but cannot have transform or filter CSS - they create a
-    // stacking context that messes up the drag/drop fixed positioning
-    hasDragDrop: {
-      hasDragDrop: css`
-        ${euiShadowMedium(euiThemeContext, { property: 'box-shadow' })}
-
-        ${euiCanAnimate} {
-          transition: ${opacityTransition}; /* 2 */
-        }
-      `,
-      // The offset transforms must be recreated in margins
-      top: css`
-        margin-block-start: ${translateDistance};
-        /* Existing box-shadow of the popover is sufficient to see the arrow */
-      `,
-      bottom: css`
-        margin-block-start: -${translateDistance};
-
-        .euiPopover__arrow {
-          filter: drop-shadow(
-            0 -6px 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)}
-          );
-        }
-      `,
-      left: css`
-        margin-inline-start: ${translateDistance};
-
-        .euiPopover__arrow {
-          filter: drop-shadow(
-            6px 0 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)}
-          );
-        }
-      `,
-      right: css`
-        margin-inline-start: -${translateDistance};
-
-        .euiPopover__arrow {
-          filter: drop-shadow(
-            -6px 0 6px ${getShadowColor(euiTheme.colors.shadow, 0.12, colorMode)}
-          );
-        }
-      `,
-    },
   };
 };

packages/eui/src/components/popover/popover_panel/_popover_panel.test.tsx

@@ -36,12 +36,6 @@ describe('EuiPopoverPanel', () => {
       expect(container.firstChild).toMatchSnapshot();
     });
 
-    test('hasDragDrop is rendered', () => {
-      const { container } = render(<EuiPopoverPanel hasDragDrop />);
-
-      expect(container.firstChild).toMatchSnapshot();
-    });
-
     describe('position', () => {
       POSITIONS.forEach((position) => {
         test(`${position} is rendered`, () => {