feat: React 19 migration - 3

packages/raystack/components/copy-button/copy-button.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { CopyIcon } from '@radix-ui/react-icons';
-import { ElementRef, forwardRef, useState } from 'react';
+import { useState } from 'react';
 import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
 import { CheckCircleFilledIcon } from '~/icons';
 import { IconButton, IconButtonProps } from '../icon-button/icon-button';
@@ -12,10 +12,12 @@ export interface CopyButtonProps extends IconButtonProps {
   resetIcon?: boolean;
 }
 
-export const CopyButton = forwardRef<
-  ElementRef<typeof IconButton>,
-  CopyButtonProps
->(({ text, resetTimeout = 1000, resetIcon = true, ...props }, ref) => {
+export function CopyButton({
+  text,
+  resetTimeout = 1000,
+  resetIcon = true,
+  ...props
+}: CopyButtonProps) {
   const { copy } = useCopyToClipboard();
   const [isCopied, setIsCopied] = useState(false);
 
@@ -32,19 +34,14 @@ export const CopyButton = forwardRef<
   }
 
   return (
-    <IconButton
-      ref={ref}
-      {...props}
-      onClick={onCopy}
-      data-test-id='copy-button'
-    >
+    <IconButton {...props} onClick={onCopy} data-test-id='copy-button'>
       {isCopied ? (
         <CheckCircleFilledIcon color='var(--rs-color-foreground-success-primary)' />
       ) : (
         <CopyIcon />
       )}
     </IconButton>
   );
-});
+}
 
 CopyButton.displayName = 'CopyButton';

packages/raystack/components/data-table/components/content.tsx

@@ -286,3 +286,5 @@ export function Content({
     </div>
   );
 }
+
+Content.displayName = 'DataTable.Content';

packages/raystack/components/data-table/components/display-settings.tsx

@@ -9,8 +9,8 @@ import { Popover } from '../../popover';
 import styles from '../data-table.module.css';
 import {
   DataTableColumn,
-  SortOrdersValues,
-  defaultGroupOption
+  defaultGroupOption,
+  SortOrdersValues
 } from '../data-table.types';
 import { useDataTable } from '../hooks/useDataTable';
 import { DisplayProperties } from './display-properties';
@@ -124,3 +124,5 @@ export function DisplaySettings<TData, TValue>({
     </Popover>
   );
 }
+
+DisplaySettings.displayName = 'DataTable.DisplayControls';

packages/raystack/components/data-table/components/filters.tsx

@@ -166,3 +166,5 @@ export function Filters<TData, TValue>({
     </Flex>
   );
 }
+
+Filters.displayName = 'DataTable.Filters';

packages/raystack/components/data-table/components/search.tsx

@@ -1,64 +1,64 @@
 'use client';
 
-import { forwardRef } from 'react';
+import { ChangeEvent, type ComponentProps } from 'react';
 import { Search } from '../../search';
-import { SearchProps } from '../../search/search';
 import { useDataTable } from '../hooks/useDataTable';
 
-export interface DataTableSearchProps extends SearchProps {
+export interface DataTableSearchProps extends ComponentProps<typeof Search> {
   /**
    * Automatically disable search in zero state (when no data and no filters/search applied).
    * @defaultValue true
    */
   autoDisableInZeroState?: boolean;
 }
 
-export const TableSearch = forwardRef<HTMLInputElement, DataTableSearchProps>(
-  ({ autoDisableInZeroState = true, disabled, ...props }, ref) => {
-    const {
-      updateTableQuery,
-      tableQuery,
-      shouldShowFilters = false
-    } = useDataTable();
+export function TableSearch({
+  autoDisableInZeroState = true,
+  disabled,
+  ...props
+}: DataTableSearchProps) {
+  const {
+    updateTableQuery,
+    tableQuery,
+    shouldShowFilters = false
+  } = useDataTable();
 
-    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value;
-      updateTableQuery(query => {
-        return {
-          ...query,
-          search: value
-        };
-      });
-    };
+  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    updateTableQuery(query => {
+      return {
+        ...query,
+        search: value
+      };
+    });
+  };
 
-    const handleClear = () => {
-      updateTableQuery(query => {
-        return {
-          ...query,
-          search: ''
-        };
-      });
-    };
+  const handleClear = () => {
+    updateTableQuery(query => {
+      return {
+        ...query,
+        search: ''
+      };
+    });
+  };
 
-    // Auto-disable in zero state if enabled, but allow manual override
-    // Once search is applied, keep it enabled (even if shouldShowFilters is false)
-    const hasSearch = Boolean(
-      tableQuery?.search && tableQuery.search.trim() !== ''
-    );
-    const isDisabled =
-      disabled ?? (autoDisableInZeroState && !shouldShowFilters && !hasSearch);
+  // Auto-disable in zero state if enabled, but allow manual override
+  // Once search is applied, keep it enabled (even if shouldShowFilters is false)
+  const hasSearch = Boolean(
+    tableQuery?.search && tableQuery.search.trim() !== ''
+  );
+  const isDisabled =
+    disabled ?? (autoDisableInZeroState && !shouldShowFilters && !hasSearch);
 
-    return (
-      <Search
-        {...props}
-        ref={ref}
-        onChange={handleSearch}
-        value={tableQuery?.search}
-        onClear={handleClear}
-        disabled={isDisabled}
-      />
-    );
-  }
-);
+  return (
+    <Search
+      {...props}
+      onChange={handleSearch}
+      value={tableQuery?.search}
+      onClear={handleClear}
+      disabled={isDisabled}
+    />
+  );
+}
 
-TableSearch.displayName = 'TableSearch';
+TableSearch.displayName = 'DataTable.Search';

packages/raystack/components/data-table/components/toolbar.tsx

@@ -25,3 +25,5 @@ export function Toolbar<TData, TValue>({ className }: { className?: string }) {
     </Flex>
   );
 }
+
+Toolbar.displayName = 'DataTable.Toolbar';

packages/raystack/components/data-table/components/virtualized-content.tsx

@@ -377,3 +377,5 @@ export function VirtualizedContent({
     </div>
   );
 }
+
+VirtualizedContent.displayName = 'DataTable.VirtualizedContent';

packages/raystack/components/data-table/data-table.tsx

@@ -215,13 +215,11 @@ function DataTableRoot<TData, TValue>({
     stickyGroupHeader
   ]);
 
-  return (
-    <TableContext.Provider value={contextValue}>
-      {children}
-    </TableContext.Provider>
-  );
+  return <TableContext value={contextValue}>{children}</TableContext>;
 }
 
+DataTableRoot.displayName = 'DataTable';
+
 export const DataTable = Object.assign(DataTableRoot, {
   Content: Content,
   VirtualizedContent: VirtualizedContent,

packages/raystack/components/dialog/dialog-content.tsx

@@ -2,7 +2,6 @@
 
 import { Dialog as DialogPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef } from 'react';
 import styles from './dialog.module.css';
 import { CloseButton } from './dialog-misc';
 
@@ -17,51 +16,42 @@ export interface DialogContentProps extends DialogPrimitive.Popup.Props {
   showNestedAnimation?: boolean;
 }
 
-export const DialogContent = forwardRef<
-  ElementRef<typeof DialogPrimitive.Popup>,
-  DialogContentProps
->(
-  (
-    {
-      className,
-      children,
-      showCloseButton = true,
-      overlay,
-      width,
-      style,
-      showNestedAnimation = true,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <DialogPrimitive.Portal>
-        <DialogPrimitive.Backdrop
-          {...overlay}
+export function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  overlay,
+  width,
+  style,
+  showNestedAnimation = true,
+  ...props
+}: DialogContentProps) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Backdrop
+        {...overlay}
+        className={cx(
+          styles.dialogOverlay,
+          overlay?.blur && styles.overlayBlur,
+          overlay?.className
+        )}
+      />
+      <DialogPrimitive.Viewport className={styles.viewport}>
+        <DialogPrimitive.Popup
           className={cx(
-            styles.dialogOverlay,
-            overlay?.blur && styles.overlayBlur,
-            overlay?.className
+            styles.dialogContent,
+            showNestedAnimation && styles.showNestedAnimation,
+            className
           )}
-        />
-        <DialogPrimitive.Viewport className={styles.viewport}>
-          <DialogPrimitive.Popup
-            ref={ref}
-            className={cx(
-              styles.dialogContent,
-              showNestedAnimation && styles.showNestedAnimation,
-              className
-            )}
-            style={{ width, ...style }}
-            {...props}
-          >
-            {children}
-            {showCloseButton && <CloseButton className={styles.closeButton} />}
-          </DialogPrimitive.Popup>
-        </DialogPrimitive.Viewport>
-      </DialogPrimitive.Portal>
-    );
-  }
-);
+          style={{ width, ...style }}
+          {...props}
+        >
+          {children}
+          {showCloseButton && <CloseButton className={styles.closeButton} />}
+        </DialogPrimitive.Popup>
+      </DialogPrimitive.Viewport>
+    </DialogPrimitive.Portal>
+  );
+}
 
 DialogContent.displayName = 'Dialog.Content';