removal tabpanel from tabs

Author: codemist

src/app/components/client/TabList.tsx

@@ -3,12 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { Key, ReactNode, useRef } from "react";
-import {
-  AriaTabListOptions,
-  useTab,
-  useTabList,
-  useTabPanel,
-} from "react-aria";
+import { AriaTabListOptions, useTab, useTabList } from "react-aria";
 import { Item, useTabListState } from "react-stately";
 import styles from "./TabList.module.scss";
 import { TabListState, TabListStateOptions } from "@react-stately/tabs";
@@ -64,19 +59,6 @@ function Tabs(props: TabsProps) {
           <Tab key={item.key} item={item} state={state} />
         ))}
       </div>
-      <TabPanel key={selectedItem?.key} state={state} />
-    </div>
-  );
-}
-
-function TabPanel({ state, ...props }: { state: TabListState<object> }) {
-  const ref = useRef(null);
-  const { tabPanelProps } = useTabPanel(props, state, ref);
-  const { selectedItem } = state;
-
-  return (
-    <div {...tabPanelProps} ref={ref} className={styles.tabPanel}>
-      {selectedItem?.props.children}
     </div>
   );
 }

src/app/components/client/toolbar/AppPicker.module.scss

@@ -116,17 +116,14 @@
       }
     }
 
-    &.isFocused {
-      outline: none;
-      cursor: pointer;
-
-      .menuLink {
-        color: tokens.$color-violet-90;
+    //  &:focus-visible {
+    //   outline-offset: calc(-1 * tokens.$border-focus-width);
+    //   outline: tokens.$border-focus-width solid tokens.$color-purple-10;
+    // }
 
-        img {
-          background-color: tokens.$color-violet-10;
-        }
-      }
+    &:hover {
+      outline: none;
+      background-color: tokens.$color-purple-05;
     }
   }
 }

src/app/components/client/toolbar/AppPicker.tsx

@@ -20,6 +20,7 @@ import {
   useMenuItem,
   AriaMenuProps,
   AriaMenuTriggerProps,
+  useFocusRing,
 } from "react-aria";
 import { useRef } from "react";
 import Image from "next/image";
@@ -222,9 +223,7 @@ type AppPickerMenuProps<T> = AriaMenuProps<T>;
 /* c8 ignore start */
 const AppPickerMenu = <T extends object>(props: AppPickerMenuProps<T>) => {
   const l10n = useL10n();
-
   const menuState = useTreeState({ ...props });
-
   const menuRef = useRef<HTMLDivElement>(null);
   const menuProps = useMenu(props, menuState, menuRef).menuProps;
 
@@ -234,7 +233,12 @@ const AppPickerMenu = <T extends object>(props: AppPickerMenuProps<T>) => {
         <Image src={FirefoxLogo} alt="" width={32} height={32} />
         <h2>{l10n.getString("fx-makes-tech")}</h2>
       </div>
-      <div {...menuProps} ref={menuRef} className={styles.menuWrapper}>
+      <div
+        {...menuProps}
+        ref={menuRef}
+        tabIndex={-1}
+        className={styles.menuWrapper}
+      >
         {Array.from(menuState.collection).map((item) => (
           <AppPickerItem key={item.key} item={item} state={menuState} />
         ))}
@@ -257,8 +261,9 @@ const AppPickerItem = <T extends object>(props: AppPickerItemProps<T>) => {
   const anchorRef = useRef<HTMLAnchorElement>(null);
   const divRef = useRef<HTMLDivElement>(null);
   const ref = isLink ? anchorRef : divRef;
+  const { focusProps } = useFocusRing();
 
-  const { menuItemProps, isFocused } = useMenuItem(
+  const { menuItemProps } = useMenuItem(
     {
       key: props.item.key,
     },
@@ -267,8 +272,8 @@ const AppPickerItem = <T extends object>(props: AppPickerItemProps<T>) => {
   );
 
   const commonProps = {
-    ...menuItemProps,
-    className: `${styles.menuItemWrapper} ${isFocused ? styles.isFocused : ""}`,
+    ...mergeProps(menuItemProps, focusProps),
+    className: styles.menuItemWrapper,
   };
 
   if (isLink) {