[EuiDataGrid] Add new setCellPopoverProps API to renderCellPopover

[cee-chen]

Summary

The Discover team requested an API in elastic/kibana#152480 to allow setting props on the cell popover. This prop will enable them to, e.g. set custom resize CSS on the cell popover panel, making their cell popovers resizable, and additionally set custom min/max height/widths.

The new setCellPopoverProps API behaves exactly the same as setCellProps does for the cell, and allows customizing (almost) any prop that EuiPopover takes, except for the button and closePopover props.

Example usage:

<EuiDataGrid
  renderCellPopover={({ setCellPopoverProps, DefaultCellPopover, ...props }) => {
    // Set a custom className on each cell popover panel
    useEffect(() => {
      setCellPopoverProps({ panelClassName: 'customCellPopover' });
    }, [setCellPopoverProps]);

    // Render popover as-is
    return <DefaultCellPopover {...props} />
  }}
/>

I strongly recommend following along by commit for code review.

QA

• Go to https://eui.elastic.co/pr_6632/#/tabular-content/data-grid-cells-popovers#completely-customizing-cell-popover-rendering
• Open any cell popover in the demo
• Inspect the cell popover panel when open and confirm it has the customCellPopover class

General checklist

• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs (using @default if default values are missing) and playground toggles
• Added documentation
• Added or updated jest and cypress tests
• A changelog entry exists and is marked appropriately

- [ ] Checked in both light and dark modes
- [ ] Checked in mobile
- [ ] Checked Code Sandbox works for any docs examples
- [ ] Checked for breaking changes and labeled appropriately
- [ ] Checked for accessibility including keyboard-only and screenreader modes
- [ ] Updated the Figma library counterpart

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_6632/

[cee-chen]

@kertal or @jughosta, any chance either of you would be willing to take a quick look at the API/example usage/docs and let me know if it'll work for you? Thanks!

[jughosta]

Awesome! Thanks a lot for allowing customization for the cell popover!

[jughosta]

Would it be also possible to add an Eui class to this div? The name does not need to be customizable, just something more reliable if it makes sense. We will need to change its height to 100% for Discover use case.

[cee-chen]

Unfortunately that <div> comes from EuiPopover itself (you can see it if you go to the popover prod docs) and we'd need to add a new API to EuiPopover to allow customizing it. For now, can you target .customCellPopover > div directly instead via CSS if possible?

Editing to add - I'll go ahead and merge this PR as is (as I don't want to conflate EuiPopover functionality with EuiDataGrid), but please feel free to open a feature request/issue in EUI for this functionality in the interim!

[jughosta]

.customCellPopover > div can also work for us, all good! Thanks!