Document cascade component implementation (elastic#226927)

## Summary

Culled from elastic#220119, Closes
elastic/kibana-team#1791

This PR extracts the generic data cascade component implementation into
a standalone PR, This component allows displaying a large set of grouped
data without loading the entire data set at once, only the starting
point for the data is required, then the rest of the data is loaded on
demand by the user, this component also employs virtualisations
techniques so that regardless of the number of data being browsed by the
user only the data the user is viewing is being rendered.

Furthermore as much as this component is in a way a skeleton, it is
opinionated about how data is fetched and because of this, the loading
state and the UI element rendered during these states are also
opinionated.

This component exposes parts that are composed into the data cascade
experience, like so;

```tsx
<DataCascade {...dataCascadeProps}>
  <DataCascadeRow {...dataCascadeRowProps}>
    <DataCascadeRowCell {...dataCascadeRowCellProps}>
      {({ data }) => {
        // your cell component
      }}
    </DataCascadeRowCell>
  </DataCascadeRow>
</DataCascade>
```


### Testing 

- Spin up the shared ux storybook like so; `yarn storybook shared_ux`,
then look for the data cascade component
- Alternatively, you could use this
[link](https://ci-artifacts.kibana.dev/storybooks/pr-226927/shared_ux/index.html?path=/docs/data-cascade-configuration-examples--docs)

### Visuals


https://github.com/user-attachments/assets/d04cd77d-46df-425e-a3f3-e85798e6f0eb


## Accessibility

- The defined spec for [tree grids
](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/) informed the
existing approach to ensure that the same visual experience presented to
users is translated to the accessibility tree generated. This work
doesn't purport to fulfil all the expectations of a standard treegrid
experience.

## Note for reviewer

This PR is the preliminary PR for the data cascade component, to help
land the cascade experience in discover, whilst there's a laundry list
of functionality that the cascade component should support, already
supports them for the most part, the goal of this PR is to land the
component in Kibana with the base case for the cascade experience
working.


## Note on new packages

The `@tanstack/react-virtual` & `@tanstack/table` packages have been
added to provide base functionality to manage virtualisation and data
structuring respectively in the cascade component, whilst there already
exist another package (react-window) that does virtualization in Kibana,
it doesn't quite provide the same flexibility that
`@tanstack/react-virtual` provides and has a much larger footprint, for
this reason it was selected, and for what it's worth there's an ongoing
exploration for deciding on the package we should default to for
virtualization in Kibana, [see
here](elastic#224197).

<!--

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [ ] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)
- [ ] ...

-->

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Ryan Keairns <contactryank@gmail.com>

Author: 3 people

.buildkite/scripts/steps/security/third_party_packages.txt

@@ -13,3 +13,6 @@ canvas-confetti
 @types/canvas-confetti
 undici
 liquidjs
+@tanstack/react-table
+@tanstack/react-virtual
+@storybook/addon-docs

.github/CODEOWNERS

@@ -663,6 +663,7 @@ src/platform/packages/shared/shared-ux/card/no_data/mocks @elastic/appex-sharedu
 src/platform/packages/shared/shared-ux/card/no_data/types @elastic/appex-sharedux
 src/platform/packages/shared/shared-ux/code_editor/impl @elastic/appex-sharedux
 src/platform/packages/shared/shared-ux/code_editor/mocks @elastic/appex-sharedux
+src/platform/packages/shared/shared-ux/document_data_cascade/impl @elastic/appex-sharedux
 src/platform/packages/shared/shared-ux/error_boundary @elastic/appex-sharedux
 src/platform/packages/shared/shared-ux/feedback_snippet @elastic/appex-sharedux
 src/platform/packages/shared/shared-ux/file/context @elastic/appex-sharedux

package.json

@@ -989,6 +989,7 @@
     "@kbn/shared-ux-button-toolbar": "link:src/platform/packages/shared/shared-ux/button_toolbar",
     "@kbn/shared-ux-card-no-data": "link:src/platform/packages/shared/shared-ux/card/no_data/impl",
     "@kbn/shared-ux-card-no-data-types": "link:src/platform/packages/shared/shared-ux/card/no_data/types",
+    "@kbn/shared-ux-document-data-cascade": "link:src/platform/packages/shared/shared-ux/document_data_cascade/impl",
     "@kbn/shared-ux-error-boundary": "link:src/platform/packages/shared/shared-ux/error_boundary",
     "@kbn/shared-ux-feedback-snippet": "link:src/platform/packages/shared/shared-ux/feedback_snippet",
     "@kbn/shared-ux-file-context": "link:src/platform/packages/shared/shared-ux/file/context",
@@ -1192,6 +1193,8 @@
     "@smithy/util-utf8": "^4.0.0",
     "@tanstack/react-query": "^4.29.12",
     "@tanstack/react-query-devtools": "^4.29.12",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.9",
     "@turf/along": "6.0.1",
     "@turf/area": "6.0.1",
     "@turf/bbox": "6.0.1",

renovate.json

@@ -723,6 +723,14 @@
       ],
       "enabled": true,
       "minimumReleaseAge": "14 days"
+    },{
+      "groupName": "virtualized",
+      "matchDepNames": ["@tanstack/react-table", "@tanstack/react-virtual"],
+      "reviewers": ["team:appex-sharedux"],
+      "matchBaseBranches": ["main"],
+      "labels": ["Team:SharedUX", "release_note:skip", "backport:all-open"],
+      "enabled": true,
+      "minimumReleaseAge": "14 days"
     },
     {
       "groupName": "@reduxjs/toolkit",

src/platform/packages/private/shared-ux/storybook/config/main.ts

@@ -14,6 +14,10 @@ module.exports = {
   stories: [
     '../../**/*.stories.+(tsx|mdx)',
     '../../../../shared/shared-ux/**/*.stories.+(tsx|mdx)',
+    '../../../../shared/shared-ux/**/guide.mdx',
     '../../../../../../core/packages/chrome/**/*.stories.+(tsx|mdx)',
   ],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 };

src/platform/packages/shared/shared-ux/document_data_cascade/impl/README.mdx

@@ -0,0 +1,26 @@
+##  @kbn/shared-ux-document-data-cascade
+
+This package provides a React component and associated state management for displaying and interacting 
+with hierarchical data in a tabular format. It is designed to be flexible and customizable, 
+allowing developers to tailor the component to their specific needs.
+
+## Usage
+
+Here's a basic example of how to use the `DataCascade` component:
+
+```tsx
+import { DataCascade, DataCascadeRow, DataCascadeRowCell } from '@kbn/shared-ux-document-data-cascade';
+
+<DataCascade {...dataCascadeProps}>
+  <DataCascadeRow {...dataCascadeRowProps}>
+    <DataCascadeRowCell {...dataCascadeRowCellProps}>
+      {({ data }) => {
+        // your cell component
+      }}
+    </DataCascadeRowCell>
+  </DataCascadeRow>
+</DataCascade>
+```
+
+For more detailed usage instructions and examples, please refer to the storybook implementation.
+

src/platform/packages/shared/shared-ux/document_data_cascade/impl/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { DataCascade, DataCascadeRow, DataCascadeRowCell } from './src/components';
+export type {
+  GroupNode,
+  LeafNode,
+  DataCascadeProps,
+  DataCascadeRowProps,
+  DataCascadeRowCellProps,
+  CascadeRowCellNestedVirtualizationAnchorProps,
+} from './src/components';
+export * from './src/lib';
+export { NumberBadge } from './src/components/helpers';

src/platform/packages/shared/shared-ux/document_data_cascade/impl/jest.config.js

@@ -0,0 +1,14 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../../../../..',
+  roots: ['<rootDir>/src/platform/packages/shared/shared-ux/document_data_cascade/impl'],
+};

src/platform/packages/shared/shared-ux/document_data_cascade/impl/kibana.jsonc

@@ -0,0 +1,9 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/shared-ux-document-data-cascade",
+  "owner": [
+    "@elastic/appex-sharedux"
+  ],
+  "group": "platform",
+  "visibility": "shared"
+}

src/platform/packages/shared/shared-ux/document_data_cascade/impl/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@kbn/shared-ux-document-data-cascade",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
+  "sideEffects": false
+}