add focus after search

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

add provider to report

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

packages/core-components/api-report.md

@@ -571,6 +571,11 @@ enum LabelPosition {
   RIGHT = 'r',
 }
 
+// Warning: (ae-missing-release-tag) "LayoutProvider" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export function LayoutProvider(props: PropsWithChildren<{}>): JSX.Element;
+
 // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "Lifecycle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -1237,24 +1242,6 @@ export function SidebarPage(props: SidebarPageProps): JSX.Element;
 // @public (undocumented)
 export type SidebarPageClassKey = 'root';
 
-// @public
-export type SidebarPageProps = {
-  children?: React_2.ReactNode;
-};
-
-// @public
-// Warning: (ae-missing-release-tag) "SidebarPageContent" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export function SidebarPageContent(props: PropsWithChildren<{}>): JSX.Element;
-
-// Warning: (ae-missing-release-tag) "SidebarPageContextType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export type SidebarPageContextType = {
-  contentRef?: React_2.MutableRefObject<HTMLDivElement | null>;
-};
-
 // Warning: (ae-missing-release-tag) "SidebarPinStateContext" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
@@ -2419,12 +2406,13 @@ export function TrendLine(
     },
 ): JSX.Element | null;
 
-// Warning: (ae-missing-release-tag) "useContentRef" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+// Warning: (ae-missing-release-tag) "useLayoutContent" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export function useContentRef():
-  | React_2.MutableRefObject<HTMLDivElement | null>
-  | undefined;
+export function useLayoutContent(): {
+  focusContent: () => void;
+  contentRef: React_2.MutableRefObject<HTMLDivElement | null> | undefined;
+};
 
 // Warning: (ae-forgotten-export) The symbol "SetQueryParams" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "useQueryParamState" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)

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

@@ -144,7 +144,6 @@ const DesktopSidebar = (props: SidebarProps) => {
     if (isPinned || disableExpandOnHover) {
       return;
     }
-    focusContent();
     if (hoverTimerRef.current) {
       clearTimeout(hoverTimerRef.current);
       hoverTimerRef.current = undefined;

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

@@ -22,7 +22,6 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-
 import { sidebarConfig } from './config';
 import { BackstageTheme } from '@backstage/theme';
 import { LocalStorage } from './localStorage';

packages/core-components/src/layout/Sidebar/SidebarPage.stories.tsx

@@ -1,72 +0,0 @@
-/*
- * Copyright 2020 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
-import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined';
-import React, { useCallback } from 'react';
-import { MemoryRouter } from 'react-router-dom';
-import {
-  Sidebar,
-  SidebarDivider,
-  SidebarIntro,
-  SidebarItem,
-  SidebarSearchField,
-  SidebarSpace,
-  SidebarPage,
-} from '.';
-import { useLayoutContent } from '../LayoutProvider';
-import { PluginWithTable } from '../Page/Page.stories';
-
-export default {
-  title: 'Layout/SidebarPage',
-  component: SidebarPage,
-  decorators: [
-    (storyFn: () => JSX.Element) => (
-      <MemoryRouter initialEntries={['/']}>{storyFn()}</MemoryRouter>
-    ),
-  ],
-};
-
-export const SampleSidebarPage = () => {
-  return (
-    <SidebarPage>
-      <CustomSidebar />
-      <PluginWithTable />
-    </SidebarPage>
-  );
-};
-
-function CustomSidebar() {
-  const { focusContent } = useLayoutContent();
-  const handleSearch = (input: string) => {
-    focusContent();
-    // eslint-disable-next-line no-console
-    console.log(input);
-  };
-
-  return (
-    <Sidebar>
-      <SidebarSearchField onSearch={handleSearch} to="/search" />
-      <SidebarDivider />
-      <SidebarItem icon={HomeOutlinedIcon} to="#" text="Home" />
-      <SidebarItem icon={HomeOutlinedIcon} to="#" text="Plugins" />
-      <SidebarItem icon={AddCircleOutlineIcon} to="#" text="Create..." />
-      <SidebarDivider />
-      <SidebarIntro />
-      <SidebarSpace />
-    </Sidebar>
-  );
-}

packages/core-components/src/layout/Sidebar/index.ts

@@ -26,7 +26,6 @@ export type {
   SidebarSubmenuItemProps,
   SidebarSubmenuItemDropdownItem,
 } from './SidebarSubmenuItem';
-
 export type { SidebarClassKey, SidebarProps } from './Bar';
 export {
   SidebarPage,