Remove FocusArea component and associated components (#12789)

- Remove `FocusArea` component and various providers related to it

# Important Notes
None

Author: somebody1234

app/gui/src/dashboard/App.tsx

@@ -51,7 +51,6 @@ import InputBindingsProvider from '#/providers/InputBindingsProvider'
 import LocalStorageProvider, * as localStorageProvider from '#/providers/LocalStorageProvider'
 import { useLogger } from '#/providers/LoggerProvider'
 import ModalProvider, * as modalProvider from '#/providers/ModalProvider'
-import * as navigator2DProvider from '#/providers/Navigator2DProvider'
 import * as sessionProvider from '#/providers/SessionProvider'
 import * as textProvider from '#/providers/TextProvider'
 
@@ -230,8 +229,6 @@ function AppRouter(props: React.PropsWithChildren<AppRouterProps>) {
   const { localStorage } = localStorageProvider.useLocalStorage()
   const { setModal } = modalProvider.useSetModal()
 
-  const navigator2D = navigator2DProvider.useNavigator2D()
-
   const localBackend =
     projectManagerInstance != null ? new LocalBackend(projectManagerInstance) : null
 
@@ -256,14 +253,6 @@ function AppRouter(props: React.PropsWithChildren<AppRouterProps>) {
     }
   }, [setModal])
 
-  React.useEffect(() => {
-    const onKeyDown = navigator2D.onKeyDown.bind(navigator2D)
-    document.addEventListener('keydown', onKeyDown)
-    return () => {
-      document.removeEventListener('keydown', onKeyDown)
-    }
-  }, [navigator2D])
-
   React.useEffect(() => {
     let isClick = false
     const onMouseDown = () => {

app/gui/src/dashboard/components/AriaComponents/Inputs/Dropdown/Dropdown.tsx

@@ -33,7 +33,7 @@ import {
 import { makeRoundedStyles } from '../../utilities'
 
 const DROPDOWN_STYLES = tv({
-  base: 'focus-child group relative flex w-max cursor-pointer flex-col items-start whitespace-nowrap rounded-input leading-cozy',
+  base: 'group relative flex w-max cursor-pointer flex-col items-start whitespace-nowrap rounded-input leading-cozy',
   variants: {
     isFocused: {
       true: {

app/gui/src/dashboard/components/AriaComponents/Inputs/HiddenFile/HiddenFile.tsx

@@ -48,7 +48,7 @@ export function HiddenFile<Schema extends TSchema, TFieldName extends FieldPath<
       render={({ field }) => (
         <Input
           type="file"
-          className="focus-child w-0"
+          className="w-0"
           accept={accept}
           onChange={(event) => {
             field.onChange(event.target.files?.[0])

app/gui/src/dashboard/components/ColorPicker.tsx

@@ -1,11 +1,6 @@
 /** @file A color picker to select from a predetermined list of colors. */
 import * as React from 'react'
 
-import * as focusHooks from '#/hooks/focusHooks'
-
-import * as focusClassProvider from '#/providers/FocusClassProvider'
-import * as focusDirectionProvider from '#/providers/FocusDirectionProvider'
-
 import * as aria from '#/components/aria'
 import FocusRing from '#/components/styled/FocusRing'
 import RadioGroup from '#/components/styled/RadioGroup'
@@ -23,21 +18,14 @@ export interface InternalColorPickerItemProps {
 /** An input in a {@link ColorPicker}. */
 function ColorPickerItem(props: InternalColorPickerItemProps) {
   const { color } = props
-  const { focusChildClass } = focusClassProvider.useFocusClasses()
-  const focusDirection = focusDirectionProvider.useFocusDirection()
-  const handleFocusMove = focusHooks.useHandleFocusMove(focusDirection)
   const cssColor = backend.lChColorToCssColor(color)
 
   return (
     <FocusRing within>
       <aria.Radio
-        ref={(element) => {
-          element?.querySelector('input')?.classList.add(focusChildClass)
-        }}
         value={cssColor}
         className="group flex size-radio-button cursor-pointer rounded-full p-radio-button-dot"
         style={{ backgroundColor: cssColor }}
-        onKeyDown={handleFocusMove}
       >
         <div className="hidden size-radio-button-dot rounded-full bg-selected-frame group-selected:block" />
       </aria.Radio>

app/gui/src/dashboard/components/JSONSchemaInput.tsx

@@ -106,7 +106,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                     value={typeof value === 'string' ? value : ''}
                     size={1}
                     className={twMerge(
-                      'focus-child h-6 w-full grow rounded-input border-0.5 border-primary/20 bg-transparent px-2 outline-offset-2 transition-[border-color,outline] duration-200 read-only:read-only focus:border-primary/50 focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-primary',
+                      'h-6 w-full grow rounded-input border-0.5 border-primary/20 bg-transparent px-2 outline-offset-2 transition-[border-color,outline] duration-200 read-only:read-only focus:border-primary/50 focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-primary',
                       validationErrorClassName,
                     )}
                     placeholder={getText('enterText')}
@@ -132,7 +132,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                   value={typeof value === 'number' ? value : ''}
                   size={1}
                   className={twMerge(
-                    'focus-child h-6 w-full grow rounded-input border-0.5 border-primary/20 bg-transparent px-2 outline-offset-2 transition-[border-color,outline] duration-200 read-only:read-only focus:border-primary/50 focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-primary',
+                    'h-6 w-full grow rounded-input border-0.5 border-primary/20 bg-transparent px-2 outline-offset-2 transition-[border-color,outline] duration-200 read-only:read-only focus:border-primary/50 focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-primary',
                     validationErrorClassName,
                   )}
                   placeholder={getText('enterNumber')}
@@ -159,7 +159,7 @@ export default function JSONSchemaInput(props: JSONSchemaInputProps) {
                   value={typeof value === 'number' ? value : ''}
                   size={1}
                   className={twMerge(
-                    'focus-child h-6 w-full grow rounded-input border-0.5 border-primary/20 bg-transparent px-2 outline-offset-2 transition-[border-color,outline] duration-200 read-only:read-only focus:border-primary/50 focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-primary',
+                    'h-6 w-full grow rounded-input border-0.5 border-primary/20 bg-transparent px-2 outline-offset-2 transition-[border-color,outline] duration-200 read-only:read-only focus:border-primary/50 focus:outline focus:outline-2 focus:outline-offset-0 focus:outline-primary',
                     validationErrorClassName,
                   )}
                   placeholder={getText('enterInteger')}

app/gui/src/dashboard/components/Link.tsx

@@ -5,11 +5,9 @@ import * as toastify from 'react-toastify'
 import * as aria from '#/components/aria'
 import FocusRing from '#/components/styled/FocusRing'
 import SvgMask from '#/components/SvgMask'
-import { useFocusChild } from '#/hooks/focusHooks'
 import { useText } from '#/providers/TextProvider'
 import { mergeRefs } from '#/utilities/mergeRefs'
 import { forwardRef } from '#/utilities/react'
-import { twMerge } from 'tailwind-merge'
 
 /** Props for a {@link Link}. */
 export interface LinkProps {
@@ -26,7 +24,6 @@ export default forwardRef(Link)
 function Link(props: LinkProps, ref: React.ForwardedRef<HTMLAnchorElement>) {
   const { openInBrowser = false, to, icon, text, onPress } = props
   const { getText } = useText()
-  const { className: focusChildClassName, ...focusChildProps } = useFocusChild()
   const linkRef = React.useRef<HTMLAnchorElement>(null)
 
   return (
@@ -38,17 +35,13 @@ function Link(props: LinkProps, ref: React.ForwardedRef<HTMLAnchorElement>) {
         href={to}
         {...(openInBrowser && { target: '_blank' })}
         rel="noopener noreferrer"
-        className={twMerge(
-          'flex items-center gap-auth-link rounded-full px-auth-link-x py-auth-link-y text-center text-xs font-bold text-blue-500 transition-all duration-auth hover:text-blue-700 focus:text-blue-700',
-          focusChildClassName,
-        )}
+        className="flex items-center gap-auth-link rounded-full px-auth-link-x py-auth-link-y text-center text-xs font-bold text-blue-500 transition-all duration-auth hover:text-blue-700 focus:text-blue-700"
         onPress={() => {
           if (openInBrowser) {
             toastify.toast.success(getText('openedLinkInBrowser'))
           }
           onPress?.()
         }}
-        {...focusChildProps}
       >
         <SvgMask src={icon} />
         {text}

app/gui/src/dashboard/components/MenuEntry.tsx

@@ -8,8 +8,6 @@ import BlankIcon from '#/assets/blank.svg'
 
 import type * as inputBindings from '#/configurations/inputBindings'
 
-import * as focusHooks from '#/hooks/focusHooks'
-
 import * as inputBindingsProvider from '#/providers/InputBindingsProvider'
 import * as modalProvider from '#/providers/ModalProvider'
 import * as textProvider from '#/providers/TextProvider'
@@ -119,7 +117,6 @@ export default function MenuEntry(props: MenuEntryProps) {
   const { unsetModal } = modalProvider.useSetModal()
   const dialogContext = useDialogContext()
   const inputBindings = inputBindingsProvider.useInputBindings()
-  const focusChildProps = focusHooks.useFocusChild()
   const info = inputBindings.metadata[action]
   const buttonRef = React.useRef<HTMLButtonElement>(null)
   const isDisabledRef = useSyncRef(isDisabled)
@@ -168,19 +165,17 @@ export default function MenuEntry(props: MenuEntryProps) {
       <FocusRing>
         <aria.Button
           ref={buttonRef}
-          {...aria.mergeProps<aria.ButtonProps>()(focusChildProps, {
-            isDisabled,
-            className: 'group flex w-full rounded-menu-entry',
-            onPress: () => {
-              if (dialogContext) {
-                // Closing a dialog takes precedence over unsetting the modal.
-                dialogContext.close()
-              } else {
-                unsetModal()
-              }
-              doAction()
-            },
-          })}
+          isDisabled={isDisabled}
+          className="group flex w-full rounded-menu-entry"
+          onPress={() => {
+            if (dialogContext) {
+              // Closing a dialog takes precedence over unsetting the modal.
+              dialogContext.close()
+            } else {
+              unsetModal()
+            }
+            doAction()
+          }}
         >
           <div className={MENU_ENTRY_VARIANTS(variantProps)} {...targetProps}>
             <div title={title} className="flex items-center gap-menu-entry whitespace-nowrap">

app/gui/src/dashboard/components/Modal.tsx

@@ -3,8 +3,6 @@ import * as React from 'react'
 
 import * as modalProvider from '#/providers/ModalProvider'
 
-import FocusRoot from '#/components/styled/FocusRoot'
-
 import { ClearPressResponder } from '#/components/aria'
 import * as tailwindVariants from '#/utilities/tailwindVariants'
 
@@ -41,34 +39,28 @@ export default function Modal(props: ModalProps) {
     // Required so that `Button`s and `Checkbox`es contained inside do not trigger any
     // ancestor `DialogTrigger`s.
     <ClearPressResponder>
-      <FocusRoot active={!hidden}>
-        {(innerProps) => (
-          <div
-            {...(!hidden ? { 'data-testid': 'modal-background' } : {})}
-            style={style}
-            className={MODAL_VARIANTS(variantProps)}
-            onClick={
-              onClick ??
-              ((event) => {
-                if (event.currentTarget === event.target && getSelection()?.type !== 'Range') {
-                  event.stopPropagation()
-                  unsetModal()
-                }
-              })
+      <div
+        {...(!hidden ? { 'data-testid': 'modal-background' } : {})}
+        style={style}
+        className={MODAL_VARIANTS(variantProps)}
+        onClick={
+          onClick ??
+          ((event) => {
+            if (event.currentTarget === event.target && getSelection()?.type !== 'Range') {
+              event.stopPropagation()
+              unsetModal()
             }
-            onContextMenu={onContextMenu}
-            {...innerProps}
-            onKeyDown={(event) => {
-              innerProps.onKeyDown?.(event)
-              if (event.key !== 'Escape') {
-                event.stopPropagation()
-              }
-            }}
-          >
-            {children}
-          </div>
-        )}
-      </FocusRoot>
+          })
+        }
+        onContextMenu={onContextMenu}
+        onKeyDown={(event) => {
+          if (event.key !== 'Escape') {
+            event.stopPropagation()
+          }
+        }}
+      >
+        {children}
+      </div>
     </ClearPressResponder>
   )
 }

app/gui/src/dashboard/components/dashboard/Label.tsx

@@ -4,8 +4,6 @@ import type { DragEvent, MouseEvent, PropsWithChildren } from 'react'
 import type { PressEvent } from '#/components/aria'
 import { Text } from '#/components/AriaComponents'
 import FocusRing from '#/components/styled/FocusRing'
-import { useHandleFocusMove } from '#/hooks/focusHooks'
-import { useFocusDirection } from '#/providers/FocusDirectionProvider'
 import type { Label as BackendLabel } from '#/services/Backend'
 import { lChColorToCssColor, type LChColor } from '#/services/Backend'
 import { twMerge } from '#/utilities/tailwindMerge'
@@ -39,8 +37,6 @@ export default function Label(props: InternalLabelProps) {
   const { active = false, isDisabled = false, color, negated = false, draggable, title } = props
   const { onPress, onDragStart, onContextMenu, label } = props
   const { children: childrenRaw } = props
-  const focusDirection = useFocusDirection()
-  const handleFocusMove = useHandleFocusMove(focusDirection)
   // eslint-disable-next-line @typescript-eslint/no-magic-numbers
   const isLight = color.lightness > 50
 
@@ -61,7 +57,7 @@ export default function Label(props: InternalLabelProps) {
           title={title}
           disabled={isDisabled}
           className={twMerge(
-            'focus-child relative flex h-6 items-center whitespace-nowrap rounded-inherit px-[7px] opacity-50 transition-all after:pointer-events-none after:absolute after:inset after:rounded-full hover:opacity-100 focus:opacity-100',
+            'relative flex h-6 items-center whitespace-nowrap rounded-inherit px-[7px] opacity-50 transition-all after:pointer-events-none after:absolute after:inset after:rounded-full hover:opacity-100 focus:opacity-100',
             active && 'active',
             negated && 'after:border-2 after:border-delete',
           )}
@@ -74,7 +70,6 @@ export default function Label(props: InternalLabelProps) {
             onDragStart?.(e)
           }}
           onContextMenu={onContextMenu}
-          onKeyDown={handleFocusMove}
         >
           {typeof childrenRaw !== 'string' ?
             childrenRaw

app/gui/src/dashboard/components/dashboard/Permission.tsx

@@ -11,7 +11,6 @@ import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
 import * as textProvider from '#/providers/TextProvider'
 
 import PermissionSelector from '#/components/dashboard/PermissionSelector'
-import FocusArea from '#/components/styled/FocusArea'
 
 import type Backend from '#/services/Backend'
 import * as backendModule from '#/services/Backend'
@@ -81,26 +80,22 @@ export default function Permission(props: PermissionProps) {
   }
 
   return (
-    <FocusArea active={!isDisabled} direction="horizontal">
-      {(innerProps) => (
-        <div className="flex w-full items-center gap-user-permission" {...innerProps}>
-          <PermissionSelector
-            showDelete
-            isDisabled={isDisabled}
-            error={isOnlyOwner ? getText('needsOwnerError', assetTypeName) : null}
-            selfPermission={self.permission}
-            action={permission.permission}
-            assetType={asset.type}
-            onChange={async (permissions) => {
-              await doSetPermission(object.merge(permission, { permission: permissions }))
-            }}
-            doDelete={() => {
-              doDelete(backendModule.getAssetPermissionId(permission))
-            }}
-          />
-          <Text truncate="1">{backendModule.getAssetPermissionName(permission)}</Text>
-        </div>
-      )}
-    </FocusArea>
+    <div className="flex w-full items-center gap-user-permission">
+      <PermissionSelector
+        showDelete
+        isDisabled={isDisabled}
+        error={isOnlyOwner ? getText('needsOwnerError', assetTypeName) : null}
+        selfPermission={self.permission}
+        action={permission.permission}
+        assetType={asset.type}
+        onChange={async (permissions) => {
+          await doSetPermission(object.merge(permission, { permission: permissions }))
+        }}
+        doDelete={() => {
+          doDelete(backendModule.getAssetPermissionId(permission))
+        }}
+      />
+      <Text truncate="1">{backendModule.getAssetPermissionName(permission)}</Text>
+    </div>
   )
 }