docs(ObjectPage): add DomRefTable

.storybook/components/DomRefTable.tsx

@@ -1,14 +1,14 @@
 import { DocsContext, Heading } from '@storybook/blocks';
-import { Tag, Link, MessageStrip, Popover } from '@ui5/webcomponents-react';
 import TagDesign from '@ui5/webcomponents/dist/types/TagDesign.js';
+import { Tag, Link, MessageStrip, Popover } from '@ui5/webcomponents-react';
 import type * as CEM from '@ui5/webcomponents-tools/lib/cem/types';
 import type { ReactNode } from 'react';
 import { Fragment, useContext, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useGetCem } from '../utils';
 import classes from './DomRefTable.module.css';
 
-function CodeBlock(props: { children: ReactNode }) {
+export function CodeBlock(props: { children: ReactNode }) {
   return (
     <pre className={classes.domRefCodeBlock}>
       <code className={classes.domRefCode}>{props.children}</code>
@@ -57,7 +57,7 @@ export function DomRefTable() {
   const knownAttributes = new Set(Object.keys(docsContext.primaryStory?.argTypes ?? {}));
   const cem = useGetCem();
 
-  let moduleName = cemModuleName ? cemModuleName.split(':')[1] : componentName;
+  const moduleName = cemModuleName ? cemModuleName.split(':')[1] : componentName;
 
   const componentMembers =
     cem?.modules
@@ -119,7 +119,7 @@ export function DomRefTable() {
                       )}
                     </td>
                     <td>
-                      {!!row.parameters ? (
+                      {row.parameters ? (
                         row.parameters.map((parameter) => {
                           return (
                             <div key={parameter.name} className={classes.parameters}>

packages/main/src/components/ObjectPage/ObjectPage.mdx

@@ -6,6 +6,7 @@ import { ObjectPageTitle } from '../ObjectPageTitle';
 import { ObjectPageHeader } from '../ObjectPageHeader';
 import { ObjectPageSection } from '../ObjectPageSection';
 import { ObjectPageSubSection } from '../ObjectPageSubSection';
+import { CodeBlock } from '@sb/components/DomRefTable';
 
 <Meta of={ComponentStories} />
 
@@ -19,6 +20,47 @@ import { ObjectPageSubSection } from '../ObjectPageSubSection';
 
 <ControlsWithNote of={ComponentStories.Default} />
 
+## Methods
+
+This component exposes public methods. You can use them directly on the instance of the component, e.g. by using React Refs.
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Parameters</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <CodeBlock>
+          <span style={{ color: 'rgb(64, 120, 242)' }}>toggleHeaderArea</span>
+          <span style={{ color: 'rgb(56, 58, 66)' }}>(</span>
+          <span style={{ color: 'rgb(56, 58, 66)' }}>snapped</span>
+          <span style={{ color: 'rgb(64, 120, 242)' }}>?</span>
+          <span style={{ color: 'rgb(64, 120, 242)' }}>: </span>
+          <span style={{ color: 'rgb(80, 161, 79)' }}>boolean</span>
+          <span style={{ color: 'rgb(56, 58, 66)' }}>)</span>
+          <span style={{ color: 'rgb(64, 120, 242)' }}>: </span>
+          <span style={{ color: 'rgb(80, 161, 79)' }}>void</span>
+        </CodeBlock>
+      </td>
+      <td>
+        <div>
+          <p style={{ fontWeight: 'bold' }}>snapped</p>
+          <p style={{ paddingInline: '1rem' }}>
+            Defines if the header should be snapped or expanded. <br /> If the argument is not provided, the header is
+            toggled.
+          </p>
+        </div>
+      </td>
+      <td>Toggles the `headerArea` of the `ObjectPage`.</td>
+    </tr>
+  </tbody>
+</table>
+
 # More Examples
 
 ## ObjectPage with IllustratedMessage (`UnableToLoad`) placeholder