[EuiDataGrid] Add setIsFullScreen to ref API (#5531)

* Expose `setIsFullScreen` to ref API

* Update documentation/examples

src-docs/src/views/datagrid/datagrid_ref_example.js

@@ -14,6 +14,9 @@ const dataGridRefSource = require('!!raw-loader!./ref');
 const dataGridRefSnippet = `const dataGridRef = useRef();
 <EuiDataGrid ref={dataGridRef} {...props} />
 
+// Mnaually toggle the data grid's full screen state
+dataGridRef.current.setIsFullScreen(true);
+
 // Mnaually focus a specific cell within the data grid
 dataGridRef.current.setFocusedCell({ rowIndex, colIndex });
 `;
@@ -37,6 +40,13 @@ export const DataGridRefExample = {
             the <EuiCode>ref</EuiCode> prop of EuiDataGrid. These methods are:
           </p>
           <ul>
+            <li>
+              <p>
+                <EuiCode>setIsFullScreen(isFullScreen)</EuiCode> - controls the
+                full screen state of the data grid. Accepts a true/false boolean
+                flag.
+              </p>
+            </li>
             <li>
               <EuiCode>setFocusedCell({'{ rowIndex, colIndex }'})</EuiCode> -
               focuses the specified cell in the grid.

src-docs/src/views/datagrid/ref.js

@@ -148,6 +148,14 @@ export default () => {
             Set cell focus
           </EuiButton>
         </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiButton
+            size="s"
+            onClick={() => dataGridRef.current.setIsFullScreen(true)}
+          >
+            Set grid to full screen
+          </EuiButton>
+        </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer />
 

src/components/datagrid/data_grid.test.tsx

@@ -2744,6 +2744,7 @@ describe('EuiDataGrid', () => {
     );
 
     expect(gridRef.current).toEqual({
+      setIsFullScreen: expect.any(Function),
       setFocusedCell: expect.any(Function),
     });
   });

src/components/datagrid/data_grid.tsx

@@ -290,6 +290,7 @@ export const EuiDataGrid = forwardRef<EuiDataGridRefProps, EuiDataGridProps>(
     useImperativeHandle(
       ref,
       () => ({
+        setIsFullScreen,
         setFocusedCell: ({ rowIndex, colIndex }) => {
           focusContext.setFocusedCell([colIndex, rowIndex]);
         },

src/components/datagrid/data_grid_types.ts

@@ -284,6 +284,10 @@ export type EuiDataGridProps = OneOf<
 >;
 
 export interface EuiDataGridRefProps {
+  /**
+   * Allows manually controlling the full-screen state of the grid.
+   */
+  setIsFullScreen: (isFullScreen: boolean) => void;
   /**
    * Allows manually focusing the specified cell in the grid.
    *