feat: React 19 migration - 7

packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
+
+import { type ReactNode } from 'react';
 import { describe, expect, it } from 'vitest';
 import styles from '../../dialog/dialog.module.css';
 import { AlertDialog } from '../alert-dialog';
@@ -17,7 +18,7 @@ const BasicAlertDialog = ({
 }: {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }) => (
   <AlertDialog open={open} onOpenChange={onOpenChange} {...props}>
     <AlertDialog.Trigger>{TRIGGER_TEXT}</AlertDialog.Trigger>

packages/raystack/components/command/command.tsx

@@ -1,10 +1,10 @@
 'use client';
 
+import { Dialog as DialogPrimitive } from '@base-ui/react';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
 import { Command as CommandPrimitive } from 'cmdk';
-import { Dialog as DialogPrimitive } from 'radix-ui';
-import React from 'react';
+import { type ComponentProps, ReactNode } from 'react';
 
 import { Dialog } from '../dialog';
 import { Flex } from '../flex';
@@ -14,12 +14,14 @@ const command = cva(styles.command);
 function CommandRoot({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
+}: ComponentProps<typeof CommandPrimitive>) {
   return <CommandPrimitive className={command({ className })} {...props} />;
 }
 CommandRoot.displayName = 'Command';
 
-interface CommandDialogProps extends DialogPrimitive.DialogProps {}
+interface CommandDialogProps extends DialogPrimitive.Root.Props {
+  children: ReactNode;
+}
 
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
@@ -30,12 +32,13 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
     </Dialog>
   );
 };
+CommandDialog.displayName = 'Command.Dialog';
 
 const input = cva(styles.input);
 function CommandInput({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+}: ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <Flex
       align='center'
@@ -59,15 +62,13 @@ const list = cva(styles.list);
 function CommandList({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
+}: ComponentProps<typeof CommandPrimitive.List>) {
   return <CommandPrimitive.List className={list({ className })} {...props} />;
 }
 
 CommandList.displayName = 'Command.List';
 
-function CommandEmpty(
-  props: React.ComponentProps<typeof CommandPrimitive.Empty>
-) {
+function CommandEmpty(props: ComponentProps<typeof CommandPrimitive.Empty>) {
   return <CommandPrimitive.Empty className={styles.empty} {...props} />;
 }
 
@@ -77,7 +78,7 @@ const group = cva(styles.group);
 function CommandGroup({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+}: ComponentProps<typeof CommandPrimitive.Group>) {
   return <CommandPrimitive.Group className={group({ className })} {...props} />;
 }
 
@@ -87,7 +88,7 @@ const separator = cva(styles.separator);
 function CommandSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+}: ComponentProps<typeof CommandPrimitive.Separator>) {
   return (
     <CommandPrimitive.Separator
       className={separator({ className })}
@@ -101,22 +102,19 @@ const item = cva(styles.item);
 function CommandItem({
   className,
   ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+}: ComponentProps<typeof CommandPrimitive.Item>) {
   return <CommandPrimitive.Item className={item({ className })} {...props} />;
 }
 
 CommandItem.displayName = 'Command.Item';
 
 const shortcut = cva(styles.shortcut);
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const CommandShortcut = ({ className, ...props }: ComponentProps<'span'>) => {
   return <span className={shortcut({ className })} {...props} />;
 };
 CommandShortcut.displayName = 'Command.Shortcut';
 
-export const Command: any = Object.assign(CommandRoot, {
+export const Command = Object.assign(CommandRoot, {
   Dialog: CommandDialog,
   Input: CommandInput,
   List: CommandList,

packages/raystack/components/container/container.tsx

@@ -1,5 +1,5 @@
 import { cva, VariantProps } from 'class-variance-authority';
-import { ComponentProps, HTMLAttributes, PropsWithChildren } from 'react';
+import { ComponentProps } from 'react';
 
 import styles from './container.module.css';
 

packages/raystack/components/context-menu/context-menu-misc.tsx

@@ -2,7 +2,7 @@
 
 import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { ComponentProps, Fragment, HTMLAttributes, ReactNode } from 'react';
+import { ComponentProps, Fragment } from 'react';
 import styles from '../menu/menu.module.css';
 import { useMenuContext } from '../menu/menu-root';
 
@@ -49,7 +49,7 @@ ContextMenuLabel.displayName = 'ContextMenu.Label';
 export const ContextMenuSeparator = ({
   className,
   ...props
-}: HTMLAttributes<HTMLDivElement>) => {
+}: ComponentProps<'div'>) => {
   const { shouldFilter } = useMenuContext();
 
   if (shouldFilter) {

packages/raystack/components/dialog/__tests__/dialog.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import React from 'react';
+
+import { type ReactNode } from 'react';
 import { describe, expect, it } from 'vitest';
 import { Dialog } from '../dialog';
 import styles from '../dialog.module.css';
@@ -17,7 +18,7 @@ const BasicDialog = ({
 }: {
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }) => (
   <Dialog open={open} onOpenChange={onOpenChange} {...props}>
     <Dialog.Trigger>{TRIGGER_TEXT}</Dialog.Trigger>

packages/raystack/components/drawer/__tests__/drawer.test.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+
+import { type ReactElement } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { Button } from '~/components/button';
 import { Drawer } from '../drawer';
@@ -33,7 +34,7 @@ const BasicDrawer = ({
   </Drawer>
 );
 
-async function renderAndOpenDrawer(DrawerElement: React.ReactElement) {
+async function renderAndOpenDrawer(DrawerElement: ReactElement) {
   fireEvent.click(render(DrawerElement).getByText(TRIGGER_TEXT));
 }
 

packages/raystack/components/number-field/number-field.tsx

@@ -3,30 +3,24 @@
 import { NumberField as NumberFieldPrimitive } from '@base-ui/react';
 import { MinusIcon, PlusIcon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
-import {
-  createContext,
-  ElementRef,
-  forwardRef,
-  type ReactNode,
-  useContext,
-  useId
-} from 'react';
+import { type ComponentProps, createContext, useContext, useId } from 'react';
 import { Label } from '../label';
 import styles from './number-field.module.css';
 
 const NumberFieldContext = createContext<{ fieldId: string } | null>(null);
 
-const NumberFieldRoot = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.Root>,
-  NumberFieldPrimitive.Root.Props & { children?: ReactNode }
->(({ className, children, id, ...props }, ref) => {
+function NumberFieldRoot({
+  className,
+  children,
+  id,
+  ...props
+}: NumberFieldPrimitive.Root.Props) {
   const generatedId = useId();
   const fieldId = id ?? generatedId;
 
   return (
-    <NumberFieldContext.Provider value={{ fieldId }}>
+    <NumberFieldContext value={{ fieldId }}>
       <NumberFieldPrimitive.Root
-        ref={ref}
         className={cx(styles.root, className)}
         id={fieldId}
         {...props}
@@ -39,77 +33,83 @@ const NumberFieldRoot = forwardRef<
           </NumberFieldPrimitive.Group>
         )}
       </NumberFieldPrimitive.Root>
-    </NumberFieldContext.Provider>
+    </NumberFieldContext>
   );
-});
+}
 NumberFieldRoot.displayName = 'NumberField';
 
-const NumberFieldGroup = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.Group>,
-  NumberFieldPrimitive.Group.Props
->(({ className, ...props }, ref) => (
-  <NumberFieldPrimitive.Group
-    ref={ref}
-    className={cx(styles.group, className)}
-    {...props}
-  />
-));
+function NumberFieldGroup({
+  className,
+  ...props
+}: NumberFieldPrimitive.Group.Props) {
+  return (
+    <NumberFieldPrimitive.Group
+      className={cx(styles.group, className)}
+      {...props}
+    />
+  );
+}
 NumberFieldGroup.displayName = 'NumberField.Group';
 
-const NumberFieldInput = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.Input>,
-  NumberFieldPrimitive.Input.Props
->(({ className, ...props }, ref) => (
-  <NumberFieldPrimitive.Input
-    ref={ref}
-    className={cx(styles.input, className)}
-    {...props}
-  />
-));
+function NumberFieldInput({
+  className,
+  ...props
+}: NumberFieldPrimitive.Input.Props) {
+  return (
+    <NumberFieldPrimitive.Input
+      className={cx(styles.input, className)}
+      {...props}
+    />
+  );
+}
 NumberFieldInput.displayName = 'NumberField.Input';
 
-const NumberFieldDecrement = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.Decrement>,
-  NumberFieldPrimitive.Decrement.Props
->(({ className, children, ...props }, ref) => (
-  <NumberFieldPrimitive.Decrement
-    ref={ref}
-    className={cx(styles.decrement, className)}
-    {...props}
-  >
-    {children ?? <MinusIcon width={12} height={12} />}
-  </NumberFieldPrimitive.Decrement>
-));
+function NumberFieldDecrement({
+  className,
+  children,
+  ...props
+}: NumberFieldPrimitive.Decrement.Props) {
+  return (
+    <NumberFieldPrimitive.Decrement
+      className={cx(styles.decrement, className)}
+      {...props}
+    >
+      {children ?? <MinusIcon width={12} height={12} />}
+    </NumberFieldPrimitive.Decrement>
+  );
+}
 NumberFieldDecrement.displayName = 'NumberField.Decrement';
 
-const NumberFieldIncrement = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.Increment>,
-  NumberFieldPrimitive.Increment.Props
->(({ className, children, ...props }, ref) => (
-  <NumberFieldPrimitive.Increment
-    ref={ref}
-    className={cx(styles.increment, className)}
-    {...props}
-  >
-    {children ?? <PlusIcon width={12} height={12} />}
-  </NumberFieldPrimitive.Increment>
-));
+function NumberFieldIncrement({
+  className,
+  children,
+  ...props
+}: NumberFieldPrimitive.Increment.Props) {
+  return (
+    <NumberFieldPrimitive.Increment
+      className={cx(styles.increment, className)}
+      {...props}
+    >
+      {children ?? <PlusIcon width={12} height={12} />}
+    </NumberFieldPrimitive.Increment>
+  );
+}
 NumberFieldIncrement.displayName = 'NumberField.Increment';
 
 export interface NumberFieldScrubAreaProps
   extends NumberFieldPrimitive.ScrubArea.Props {
   label: string;
 }
 
-const NumberFieldScrubArea = forwardRef<
-  ElementRef<typeof NumberFieldPrimitive.ScrubArea>,
-  NumberFieldScrubAreaProps
->(({ className, label, ...props }, ref) => {
+function NumberFieldScrubArea({
+  className,
+  label,
+  ...props
+}: NumberFieldScrubAreaProps) {
   const context = useContext(NumberFieldContext);
 
   return (
     <NumberFieldPrimitive.ScrubArea
-      ref={ref}
       className={cx(styles['scrub-area'], className)}
       {...props}
     >
@@ -123,10 +123,10 @@ const NumberFieldScrubArea = forwardRef<
       </NumberFieldPrimitive.ScrubAreaCursor>
     </NumberFieldPrimitive.ScrubArea>
   );
-});
+}
 NumberFieldScrubArea.displayName = 'NumberField.ScrubArea';
 
-function CursorGrowIcon(props: React.ComponentProps<'svg'>) {
+function CursorGrowIcon(props: ComponentProps<'svg'>) {
   return (
     <svg
       aria-hidden='true'

packages/raystack/components/popover/__tests__/popover.test.tsx

@@ -1,7 +1,8 @@
 import { Popover as PopoverPrimitive } from '@base-ui/react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+
+import { type ReactElement } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { Button } from '~/components/button';
 import { Popover } from '../popover';
@@ -22,7 +23,7 @@ const BasicPopover = ({
   </Popover>
 );
 
-async function renderAndOpenPopover(PopoverElement: React.ReactElement) {
+async function renderAndOpenPopover(PopoverElement: ReactElement) {
   fireEvent.click(render(PopoverElement).getByText(TRIGGER_TEXT));
 }