Merge branch 'main' into storybook/7481-stories-p

.buildkite/scripts/lifecycle/pre_command.sh

@@ -17,7 +17,7 @@ export GCE_ACCOUNT
 GITHUB_TOKEN=$(retry 5 vault read -field=github_token $GITHUB_ACCOUNT)
 export GITHUB_TOKEN
 
-DOCKER_BASE_IMAGE=docker.elastic.co/eui/ci:6.3
+DOCKER_BASE_IMAGE=docker.elastic.co/eui/ci:6.4
 export DOCKER_BASE_IMAGE
 
 GCE_IMAGE=google/cloud-sdk:slim

.nvmrc

@@ -1 +1 @@
-20.11.1
+20.12.1

changelogs/CHANGELOG_2024.md

@@ -1,3 +1,8 @@
+## [`v94.1.0`](https://github.com/elastic/eui/releases/v94.1.0)
+
+- Updated `EuiTableHeaderCell` to show a subdued `sortable` icon for columns that are not currently sorted but can be ([#7656](https://github.com/elastic/eui/pull/7656))
+- Updated `EuiBasicTable` and `EuiInMemoryTable`'s `columns[].actions[]`'s to pass back click events to `onClick` callbacks as the second callback ([#7667](https://github.com/elastic/eui/pull/7667))
+
 ## [`v94.0.0`](https://github.com/elastic/eui/releases/v94.0.0)
 
 - Updated `EuiTable`, `EuiBasicTable`, and `EuiInMemoryTable` with a new `responsiveBreakpoint` prop, which allows customizing the point at which the table collapses into a mobile-friendly view with cards ([#7625](https://github.com/elastic/eui/pull/7625))

changelogs/upcoming/7599.md

@@ -0,0 +1,3 @@
+**Dependency updates**
+
+- Updated `@hello-pangea/dnd` to v16.6.0

changelogs/upcoming/7666.md

@@ -0,0 +1,6 @@
+**Bug fixes**
+
+- Fixed `EuiFieldNumber`'s typing to accept an icon configuration shape
+- Fixed `EuiFieldText` and `EuiFieldNumber` to render the correct paddings for icon shapes set to `side: 'right'`
+- Fixed `EuiFieldText` and `EuiFieldNumber` to fully ignore `icon`/`prepend`/`append` when `controlOnly` is set to true
+- Fixed `EuiColorPicker`'s input not setting the correct right padding for the number of icons displayed

i18ntokens.json

@@ -167,14 +167,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 115,
+        "line": 110,
         "column": 4,
-        "index": 3600
+        "index": 3586
       },
       "end": {
-        "line": 124,
+        "line": 119,
         "column": 5,
-        "index": 3867
+        "index": 3853
       }
     },
     "filepath": "src/components/basic_table/collapsed_item_actions.tsx"
@@ -185,14 +185,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 115,
+        "line": 110,
         "column": 4,
-        "index": 3600
+        "index": 3586
       },
       "end": {
-        "line": 124,
+        "line": 119,
         "column": 5,
-        "index": 3867
+        "index": 3853
       }
     },
     "filepath": "src/components/basic_table/collapsed_item_actions.tsx"
@@ -203,14 +203,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 141,
+        "line": 136,
         "column": 4,
-        "index": 4427
+        "index": 4413
       },
       "end": {
-        "line": 141,
+        "line": 136,
         "column": 78,
-        "index": 4501
+        "index": 4487
       }
     },
     "filepath": "src/components/basic_table/collapsed_item_actions.tsx"
@@ -6595,12 +6595,12 @@
       "start": {
         "line": 77,
         "column": 10,
-        "index": 2366
+        "index": 2359
       },
       "end": {
         "line": 81,
         "column": 11,
-        "index": 2540
+        "index": 2533
       }
     },
     "filepath": "src/components/table/table_header_cell.tsx"

package.json

@@ -1,12 +1,12 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "94.0.0",
+  "version": "94.1.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
   "types": "eui.d.ts",
-  "docker_image": "20.11.1",
+  "docker_image": "20.12.1",
   "engines": {
     "node": "16.x || 18.x || >=20.x"
   },
@@ -58,7 +58,7 @@
     "test-staged"
   ],
   "dependencies": {
-    "@hello-pangea/dnd": "^16.3.0",
+    "@hello-pangea/dnd": "^16.6.0",
     "@types/lodash": "^4.14.202",
     "@types/numeral": "^2.0.5",
     "@types/react-window": "^1.8.8",

scripts/docker-ci/Dockerfile

@@ -2,7 +2,7 @@
 # https://github.com/zenato/docker-puppeteer/blob/master/Dockerfile
 
 # >=12.0 required (for cypress). v18 is LTS.
-FROM --platform=linux/amd64 node:20.11.1-slim
+FROM --platform=linux/amd64 node:20.12.1-slim
 
 SHELL ["/bin/bash", "-o", "pipefail", "-c"]
 

scripts/docker-ci/README.md

@@ -5,9 +5,6 @@ Built containers can be published to the [Elastic Docker Registry](https://conta
 
 ## Getting started
 
-### `test-docker` script
-The [`test-docker`](../test-docker.js) script is the primary user of this container. Specifically, the [`a11y-testing`](../a11y-testing.js) script therein uses the headless Chromium environment to run EUI's automated axe accessibility testing suite.
-
 ### Generic node application
 Run the container by passing `node -e "<yourscript.js content as a string>"` as the command:
 
@@ -37,10 +34,6 @@ docker build [--no-cache] [--tag ci:x.x] .
 > :warning: If you receive a `Cannot connect to Docker daemon` error, you can use [Docker Desktop](https://docs.docker.com/desktop/#download-and-install) (without signing in). Simply starting the app will create the Docker engine/daemon needed.
 
 
-### Test a new image locally
-
-To run the [`test-docker`](../test-docker.js) script with the new image locally, you'll need to replace the image name line in the `docker run ...` command (`docker.elastic.co/eui/ci:x.x`) with the new image ID or tag name (if set during the build with `--tag`).
-
 ### Publish a built image
 
 Authentication and membership of the `eui-team` team on GitHub is required:
@@ -76,5 +69,3 @@ docker pull docker.elastic.co/eui/ci:x.x
 
 docker run [...]
 ```
-
-See the [`test-docker`](../test-docker.js) script as an example.

src-docs/src/components/guide_page/versions.json

@@ -1,5 +1,6 @@
 {
   "euiVersions": [
+    "94.1.0",
     "94.0.0",
     "93.6.0",
     "93.5.2",

src/components/basic_table/__snapshots__/basic_table.test.tsx.snap

@@ -161,7 +161,6 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
           </div>
         </th>
         <th
-          aria-live="polite"
           aria-sort="ascending"
           class="euiTableHeaderCell emotion-euiTableHeaderCell"
           data-test-subj="tableHeaderCell_name_0"

src/components/basic_table/action_types.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode, MouseEvent } from 'react';
 import { EuiIconType } from '../icon/icon';
 import { EuiButtonIconProps } from '../button/button_icon/button_icon';
 import { EuiButtonEmptyProps } from '../button/button_empty';
@@ -26,9 +26,11 @@ export interface DefaultItemActionBase<T extends object> {
    */
   description: string | ((item: T) => string);
   /**
-   * A handler function to execute the action
+   * A handler function to execute the action. Passes back the current row
+   * item as the first argument, and the originating React click event
+   * as a second argument.
    */
-  onClick?: (item: T) => void;
+  onClick?: (item: T, event: MouseEvent) => void;
   href?: string | ((item: T) => string);
   target?: string;
   /**

src/components/basic_table/collapsed_item_actions.test.tsx

@@ -84,6 +84,48 @@ describe('CollapsedItemActions', () => {
     await waitForEuiPopoverClose();
   });
 
+  test('default actions - passes back the original click event as well as the row item to onClick', async () => {
+    const onClick = jest.fn();
+    const onClickStopPropagation = jest.fn((item, event) => {
+      event.stopPropagation();
+    });
+
+    const props = {
+      actions: [
+        {
+          name: '1',
+          description: '',
+          onClick,
+          'data-test-subj': 'onClick',
+        },
+        {
+          name: '2',
+          description: '',
+          onClick: onClickStopPropagation,
+          'data-test-subj': 'onClickStopPropagation',
+        },
+      ],
+      itemId: 'id',
+      item: { id: 'xyz' },
+      actionsDisabled: false,
+    };
+
+    const { getByTestSubject } = render(<CollapsedItemActions {...props} />);
+    fireEvent.click(getByTestSubject('euiCollapsedItemActionsButton'));
+    await waitForEuiPopoverOpen();
+
+    fireEvent.click(getByTestSubject('onClickStopPropagation'));
+    expect(onClickStopPropagation).toHaveBeenCalledWith(
+      props.item,
+      expect.objectContaining({ stopPropagation: expect.any(Function) })
+    );
+    // Popover should still be open if propagation was stopped
+    await waitForEuiPopoverOpen();
+
+    fireEvent.click(getByTestSubject('onClick'));
+    await waitForEuiPopoverClose();
+  });
+
   test('custom actions', async () => {
     const props = {
       actions: [

src/components/basic_table/collapsed_item_actions.tsx

@@ -14,7 +14,6 @@ import React, {
   ReactElement,
 } from 'react';
 
-import { isString } from '../../services/predicate';
 import { EuiContextMenuItem, EuiContextMenuPanel } from '../context_menu';
 import { EuiPopover } from '../popover';
 import { EuiButtonIcon } from '../button';
@@ -45,11 +44,7 @@ export const CollapsedItemActions = <T extends {}>({
   className,
 }: CollapsedItemActionsProps<T>) => {
   const [popoverOpen, setPopoverOpen] = useState(false);
-
-  const onClickItem = useCallback((onClickAction?: () => void) => {
-    setPopoverOpen(false);
-    onClickAction?.();
-  }, []);
+  const closePopover = useCallback(() => setPopoverOpen(false), []);
 
   const controls = useMemo(() => {
     return actions.reduce<ReactElement[]>((controls, action, index) => {
@@ -69,16 +64,13 @@ export const CollapsedItemActions = <T extends {}>({
             key={index}
             className="euiBasicTable__collapsedCustomAction"
           >
-            <span onClick={() => onClickItem()}>{actionControl}</span>
+            <span onClick={closePopover}>{actionControl}</span>
           </EuiContextMenuItem>
         );
       } else {
-        const buttonIcon = action.icon;
-        let icon;
-        if (buttonIcon) {
-          icon = isString(buttonIcon) ? buttonIcon : buttonIcon(item);
-        }
-
+        const icon = action.icon
+          ? callWithItemIfFunction(item)(action.icon)
+          : undefined;
         const buttonContent = callWithItemIfFunction(item)(action.name);
         const toolTipContent = callWithItemIfFunction(item)(action.description);
         const href = callWithItemIfFunction(item)(action.href);
@@ -97,9 +89,12 @@ export const CollapsedItemActions = <T extends {}>({
             target={target}
             icon={icon}
             data-test-subj={dataTestSubj}
-            onClick={() =>
-              onClickItem(onClick ? () => onClick(item) : undefined)
-            }
+            onClick={(event) => {
+              event.persist();
+              onClick?.(item, event);
+              // Allow consumer events to prevent the popover from closing if necessary
+              if (!event.isPropagationStopped()) closePopover();
+            }}
             toolTipContent={toolTipContent}
             toolTipProps={{ delay: 'long' }}
           >
@@ -109,7 +104,7 @@ export const CollapsedItemActions = <T extends {}>({
       }
       return controls;
     }, []);
-  }, [actions, actionsDisabled, item, onClickItem]);
+  }, [actions, actionsDisabled, item, closePopover]);
 
   const popoverButton = (
     <EuiI18n
@@ -153,7 +148,7 @@ export const CollapsedItemActions = <T extends {}>({
       id={`${itemId}-actions`}
       isOpen={popoverOpen}
       button={withTooltip || popoverButton}
-      closePopover={() => setPopoverOpen(false)}
+      closePopover={closePopover}
       panelPaddingSize="none"
       anchorPosition="leftCenter"
     >

src/components/basic_table/default_item_action.test.tsx

@@ -122,4 +122,30 @@ describe('DefaultItemAction', () => {
     await waitForEuiToolTipVisible();
     expect(getByText('goodbye tooltip')).toBeInTheDocument();
   });
+
+  it('passes back the original click event as well as the row item to onClick', () => {
+    const onClick = jest.fn((item, event) => {
+      event.preventDefault();
+    });
+
+    const action: EmptyButtonAction<Item> = {
+      name: 'onClick',
+      description: 'test',
+      onClick,
+      'data-test-subj': 'onClick',
+    };
+    const props = {
+      action,
+      enabled: true,
+      item: { id: 'xyz' },
+    };
+
+    const { getByTestSubject } = render(<DefaultItemAction {...props} />);
+
+    fireEvent.click(getByTestSubject('onClick'));
+    expect(onClick).toHaveBeenCalledWith(
+      props.item,
+      expect.objectContaining({ preventDefault: expect.any(Function) })
+    );
+  });
 });