debugging chromatic

build.mjs

@@ -34,15 +34,15 @@ async function build(path) {
   // 2. It could have fully replaced esbuild (as it uses that internally),
   //    but at the moment its esbuild version is somewhat outdated.
   //    It’s also harder to configure and esbuild docs are more thorough.
-  await tsup.build({
-    entry: [file],
-    format: ['cjs', 'esm'],
-    dts: { only: true },
-    outDir: dist,
-    silent: true,
-    external: [/@radix-ui\/.+/],
-  });
-  console.log(`Built ${path}/dist/index.d.ts`);
+  // await tsup.build({
+  //   entry: [file],
+  //   format: ['cjs', 'esm'],
+  //   dts: { only: true },
+  //   outDir: dist,
+  //   silent: true,
+  //   external: [/@radix-ui\/.+/],
+  // });
+  // console.log(`Built ${path}/dist/index.d.ts`);
 }
 
 globSync('packages/*/*').forEach(build);

package.json

@@ -47,8 +47,8 @@
     "@types/fs-extra": "^11",
     "@types/jest": "^27.4.1",
     "@types/jest-axe": "^3.5.3",
-    "@types/react": "^18.0.5",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@typescript-eslint/parser": "^5.19.0",

packages/react/announce/src/Announce.tsx

@@ -171,7 +171,7 @@ const Announce = React.forwardRef<AnnounceElement, AnnounceProps>((props, forwar
       </Primitive.div>
 
       {/* portal into live region for screen reader announcements */}
-      {region && ReactDOM.createPortal(<div>{children}</div>, region)}
+      <>{region && ReactDOM.createPortal(<div>{children}</div>, region)}</>
     </React.Fragment>
   );
 });

packages/react/navigation-menu/src/NavigationMenu.tsx

@@ -652,14 +652,18 @@ const NavigationMenuIndicator = React.forwardRef<
   const context = useNavigationMenuContext(INDICATOR_NAME, props.__scopeNavigationMenu);
   const isVisible = Boolean(context.value);
 
-  return context.indicatorTrack
-    ? ReactDOM.createPortal(
-        <Presence present={forceMount || isVisible}>
-          <NavigationMenuIndicatorImpl {...indicatorProps} ref={forwardedRef} />
-        </Presence>,
-        context.indicatorTrack
-      )
-    : null;
+  return (
+    <>
+      {context.indicatorTrack
+        ? ReactDOM.createPortal(
+            <Presence present={forceMount || isVisible}>
+              <NavigationMenuIndicatorImpl {...indicatorProps} ref={forwardedRef} />
+            </Presence>,
+            context.indicatorTrack
+          )
+        : null}
+    </>
+  );
 });
 
 NavigationMenuIndicator.displayName = INDICATOR_NAME;

packages/react/portal/src/Portal.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { Primitive } from '@radix-ui/react-primitive';
-import { useLayoutEffect } from '@radix-ui/react-use-layout-effect';
+// import { useLayoutEffect } from '@radix-ui/react-use-layout-effect';
 
 /* -------------------------------------------------------------------------------------------------
  * Portal
@@ -20,12 +20,16 @@ interface PortalProps extends PrimitiveDivProps {
 
 const Portal = React.forwardRef<PortalElement, PortalProps>((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
-  const [mounted, setMounted] = React.useState(false);
-  useLayoutEffect(() => setMounted(true), []);
+  const [mounted] = React.useState(true);
+  // useLayoutEffect(() => setMounted(true), []);
   const container = containerProp || (mounted && globalThis?.document?.body);
-  return container
-    ? ReactDOM.createPortal(<Primitive.div {...portalProps} ref={forwardedRef} />, container)
-    : null;
+  return (
+    <>
+      {container
+        ? ReactDOM.createPortal(<Primitive.div {...portalProps} ref={forwardedRef} />, container)
+        : null}
+    </>
+  );
 });
 
 Portal.displayName = PORTAL_NAME;

packages/react/presence/src/Presence.tsx

@@ -152,7 +152,7 @@ function getElementRef(element: React.ReactElement) {
   // Pre React 19 there's a getter on `element.props.ref` that throws a warning when attempting to access it.
   // This is safe to rely on. (As in... obviously, old React versions won't change).
   // https://github.com/facebook/react/blob/408258268edb5acdfdbf77bc6e0b0dc6396c0e6f/packages/react/src/jsx/ReactJSXElement.js#L89-L99
-  const getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get;
+  const getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get as any;
   const hasPropWarning = getter && 'isReactWarning' in getter && getter.isReactWarning;
 
   if (hasPropWarning) {

packages/react/select/src/Select.tsx

@@ -405,16 +405,20 @@ const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>
 
     if (!context.open) {
       const frag = fragment as Element | undefined;
-      return frag
-        ? ReactDOM.createPortal(
-            <SelectContentProvider scope={props.__scopeSelect}>
-              <Collection.Slot scope={props.__scopeSelect}>
-                <div>{props.children}</div>
-              </Collection.Slot>
-            </SelectContentProvider>,
-            frag
-          )
-        : null;
+      return (
+        <>
+          {frag
+            ? ReactDOM.createPortal(
+                <SelectContentProvider scope={props.__scopeSelect}>
+                  <Collection.Slot scope={props.__scopeSelect}>
+                    <div>{props.children}</div>
+                  </Collection.Slot>
+                </SelectContentProvider>,
+                frag
+              )
+            : null}
+        </>
+      );
     }
 
     return <SelectContentImpl {...props} ref={forwardedRef} />;

packages/react/slot/src/Slot.tsx

@@ -132,7 +132,7 @@ function getElementRef(element: React.ReactElement) {
   // Pre React 19 there's a getter on `element.props.ref` that throws a warning when attempting to access it.
   // This is safe to rely on. (As in... obviously, old React versions won't change).
   // https://github.com/facebook/react/blob/408258268edb5acdfdbf77bc6e0b0dc6396c0e6f/packages/react/src/jsx/ReactJSXElement.js#L89-L99
-  const getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get;
+  const getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get as any;
   const hasPropWarning = getter && 'isReactWarning' in getter && getter.isReactWarning;
 
   if (hasPropWarning) {

packages/react/toast/src/Toast.tsx

@@ -560,108 +560,112 @@ const ToastImpl = React.forwardRef<ToastImplElement, ToastImplProps>(
         )}
 
         <ToastInteractiveProvider scope={__scopeToast} onClose={handleClose}>
-          {ReactDOM.createPortal(
-            <Collection.ItemSlot scope={__scopeToast}>
-              <DismissableLayer.Root
-                asChild
-                onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {
-                  if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
-                  context.isFocusedToastEscapeKeyDownRef.current = false;
-                })}
-              >
-                <Primitive.li
-                  // Ensure toasts are announced as status list or status when focused
-                  role="status"
-                  aria-live="off"
-                  aria-atomic
-                  tabIndex={0}
-                  data-state={open ? 'open' : 'closed'}
-                  data-swipe-direction={context.swipeDirection}
-                  {...toastProps}
-                  ref={composedRefs}
-                  style={{ userSelect: 'none', touchAction: 'none', ...props.style }}
-                  onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {
-                    if (event.key !== 'Escape') return;
-                    onEscapeKeyDown?.(event.nativeEvent);
-                    if (!event.nativeEvent.defaultPrevented) {
-                      context.isFocusedToastEscapeKeyDownRef.current = true;
-                      handleClose();
-                    }
-                  })}
-                  onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {
-                    if (event.button !== 0) return;
-                    pointerStartRef.current = { x: event.clientX, y: event.clientY };
-                  })}
-                  onPointerMove={composeEventHandlers(props.onPointerMove, (event) => {
-                    if (!pointerStartRef.current) return;
-                    const x = event.clientX - pointerStartRef.current.x;
-                    const y = event.clientY - pointerStartRef.current.y;
-                    const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current);
-                    const isHorizontalSwipe = ['left', 'right'].includes(context.swipeDirection);
-                    const clamp = ['left', 'up'].includes(context.swipeDirection)
-                      ? Math.min
-                      : Math.max;
-                    const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;
-                    const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0;
-                    const moveStartBuffer = event.pointerType === 'touch' ? 10 : 2;
-                    const delta = { x: clampedX, y: clampedY };
-                    const eventDetail = { originalEvent: event, delta };
-                    if (hasSwipeMoveStarted) {
-                      swipeDeltaRef.current = delta;
-                      handleAndDispatchCustomEvent(TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {
-                        discrete: false,
-                      });
-                    } else if (isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)) {
-                      swipeDeltaRef.current = delta;
-                      handleAndDispatchCustomEvent(TOAST_SWIPE_START, onSwipeStart, eventDetail, {
-                        discrete: false,
-                      });
-                      (event.target as HTMLElement).setPointerCapture(event.pointerId);
-                    } else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) {
-                      // User is swiping in wrong direction so we disable swipe gesture
-                      // for the current pointer down interaction
-                      pointerStartRef.current = null;
-                    }
+          <>
+            {ReactDOM.createPortal(
+              <Collection.ItemSlot scope={__scopeToast}>
+                <DismissableLayer.Root
+                  asChild
+                  onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {
+                    if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
+                    context.isFocusedToastEscapeKeyDownRef.current = false;
                   })}
-                  onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {
-                    const delta = swipeDeltaRef.current;
-                    const target = event.target as HTMLElement;
-                    if (target.hasPointerCapture(event.pointerId)) {
-                      target.releasePointerCapture(event.pointerId);
-                    }
-                    swipeDeltaRef.current = null;
-                    pointerStartRef.current = null;
-                    if (delta) {
-                      const toast = event.currentTarget;
+                >
+                  <Primitive.li
+                    // Ensure toasts are announced as status list or status when focused
+                    role="status"
+                    aria-live="off"
+                    aria-atomic
+                    tabIndex={0}
+                    data-state={open ? 'open' : 'closed'}
+                    data-swipe-direction={context.swipeDirection}
+                    {...toastProps}
+                    ref={composedRefs}
+                    style={{ userSelect: 'none', touchAction: 'none', ...props.style }}
+                    onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {
+                      if (event.key !== 'Escape') return;
+                      onEscapeKeyDown?.(event.nativeEvent);
+                      if (!event.nativeEvent.defaultPrevented) {
+                        context.isFocusedToastEscapeKeyDownRef.current = true;
+                        handleClose();
+                      }
+                    })}
+                    onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {
+                      if (event.button !== 0) return;
+                      pointerStartRef.current = { x: event.clientX, y: event.clientY };
+                    })}
+                    onPointerMove={composeEventHandlers(props.onPointerMove, (event) => {
+                      if (!pointerStartRef.current) return;
+                      const x = event.clientX - pointerStartRef.current.x;
+                      const y = event.clientY - pointerStartRef.current.y;
+                      const hasSwipeMoveStarted = Boolean(swipeDeltaRef.current);
+                      const isHorizontalSwipe = ['left', 'right'].includes(context.swipeDirection);
+                      const clamp = ['left', 'up'].includes(context.swipeDirection)
+                        ? Math.min
+                        : Math.max;
+                      const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;
+                      const clampedY = !isHorizontalSwipe ? clamp(0, y) : 0;
+                      const moveStartBuffer = event.pointerType === 'touch' ? 10 : 2;
+                      const delta = { x: clampedX, y: clampedY };
                       const eventDetail = { originalEvent: event, delta };
-                      if (
-                        isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)
+                      if (hasSwipeMoveStarted) {
+                        swipeDeltaRef.current = delta;
+                        handleAndDispatchCustomEvent(TOAST_SWIPE_MOVE, onSwipeMove, eventDetail, {
+                          discrete: false,
+                        });
+                      } else if (
+                        isDeltaInDirection(delta, context.swipeDirection, moveStartBuffer)
                       ) {
-                        handleAndDispatchCustomEvent(TOAST_SWIPE_END, onSwipeEnd, eventDetail, {
-                          discrete: true,
+                        swipeDeltaRef.current = delta;
+                        handleAndDispatchCustomEvent(TOAST_SWIPE_START, onSwipeStart, eventDetail, {
+                          discrete: false,
                         });
-                      } else {
-                        handleAndDispatchCustomEvent(
-                          TOAST_SWIPE_CANCEL,
-                          onSwipeCancel,
-                          eventDetail,
-                          {
+                        (event.target as HTMLElement).setPointerCapture(event.pointerId);
+                      } else if (Math.abs(x) > moveStartBuffer || Math.abs(y) > moveStartBuffer) {
+                        // User is swiping in wrong direction so we disable swipe gesture
+                        // for the current pointer down interaction
+                        pointerStartRef.current = null;
+                      }
+                    })}
+                    onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {
+                      const delta = swipeDeltaRef.current;
+                      const target = event.target as HTMLElement;
+                      if (target.hasPointerCapture(event.pointerId)) {
+                        target.releasePointerCapture(event.pointerId);
+                      }
+                      swipeDeltaRef.current = null;
+                      pointerStartRef.current = null;
+                      if (delta) {
+                        const toast = event.currentTarget;
+                        const eventDetail = { originalEvent: event, delta };
+                        if (
+                          isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)
+                        ) {
+                          handleAndDispatchCustomEvent(TOAST_SWIPE_END, onSwipeEnd, eventDetail, {
                             discrete: true,
-                          }
-                        );
+                          });
+                        } else {
+                          handleAndDispatchCustomEvent(
+                            TOAST_SWIPE_CANCEL,
+                            onSwipeCancel,
+                            eventDetail,
+                            {
+                              discrete: true,
+                            }
+                          );
+                        }
+                        // Prevent click event from triggering on items within the toast when
+                        // pointer up is part of a swipe gesture
+                        toast.addEventListener('click', (event) => event.preventDefault(), {
+                          once: true,
+                        });
                       }
-                      // Prevent click event from triggering on items within the toast when
-                      // pointer up is part of a swipe gesture
-                      toast.addEventListener('click', (event) => event.preventDefault(), {
-                        once: true,
-                      });
-                    }
-                  })}
-                />
-              </DismissableLayer.Root>
-            </Collection.ItemSlot>,
-            context.viewport
-          )}
+                    })}
+                  />
+                </DismissableLayer.Root>
+              </Collection.ItemSlot>,
+              context.viewport
+            )}
+          </>
         </ToastInteractiveProvider>
       </>
     );