add documentation and changeset

Signed-off-by: Juan Pablo Garcia Ripa <sarabadu@gmail.com>

.changeset/eight-insects-tan.md

@@ -2,4 +2,5 @@
 '@backstage/core-components': patch
 ---
 
-Add `useContent` hook to have a reference to the current main content element
+- Add `useContent` hook to have a reference to the current main content element
+- Sets the main content reference on `Content` component

.changeset/eleven-sloths-shake.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-search': patch
+---
+
+Removes the focus from the sidebar and focus the main content after select one search result or navigate to the search result list

packages/core-components/src/layout/Sidebar/Page.tsx

@@ -147,6 +147,25 @@ export function SidebarPage(props: SidebarPageProps) {
   );
 }
 
+/**
+ * This hook provides a react ref to the main content.
+ * Allows to set an element as the main content and focus on that component.
+ *
+ * *Note: If `contentRef` is not set `focusContent` is noop. `Content` component sets this ref automaticaly*
+ *
+ * @public
+ * @example
+ *  const { focusContent} = useContent();
+ * ...
+ *  <Button onClick={focusContent}>
+ *     focus main content
+ *  </Button>
+ *
+ * @example
+ *  const { contentRef } = useContent();
+ * ...
+ *  <article ref={contentRef} tabIndex={-1}>Main Content</article>
+ */
 export function useContent() {
   const { content } = useContext(PageContext);