fix: various react errors in console (#639)

pluralsh · Sep 18, 2024 · 33415f6 · 33415f6
1 parent c416290
commit 33415f6
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 34 deletions.
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
@@ -406,6 +406,7 @@ export function Breadcrumbs({
 }: BreadcrumbsProps & NavProps) {
   const contextCrumbs = useContext(BreadcrumbsContext)?.breadcrumbs
   const breadcrumbs = propsCrumbs || contextCrumbs
+  const nodeRef = useRef<HTMLDivElement>()
 
   if (!breadcrumbs) {
     throw Error(
@@ -430,15 +431,11 @@ export function Breadcrumbs({
         <Transition
           key={String(transitionKey.current)}
           timeout={200}
-          // Typing for 'addEndListener' on <Transition> component is incorrect
-          // when not providing 'ref' prop
-          // @ts-expect-error
-          addEndListener={(node, done) => {
-            node?.addEventListener('refitdone', done, false)
-          }}
+          nodeRef={nodeRef}
         >
           {(state) => (
             <DynamicBreadcrumbs
+              wrapperRef={nodeRef}
               minLength={minLength}
               maxLength={maxLength}
               collapsible={collapsible}

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -1,29 +1,25 @@
 // this is just styling, actual modal logic is in ModalWrapper
 
-import {
-  type ReactNode,
-  type Ref,
-  forwardRef,
-  useCallback,
-  useEffect,
-} from 'react'
+import { type ReactNode, type Ref, forwardRef, useCallback } from 'react'
 
 import styled, {
   type StyledComponentPropsWithRef,
   useTheme,
 } from 'styled-components'
 
-import { type ColorKey, type Nullable, type SeverityExt } from '../types'
+import { VisuallyHidden } from 'react-aria'
+
+import * as Dialog from '@radix-ui/react-dialog'
 
-import useLockedBody from '../hooks/useLockedBody'
+import { type ColorKey, type Nullable, type SeverityExt } from '../types'
 
+import Card from './Card'
 import CheckRoundedIcon from './icons/CheckRoundedIcon'
 import type createIcon from './icons/createIcon'
 import ErrorIcon from './icons/ErrorIcon'
 import InfoIcon from './icons/InfoIcon'
 import WarningIcon from './icons/WarningIcon'
 import { ModalWrapper, type ModalWrapperProps } from './ModalWrapper'
-import Card from './Card'
 
 export const SEVERITIES = [
   'info',
@@ -45,7 +41,6 @@ type ModalPropsType = ModalWrapperProps & {
   header?: ReactNode
   actions?: ReactNode
   severity?: ModalSeverity
-  lockBody?: boolean
   asForm?: boolean
   formProps?: StyledComponentPropsWithRef<'form'>
 }
@@ -147,7 +142,6 @@ function ModalRef(
     size = form ? 'large' : 'medium',
     onClose,
     severity,
-    lockBody = true,
     asForm = false,
     formProps = {},
     scrollable = true,
@@ -159,12 +153,6 @@ function ModalRef(
   const HeaderIcon = severityToIcon[severity ?? 'default']
   const iconColorKey = severityToIconColorKey[severity ?? 'default']
 
-  const [, setBodyLocked] = useLockedBody(open && lockBody)
-
-  useEffect(() => {
-    setBodyLocked(lockBody && open)
-  }, [lockBody, open, setBodyLocked])
-
   const triggerClose = useCallback(
     (open: boolean) => {
       if (!open) onClose?.()
@@ -195,6 +183,9 @@ function ModalRef(
           $scrollable={scrollable}
           $hasActions={!!actions}
         >
+          <VisuallyHidden>
+            <Dialog.Title>{header}</Dialog.Title>
+          </VisuallyHidden>
           {!!header && (
             <ModalHeaderWrapSC ref={ref}>
               {HeaderIcon && (

diff --git a/src/components/SidebarItem.tsx b/src/components/SidebarItem.tsx
@@ -12,17 +12,21 @@ type SidebarItemProps = ComponentProps<typeof ItemSC> & {
   active?: boolean
 }
 
-function SidebarItemRef({
-  children,
-  tooltip = '',
-  expandedLabel = '',
-  className,
-  ...props
-}: SidebarItemProps) {
+function SidebarItemRef(
+  {
+    children,
+    tooltip = '',
+    expandedLabel = '',
+    className,
+    ...props
+  }: SidebarItemProps,
+  ref: Ref<HTMLDivElement>
+) {
   const { isExpanded } = useSidebar()
 
   return (
     <WithTooltip
+      ref={ref}
       tooltip={tooltip}
       className={className}
       {...props}
@@ -35,7 +39,7 @@ function SidebarItemRef({
 
 function WithTooltipRef(
   { children, clickable, tooltip = '', ...props }: SidebarItemProps,
-  ref: Ref<any>
+  ref: Ref<HTMLDivElement>
 ) {
   const { layout, isExpanded } = useSidebar()
 
@@ -117,18 +121,18 @@ const ItemSC = styled.div<{
 
 function ItemRef(
   { children, clickable = false, active = false, ...props }: SidebarItemProps,
-  ref: Ref<any>
+  ref: Ref<HTMLDivElement>
 ) {
   const { layout, variant } = useSidebar()
   const isHorizontal = layout === 'horizontal'
 
   return (
     <ItemSC
+      ref={ref}
       $clickable={clickable}
       $active={active}
       $isHorizontal={isHorizontal}
       $variant={variant}
-      ref={ref}
       {...props}
     >
       {children}

diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
@@ -118,6 +118,7 @@ function Tooltip({
   const {
     x,
     y,
+    refs,
     reference,
     floating,
     strategy: finalStrategy,
@@ -197,6 +198,7 @@ function Tooltip({
         }
       >
         <CSSTransition
+          nodeRef={refs.floating}
           in={isOpen}
           appear
           timeout={250}