Skip to content

Commit dc883f7

Browse files
rohanchkrabrtyrohanchkrabrty
authored
feat: React 19 migration - 1 (#708)
* feat: migrate to React 19 * fix: breaking box test
1 parent c579d52 commit dc883f7

20 files changed

Lines changed: 470 additions & 569 deletions

‎packages/raystack/components/accordion/accordion-content.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,18 @@
22

33
import { Accordion as AccordionPrimitive } from '@base-ui/react';
44
import { cx } from 'class-variance-authority';
5-
import { ElementRef, forwardRef } from 'react';
65
import styles from './accordion.module.css';
76

8-
export const AccordionContent = forwardRef<
9-
ElementRef<typeof AccordionPrimitive.Panel>,
10-
AccordionPrimitive.Panel.Props
11-
>(({ className, children, ...props }, ref) => (
12-
<AccordionPrimitive.Panel
13-
ref={ref}
14-
className={styles['accordion-content']}
15-
{...props}
16-
>
7+
export const AccordionContent = ({
8+
className,
9+
children,
10+
...props
11+
}: AccordionPrimitive.Panel.Props) => (
12+
<AccordionPrimitive.Panel className={styles['accordion-content']} {...props}>
1713
<div className={cx(styles['accordion-content-inner'], className)}>
1814
{children}
1915
</div>
2016
</AccordionPrimitive.Panel>
21-
));
17+
);
2218

2319
AccordionContent.displayName = 'Accordion.Content';

‎packages/raystack/components/accordion/accordion-item.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,19 @@
22

33
import { Accordion as AccordionPrimitive } from '@base-ui/react';
44
import { cx } from 'class-variance-authority';
5-
import { ElementRef, forwardRef } from 'react';
65
import styles from './accordion.module.css';
76

8-
export const AccordionItem = forwardRef<
9-
ElementRef<typeof AccordionPrimitive.Item>,
10-
AccordionPrimitive.Item.Props
11-
>(({ className, children, ...props }, ref) => (
7+
export const AccordionItem = ({
8+
className,
9+
children,
10+
...props
11+
}: AccordionPrimitive.Item.Props) => (
1212
<AccordionPrimitive.Item
13-
ref={ref}
1413
className={cx(styles['accordion-item'], className)}
1514
{...props}
1615
>
1716
{children}
1817
</AccordionPrimitive.Item>
19-
));
18+
);
2019

2120
AccordionItem.displayName = 'Accordion.Item';

‎packages/raystack/components/accordion/accordion-root.tsx‎

Lines changed: 44 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import { Accordion as AccordionPrimitive } from '@base-ui/react';
44
import { cx } from 'class-variance-authority';
5-
import { ElementRef, forwardRef } from 'react';
65
import styles from './accordion.module.css';
76

87
type AccordionSingleProps = Omit<
@@ -27,61 +26,52 @@ type AccordionMultipleProps = Omit<
2726

2827
export type AccordionRootProps = AccordionSingleProps | AccordionMultipleProps;
2928

30-
export const AccordionRoot = forwardRef<
31-
ElementRef<typeof AccordionPrimitive.Root>,
32-
AccordionRootProps
33-
>(
34-
(
35-
{
36-
className,
37-
multiple = false,
38-
value,
39-
defaultValue,
40-
onValueChange,
41-
...rest
42-
},
43-
ref
44-
) => {
45-
// Convert value to array format for Base UI
46-
const baseValue = value
47-
? Array.isArray(value)
48-
? value
49-
: [value]
50-
: undefined;
29+
export const AccordionRoot = ({
30+
className,
31+
multiple = false,
32+
value,
33+
defaultValue,
34+
onValueChange,
35+
...rest
36+
}: AccordionRootProps) => {
37+
// Convert value to array format for Base UI
38+
const baseValue = value
39+
? Array.isArray(value)
40+
? value
41+
: [value]
42+
: undefined;
5143

52-
const baseDefaultValue = defaultValue
53-
? Array.isArray(defaultValue)
54-
? defaultValue
55-
: [defaultValue]
56-
: undefined;
44+
const baseDefaultValue = defaultValue
45+
? Array.isArray(defaultValue)
46+
? defaultValue
47+
: [defaultValue]
48+
: undefined;
5749

58-
const handleValueChange = (
59-
newValue: string[],
60-
eventDetails: AccordionPrimitive.Root.ChangeEventDetails
61-
) => {
62-
if (onValueChange) {
63-
if (multiple) {
64-
(onValueChange as (value: string[]) => void)(newValue);
65-
} else {
66-
(onValueChange as (value: string | undefined) => void)(
67-
newValue[0] || undefined
68-
);
69-
}
50+
const handleValueChange = (
51+
newValue: string[],
52+
eventDetails: AccordionPrimitive.Root.ChangeEventDetails
53+
) => {
54+
if (onValueChange) {
55+
if (multiple) {
56+
(onValueChange as (value: string[]) => void)(newValue);
57+
} else {
58+
(onValueChange as (value: string | undefined) => void)(
59+
newValue[0] || undefined
60+
);
7061
}
71-
};
62+
}
63+
};
7264

73-
return (
74-
<AccordionPrimitive.Root
75-
ref={ref}
76-
className={cx(styles.accordion, className)}
77-
multiple={multiple}
78-
value={baseValue}
79-
defaultValue={baseDefaultValue}
80-
onValueChange={handleValueChange}
81-
{...rest}
82-
/>
83-
);
84-
}
85-
);
65+
return (
66+
<AccordionPrimitive.Root
67+
className={cx(styles.accordion, className)}
68+
multiple={multiple}
69+
value={baseValue}
70+
defaultValue={baseDefaultValue}
71+
onValueChange={handleValueChange}
72+
{...rest}
73+
/>
74+
);
75+
};
8676

87-
AccordionRoot.displayName = 'Accordion.Root';
77+
AccordionRoot.displayName = 'Accordion';

‎packages/raystack/components/accordion/accordion-trigger.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,22 @@
33
import { Accordion as AccordionPrimitive } from '@base-ui/react';
44
import { ChevronDownIcon } from '@radix-ui/react-icons';
55
import { cx } from 'class-variance-authority';
6-
import { ElementRef, forwardRef } from 'react';
76
import styles from './accordion.module.css';
87

9-
export const AccordionTrigger = forwardRef<
10-
ElementRef<typeof AccordionPrimitive.Trigger>,
11-
AccordionPrimitive.Trigger.Props
12-
>(({ className, children, ...props }, ref) => (
8+
export const AccordionTrigger = ({
9+
className,
10+
children,
11+
...props
12+
}: AccordionPrimitive.Trigger.Props) => (
1313
<AccordionPrimitive.Header className={styles['accordion-header']}>
1414
<AccordionPrimitive.Trigger
15-
ref={ref}
1615
className={cx(styles['accordion-trigger'], className)}
1716
{...props}
1817
>
1918
{children}
2019
<ChevronDownIcon className={styles['accordion-icon']} />
2120
</AccordionPrimitive.Trigger>
2221
</AccordionPrimitive.Header>
23-
));
22+
);
2423

2524
AccordionTrigger.displayName = 'Accordion.Trigger';

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

Lines changed: 35 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react';
44
import { cx } from 'class-variance-authority';
5-
import { type ElementRef, forwardRef } from 'react';
65
import styles from '../dialog/dialog.module.css';
76
import { CloseButton } from './alert-dialog-misc';
87

@@ -18,51 +17,42 @@ export interface AlertDialogContentProps
1817
showNestedAnimation?: boolean;
1918
}
2019

21-
export const AlertDialogContent = forwardRef<
22-
ElementRef<typeof AlertDialogPrimitive.Popup>,
23-
AlertDialogContentProps
24-
>(
25-
(
26-
{
27-
className,
28-
children,
29-
showCloseButton = true,
30-
overlay,
31-
width,
32-
style,
33-
showNestedAnimation = true,
34-
...props
35-
},
36-
ref
37-
) => {
38-
return (
39-
<AlertDialogPrimitive.Portal>
40-
<AlertDialogPrimitive.Backdrop
41-
{...overlay}
20+
export const AlertDialogContent = ({
21+
className,
22+
children,
23+
showCloseButton = true,
24+
overlay,
25+
width,
26+
style,
27+
showNestedAnimation = true,
28+
...props
29+
}: AlertDialogContentProps) => {
30+
return (
31+
<AlertDialogPrimitive.Portal>
32+
<AlertDialogPrimitive.Backdrop
33+
{...overlay}
34+
className={cx(
35+
styles.dialogOverlay,
36+
overlay?.blur && styles.overlayBlur,
37+
overlay?.className
38+
)}
39+
/>
40+
<AlertDialogPrimitive.Viewport className={styles.viewport}>
41+
<AlertDialogPrimitive.Popup
4242
className={cx(
43-
styles.dialogOverlay,
44-
overlay?.blur && styles.overlayBlur,
45-
overlay?.className
43+
styles.dialogContent,
44+
showNestedAnimation && styles.showNestedAnimation,
45+
className
4646
)}
47-
/>
48-
<AlertDialogPrimitive.Viewport className={styles.viewport}>
49-
<AlertDialogPrimitive.Popup
50-
ref={ref}
51-
className={cx(
52-
styles.dialogContent,
53-
showNestedAnimation && styles.showNestedAnimation,
54-
className
55-
)}
56-
style={{ width, ...style }}
57-
{...props}
58-
>
59-
{children}
60-
{showCloseButton && <CloseButton className={styles.closeButton} />}
61-
</AlertDialogPrimitive.Popup>
62-
</AlertDialogPrimitive.Viewport>
63-
</AlertDialogPrimitive.Portal>
64-
);
65-
}
66-
);
47+
style={{ width, ...style }}
48+
{...props}
49+
>
50+
{children}
51+
{showCloseButton && <CloseButton className={styles.closeButton} />}
52+
</AlertDialogPrimitive.Popup>
53+
</AlertDialogPrimitive.Viewport>
54+
</AlertDialogPrimitive.Portal>
55+
);
56+
};
6757

6858
AlertDialogContent.displayName = 'AlertDialog.Content';

0 commit comments

Comments
 (0)