[EuiDataGrid] Replace popoverContents API with renderCellPopover

[cee-chen]

Summary

closes #5310

This PR deprecates the old popoverContents API:

popoverContents={{
  numeric: ({ children, cellContentsElement }) => {
    const stringContents = cellContentsElement.textContent;
    // extract the groups-of-three digits that are right-aligned
    return stringContents.replace(/((\\d{3})+)$/, match =>
      // then replace each group of xyz digits with ,xyz
      match.replace(/(\\d{3})/g, ',$1')
    );
  },
}}

With a new (optional) renderCellPopover API, that overrides our default popover rendering and allows users to completely customize cell popovers:

// 1:1 conversion of above API example
renderCellPopover={({ children, cellContentsElement }) => {
  const stringContents = cellContentsElement.textContent;
  return stringContents.replace(/((\\d{3})+)$/, match =>
    match.replace(/(\\d{3})/g, ',$1')
  );
}}

// Example that replicates our default popover
renderCellPopover={({ children, cellActions }) => (
  <>
    <EuiText>{children}</EuiText>
    {cellActions}
  </>
)}

// Example that removes the EuiText wrapper, but keeps the default cell actions
renderCellPopover={({ children, cellActions }) => (
  <>
    <div className="custom">{children}</div>
    {cellActions}
  </>
)}

// Example that sets completely custom popover content
renderCellPopover={() => (
  <>
    <EuiPopoverTitle>Hello world</EuiPopoverTitle>
    <p>Lorem ipsum dolor sit amet</p>
    <EuiPopoverFooter>
      <EuiButtonEmpty size="xs">Custom action</EuiButtonEmpty>
    </EuiPopoverFooter>
  </>
)}

// Example that conditionally renders certain popovers as custom, but others as default popovers
renderCellPopover={(props) => {
  const { schema, DefaultCellPopover } = props;

  if (schema === 'custom') {
    return <MyCustomPopover {...props} />;
  } else {
    return <DefaultCellPopover {...props} />;
  }
}}

Notes

• In a normal EuiDataGrid without a renderCellPopover prop, nothing should have regressed or changed from previous popover rendering/behavior.
• ⚠️ I strongly recommend following along by commit.
  • Most of the added lines are documentation and Cypress tests.
  • The popover logic itself is not all that different before line-diff-wise, it's just a slightly different architecture.

Screencap

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and playground toggles
• Added documentation
  - [ ] Checked Code Sandbox works for any docs examples
• Added or updated jest and cypress tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

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

[chandlerprall]

Left a couple thoughts, but I don't see any functional issues. This turned out really clean and straight-forward to use

[kibanamachine]

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

[chandlerprall]

Changes LGTM; pulled & tested locally and clicked around in the pr preview docs quite a bit too

[cee-chen]

Woohoo!!!