Skip to content

Commit 9dc29f3

Browse files
snowystingerLFDanLu
snowystinger
and
LFDanLu
authored
TS Strict Dialog (#5545)
* TS Strict Dialog * fix lint * remove ts-ignore * Add types package --------- Co-authored-by: Daniel Lu <dl1644@gmail.com>
1 parent 747fa94 commit 9dc29f3

File tree

11 files changed

+52
-23
lines changed

11 files changed

+52
-23
lines changed

‎packages/@react-aria/dialog/src/useDialog.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export interface DialogAria {
3131
*/
3232
export function useDialog(props: AriaDialogProps, ref: RefObject<FocusableElement>): DialogAria {
3333
let {role = 'dialog'} = props;
34-
let titleId = useSlotId();
34+
let titleId: string | undefined = useSlotId();
3535
titleId = props['aria-label'] ? undefined : titleId;
3636

3737
let isRefocusing = useRef(false);
@@ -47,8 +47,10 @@ export function useDialog(props: AriaDialogProps, ref: RefObject<FocusableElemen
4747
let timeout = setTimeout(() => {
4848
if (document.activeElement === ref.current) {
4949
isRefocusing.current = true;
50-
ref.current.blur();
51-
focusSafely(ref.current);
50+
if (ref.current) {
51+
ref.current.blur();
52+
focusSafely(ref.current);
53+
}
5254
isRefocusing.current = false;
5355
}
5456
}, 500);

‎packages/@react-spectrum/dialog/chromatic/Dialog.chromatic.tsx

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {ActionButton, Button} from '@react-spectrum/button';
1414
import {ButtonGroup} from '@react-spectrum/buttongroup';
1515
import {Checkbox} from '@react-spectrum/checkbox';
1616
import {Content, Footer, Header} from '@react-spectrum/view';
17-
import {Dialog, DialogTrigger} from '../';
17+
import {Dialog, DialogTrigger, SpectrumDialogProps} from '../';
1818
import {Divider} from '@react-spectrum/divider';
1919
import {Flex} from '@react-spectrum/layout';
2020
import {Form} from '@react-spectrum/form';
@@ -255,14 +255,19 @@ MobileTypeTrayPopover.story = {
255255
chromaticProvider: {colorSchemes: ['light'], locales: ['ar-AE'], scales: ['large'], disableAnimations: true}
256256
}
257257
};
258-
259-
function render({width = 'auto', isDismissable = undefined, ...props}) {
258+
type RenderProps = Omit<SpectrumDialogProps & {isDismissable?: boolean, width?: string}, 'children'>;
259+
function render(props: RenderProps) {
260+
let {
261+
width = 'auto',
262+
isDismissable,
263+
...otherProps
264+
} = props;
260265
return (
261266
<div style={{display: 'flex', width, margin: '100px 0'}}>
262267
<DialogTrigger isDismissable={isDismissable} defaultOpen>
263268
<ActionButton>Trigger</ActionButton>
264269
{(close) => (
265-
<Dialog {...props}>
270+
<Dialog {...otherProps}>
266271
<Heading>The Heading</Heading>
267272
<Header>The Header</Header>
268273
<Divider />
@@ -302,13 +307,18 @@ export function renderTriggerProps({width = 'auto', isDismissable = undefined, .
302307
);
303308
}
304309

305-
function renderHero({width = 'auto', isDismissable = undefined, ...props}) {
310+
function renderHero(props: RenderProps) {
311+
let {
312+
width = 'auto',
313+
isDismissable,
314+
...otherProps
315+
} = props;
306316
return (
307317
<div style={{display: 'flex', width, margin: '100px 0'}}>
308318
<DialogTrigger isDismissable={isDismissable} defaultOpen>
309319
<ActionButton>Trigger</ActionButton>
310320
{(close) => (
311-
<Dialog {...props}>
321+
<Dialog {...otherProps}>
312322
<Image slot="hero" alt="" src="https://i.imgur.com/Z7AzH2c.png" objectFit="cover" />
313323
<Heading>The Heading</Heading>
314324
<Header>The Header</Header>

‎packages/@react-spectrum/dialog/src/Dialog.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ function Dialog(props: SpectrumDialogProps, ref: DOMRef) {
6060
size = type === 'popover' ? (size || 'S') : (size || 'L');
6161

6262
let domRef = useDOMRef(ref);
63-
let gridRef = useRef();
63+
let gridRef = useRef(null);
6464
let sizeVariant = sizeMap[type] || sizeMap[size];
6565
let {dialogProps, titleProps} = useDialog(mergeProps(contextProps, props), domRef);
6666

‎packages/@react-spectrum/dialog/src/DialogContainer.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export function DialogContainer(props: SpectrumDialogContainerProps) {
3939

4040
// React.Children.toArray mutates the children, and we need them to be stable
4141
// between renders so that the lastChild comparison works.
42-
let child = null;
42+
let child: ReactElement | undefined = undefined;
4343
if (Array.isArray(children)) {
4444
child = children.find(React.isValidElement);
4545
} else if (React.isValidElement(children)) {

‎packages/@react-spectrum/dialog/src/DialogTrigger.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ let _DialogTrigger = DialogTrigger as (props: SpectrumDialogTriggerProps) => JSX
144144
export {_DialogTrigger as DialogTrigger};
145145

146146
function PopoverTrigger({state, targetRef, trigger, content, hideArrow, ...props}) {
147-
let triggerRef = useRef<HTMLElement>();
147+
let triggerRef = useRef<HTMLElement>(null);
148148
let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state, triggerRef);
149149

150150
let triggerPropsWithRef = {
@@ -179,7 +179,7 @@ interface SpectrumDialogTriggerBase {
179179
isDismissable?: boolean,
180180
dialogProps?: SpectrumDialogProps | {},
181181
triggerProps?: any,
182-
overlay: ReactElement,
182+
overlay?: ReactElement,
183183
trigger: ReactElement
184184
}
185185

‎packages/@react-spectrum/dialog/src/context.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,4 @@ export interface DialogContextValue extends HTMLAttributes<HTMLElement> {
1818
onClose: () => void
1919
}
2020

21-
export const DialogContext = React.createContext<DialogContextValue>(null);
21+
export const DialogContext = React.createContext<DialogContextValue | null>(null);

‎packages/@react-spectrum/dialog/src/useDialogContainer.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function useDialogContainer(): DialogContainerValue {
2727
return {
2828
type: context.type,
2929
dismiss() {
30-
context.onClose();
30+
context?.onClose();
3131
}
3232
};
3333
}

‎packages/@react-spectrum/dialog/stories/Dialog.stories.tsx

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {ActionButton, Button} from '@react-spectrum/button';
1414
import {ButtonGroup} from '@react-spectrum/buttongroup';
1515
import {Checkbox} from '@react-spectrum/checkbox';
1616
import {Content, Footer, Header} from '@react-spectrum/view';
17-
import {Dialog, DialogTrigger} from '../';
17+
import {Dialog, DialogTrigger, SpectrumDialogProps} from '../';
1818
import {Divider} from '@react-spectrum/divider';
1919
import {Flex} from '@react-spectrum/layout';
2020
import {Form} from '@react-spectrum/form';
@@ -129,13 +129,21 @@ WithIframe.story = {
129129

130130
export const HorizontalScrolling = () => renderHorizontalScrolling({});
131131

132-
function render({width = 'auto', isDismissable = undefined, ...props}) {
132+
133+
type RenderProps = Omit<SpectrumDialogProps & {isDismissable?: boolean, width?: string}, 'children'>;
134+
135+
function render(props: RenderProps) {
136+
let {
137+
width = 'auto',
138+
isDismissable,
139+
...otherProps
140+
} = props;
133141
return (
134142
<div style={{display: 'flex', width, margin: '100px 0'}}>
135143
<DialogTrigger isDismissable={isDismissable} defaultOpen>
136144
<ActionButton>Trigger</ActionButton>
137145
{(close) => (
138-
<Dialog {...props}>
146+
<Dialog {...otherProps}>
139147
<Heading>The Heading</Heading>
140148
<Header>The Header</Header>
141149
<Divider />
@@ -177,13 +185,18 @@ function renderIframe({width = 'auto', isDismissable = undefined, ...props}) {
177185
);
178186
}
179187

180-
function renderHero({width = 'auto', isDismissable = undefined, ...props}) {
188+
function renderHero(props: RenderProps) {
189+
let {
190+
width = 'auto',
191+
isDismissable,
192+
...otherProps
193+
} = props;
181194
return (
182195
<div style={{display: 'flex', width, margin: '100px 0'}}>
183196
<DialogTrigger isDismissable={isDismissable} defaultOpen>
184197
<ActionButton>Trigger</ActionButton>
185198
{(close) => (
186-
<Dialog {...props}>
199+
<Dialog {...otherProps}>
187200
<Image slot="hero" alt="" src="https://i.imgur.com/Z7AzH2c.png" objectFit="cover" />
188201
<Heading>The Heading</Heading>
189202
<Header>The Header</Header>

‎packages/@react-spectrum/dialog/stories/DialogContainerExamples.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {Dialog, DialogContainer, useDialogContainer} from '../';
55
import {Divider} from '@react-spectrum/divider';
66
import {Heading, Text} from '@react-spectrum/text';
77
import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
8+
import {Key} from '@react-types/shared';
89
import React from 'react';
910

1011
export function DialogContainerExample(props) {
@@ -62,7 +63,7 @@ function ExampleDialog(props) {
6263
}
6364

6465
export function NestedDialogContainerExample() {
65-
let [dialog, setDialog] = React.useState(null);
66+
let [dialog, setDialog] = React.useState<Key | null>(null);
6667
let dismiss = () => setDialog(null);
6768

6869
return (

‎packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -583,7 +583,7 @@ function renderPopover(props, withMargin = true) {
583583
let {width = 'auto', buttonHeight, buttonWidth, ...otherProps} = props;
584584

585585
return (
586-
<div style={{display: 'flex', width, margin: withMargin && '100px 0'}}>
586+
<div style={{display: 'flex', width, margin: withMargin ? '100px 0' : undefined}}>
587587
<DialogTrigger {...otherProps} onOpenChange={action('open change')}>
588588
<ActionButton height={buttonHeight} width={buttonWidth}>Trigger</ActionButton>
589589
<Dialog>
@@ -599,7 +599,7 @@ function renderPopover(props, withMargin = true) {
599599

600600
let TriggerWithRef = (props) => {
601601
let {buttonHeight, buttonWidth, ...otherProps} = props;
602-
let ref = React.useRef();
602+
let ref = React.useRef(null);
603603
return (
604604
<div style={{display: 'flex'}}>
605605
<DialogTrigger {...otherProps} targetRef={ref} onOpenChange={action('open change')}>

0 commit comments

Comments
 (0)