Ensure ref and inert usage is React 18 compatible (#464)

Author: michaeltaranto

.changeset/fresh-mirrors-jam.md

@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Ensure `ref` and `inert` usage is React 18 compatible

src/components/EditorActions/EditorActions.tsx

@@ -4,7 +4,12 @@ import {
   Ellipsis,
   type LucideIcon,
 } from 'lucide-react';
-import { useContext, useRef, type ButtonHTMLAttributes } from 'react';
+import {
+  forwardRef,
+  useContext,
+  useRef,
+  type ButtonHTMLAttributes,
+} from 'react';
 
 import { useEditor } from '../../contexts/EditorContext';
 import { StoreContext } from '../../contexts/StoreContext';
@@ -38,7 +43,10 @@ interface EditorActionButtonProps
   hideTooltip?: boolean;
 }
 
-const EditorActionButton = (props: EditorActionButtonProps) => {
+const EditorActionButton = forwardRef<
+  HTMLButtonElement,
+  EditorActionButtonProps
+>((props, ref) => {
   const {
     onClick,
     name,
@@ -77,6 +85,7 @@ const EditorActionButton = (props: EditorActionButtonProps) => {
       trigger={
         <button
           {...restProps}
+          ref={ref}
           onClick={handleClick}
           aria-disabled={disabled}
           className={styles.button}
@@ -88,7 +97,7 @@ const EditorActionButton = (props: EditorActionButtonProps) => {
       }
     />
   );
-};
+});
 
 const menuSideOffset = 2;
 const overflowCommands = editorCommandList.filter(

src/components/Header/Header.tsx

@@ -28,6 +28,7 @@ import {
   type ComponentProps,
   type ReactNode,
   useContext,
+  useEffect,
   useRef,
   useState,
 } from 'react';
@@ -384,13 +385,25 @@ export const Header = () => {
   const [{ code, selectedThemes }] = useContext(StoreContext);
   const { copying, onCopyClick } = useCopy();
   const [shareOpen, setShareOpen] = useState(false);
+  const sharedActionsRef = useRef<HTMLDivElement>(null);
 
   const hasCode = code.trim().length > 0;
 
   const previewUrl = usePreviewUrl(
     themesEnabled ? selectedThemes[0] : undefined
   );
 
+  // Remove in favour of direct DOM attribute when we drop React 18 support
+  useEffect(() => {
+    if (sharedActionsRef.current) {
+      if (!hasCode) {
+        sharedActionsRef.current.setAttribute('inert', '');
+      } else {
+        sharedActionsRef.current.removeAttribute('inert');
+      }
+    }
+  }, [hasCode]);
+
   return (
     <Box className={styles.root}>
       <div className={styles.menuContainer}>
@@ -400,11 +413,11 @@ export const Header = () => {
       <SharedTooltipContext>
         <div className={styles.actionsContainer}>
           <div
+            ref={sharedActionsRef}
             className={clsx({
               [styles.shareActions]: true,
               [styles.shareActionsReady]: hasCode,
             })}
-            inert={!hasCode ? true : undefined}
           >
             <div className={styles.segmentedGroup}>
               <button

src/components/Menu/Menu.tsx

@@ -39,49 +39,48 @@ type MenuItemProps = Omit<
   icon?: LucideIcon;
   disabledReason?: string;
 };
-export const MenuItem = ({
-  children,
-  shortcut,
-  icon: Icon,
-  disabled,
-  disabledReason,
-  ...restProps
-}: MenuItemProps) => {
-  const isSubMenuTrigger = useContext(SubMenuTriggerContext);
+export const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(
+  (
+    { children, shortcut, icon: Icon, disabled, disabledReason, ...restProps },
+    ref
+  ) => {
+    const isSubMenuTrigger = useContext(SubMenuTriggerContext);
 
-  const item = (
-    <BaseUIMenu.Item
-      className={styles.item}
-      disabled={disabled}
-      closeOnClick={isSubMenuTrigger ? false : undefined}
-      {...restProps}
-    >
-      <span className={styles.itemLeft}>
-        {Icon ? <Icon size={menuIconSize} /> : null}
-        <Text tone={disabled ? 'secondary' : undefined} truncate>
-          {children}
-        </Text>
-      </span>
-      {shortcut && (
-        <Text tone="secondary">
-          <KeyboardShortcut shortcut={shortcut} />
-        </Text>
-      )}
-      {isSubMenuTrigger && !disabled ? <ChevronRight size={12} /> : null}
-    </BaseUIMenu.Item>
-  );
+    const item = (
+      <BaseUIMenu.Item
+        ref={ref}
+        className={styles.item}
+        disabled={disabled}
+        closeOnClick={isSubMenuTrigger ? false : undefined}
+        {...restProps}
+      >
+        <span className={styles.itemLeft}>
+          {Icon ? <Icon size={menuIconSize} /> : null}
+          <Text tone={disabled ? 'secondary' : undefined} truncate>
+            {children}
+          </Text>
+        </span>
+        {shortcut && (
+          <Text tone="secondary">
+            <KeyboardShortcut shortcut={shortcut} />
+          </Text>
+        )}
+        {isSubMenuTrigger && !disabled ? <ChevronRight size={12} /> : null}
+      </BaseUIMenu.Item>
+    );
 
-  return disabled && disabledReason ? (
-    <Tooltip
-      label={disabledReason}
-      announceAsDescription
-      side="right"
-      trigger={item}
-    />
-  ) : (
-    item
-  );
-};
+    return disabled && disabledReason ? (
+      <Tooltip
+        label={disabledReason}
+        announceAsDescription
+        side="right"
+        trigger={item}
+      />
+    ) : (
+      item
+    );
+  }
+);
 
 export const linkArrowSize = 12;
 

src/components/Playroom/Playroom.tsx

@@ -71,8 +71,12 @@ export default () => {
       hideActionSource.current === 'editor'
     ) {
       if (editorHidden) {
+        // Remove in favour of direct DOM attribute when we drop React 18 support
+        editorRef.current?.setAttribute('inert', '');
         showCodeButtonRef.current?.focus();
       } else {
+        // Remove in favour of direct DOM attribute when we drop React 18 support
+        editorRef.current?.removeAttribute('inert');
         hideCodeButtonRef.current?.focus();
       }
 
@@ -124,13 +128,12 @@ export default () => {
       <Box
         position="relative"
         className={styles.editor}
-        inert={!editorVisible}
         opacity={!editorVisible ? 0 : undefined}
         pointerEvents={!editorVisible ? 'none' : undefined}
         ref={editorRef}
       >
         <ResizeHandle
-          ref={editorRef}
+          targetRef={editorRef}
           position={resizeHandlePosition[editorOrientation]}
           onResize={(newValue) => {
             dispatch({

src/components/Playroom/ResizeHandle.tsx

@@ -25,14 +25,14 @@ const resolvePosition = (
 
 export const ResizeHandle = ({
   position,
-  ref,
+  targetRef,
   onResize,
   onResizeStart,
   onResizeEnd,
 }: {
   position: 'top' | 'right' | 'left';
   flip?: boolean;
-  ref: RefObject<HTMLElement | null>;
+  targetRef: RefObject<HTMLElement | null>;
   onResize: (newValue: number) => void;
   onResizeStart?: (startValue: number) => void;
   onResizeEnd?: (endValue: number) => void;
@@ -48,7 +48,7 @@ export const ResizeHandle = ({
     event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>
   ) => {
     const startPosition = resolvePosition(event.nativeEvent, pagePos);
-    const startSize = ref.current?.[elementSize] ?? 0;
+    const startSize = targetRef.current?.[elementSize] ?? 0;
 
     setResizing(true);
     onResizeStart?.(startSize);
@@ -61,7 +61,7 @@ export const ResizeHandle = ({
     };
 
     const stopHandler = () => {
-      const endSize = ref.current?.[elementSize] ?? 0;
+      const endSize = targetRef.current?.[elementSize] ?? 0;
       setResizing(false);
       onResizeEnd?.(endSize);
       document.body.classList.remove(styles.resizeCursor[direction]);

src/entries/frame.tsx

@@ -19,6 +19,5 @@ renderElement(
         />
       </>
     )}
-  </UrlParams>,
-  document.body
+  </UrlParams>
 );

src/entries/index.tsx

@@ -19,6 +19,5 @@ renderElement(
     <EditorProvider>
       <Playroom />
     </EditorProvider>
-  </StoreProvider>,
-  document.body
+  </StoreProvider>
 );

src/entries/preview.tsx

@@ -20,6 +20,5 @@ renderElement(
     {({ code, themeName, title }) => (
       <Preview title={title} code={code} themeName={themeName} />
     )}
-  </UrlParams>,
-  document.body
+  </UrlParams>
 );

src/render.ts

@@ -1,7 +1,10 @@
 import type { ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-export const renderElement = async (node: ReactNode, outlet: HTMLElement) => {
+const outlet = document.createElement('div');
+document.body.appendChild(outlet);
+
+export const renderElement = async (node: ReactNode) => {
   const root = createRoot(outlet);
   root.render(node);
 };