rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: update all dependencies (#699)

Browse Source
This commit is contained in:
Mo
2021-10-22 14:47:41 -05:00
committed by GitHub
parent fcc22ffb78
commit 413fe47828
38 changed files with 2767 additions and 4029 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/assets/javascripts/components/AccountMenu/Authentication.tsx
View File

@@ -45,7 +45,7 @@ const Authentication = observer(({ application, appState }: Props) => {
useEffect(() => {
if (isEmailFocused) {
emailInputRef.current.focus();
emailInputRef.current!.focus();
setIsEmailFocused(false);
}
}, [isEmailFocused]);
@@ -64,9 +64,9 @@ const Authentication = observer(({ application, appState }: Props) => {
application.setCustomHost(value);
};
const emailInputRef = useRef<HTMLInputElement>();
const passwordInputRef = useRef<HTMLInputElement>();
const passwordConfirmationInputRef = useRef<HTMLInputElement>();
const emailInputRef = useRef<HTMLInputElement>(null);
const passwordInputRef = useRef<HTMLInputElement>(null);
const passwordConfirmationInputRef = useRef<HTMLInputElement>(null);
const handleSignInClick = () => {
setShowSignIn(true);
@@ -79,8 +79,8 @@ const Authentication = observer(({ application, appState }: Props) => {
};
const blurAuthFields = () => {
emailInputRef.current.blur();
passwordInputRef.current.blur();
emailInputRef.current!.blur();
passwordInputRef.current!.blur();
passwordConfirmationInputRef.current?.blur();
};
@@ -277,7 +277,7 @@ const Authentication = observer(({ application, appState }: Props) => {
onKeyDown={handleKeyPressKeyDown}
value={passwordConfirmation}
onChange={handlePasswordConfirmationChange}
ref={passwordConfirmationInputRef}
ref={passwordConfirmationInputRef!}
/>
)}
<div className="sk-panel-row" />

6
app/assets/javascripts/components/AccountMenu/ConfirmPassword.tsx
View File

@@ -29,7 +29,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
const [isEphemeral, setIsEphemeral] = useState(false);
const [shouldMergeLocal, setShouldMergeLocal] = useState(true);
const passwordInputRef = useRef<HTMLInputElement>();
const passwordInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
passwordInputRef?.current?.focus();
@@ -59,7 +59,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
e.preventDefault();
if (!password) {
passwordInputRef?.current.focus();
passwordInputRef?.current!.focus();
return;
}
@@ -89,7 +89,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
.alert(STRING_NON_MATCHING_PASSWORDS)
.finally(() => {
setConfirmPassword('');
passwordInputRef?.current.focus();
passwordInputRef?.current!.focus();
});
}
};

10
app/assets/javascripts/components/AccountMenu/CreateAccount.tsx
View File

@@ -31,12 +31,12 @@ export const CreateAccount: FunctionComponent<Props> = observer(
}) => {
const [showPassword, setShowPassword] = useState(false);
const emailInputRef = useRef<HTMLInputElement>();
const passwordInputRef = useRef<HTMLInputElement>();
const emailInputRef = useRef<HTMLInputElement>(null);
const passwordInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (emailInputRef.current) {
emailInputRef.current.focus();
emailInputRef.current!.focus();
}
}, []);
@@ -62,12 +62,12 @@ export const CreateAccount: FunctionComponent<Props> = observer(
e.preventDefault();
if (!email || email.length === 0) {
emailInputRef?.current.focus();
emailInputRef?.current!.focus();
return;
}
if (!password || password.length === 0) {
passwordInputRef?.current.focus();
passwordInputRef?.current!.focus();
return;
}

2
app/assets/javascripts/components/AccountMenu/DataBackup.tsx
View File

@@ -24,7 +24,7 @@ const DataBackup = observer(({
appState
}: Props) => {
const fileInputRef = useRef<HTMLInputElement | null>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const [isImportDataLoading, setIsImportDataLoading] = useState(false);
const { isBackupEncrypted, isEncryptionEnabled, setIsBackupEncrypted } = appState.accountMenu;

4
app/assets/javascripts/components/AccountMenu/PasscodeLock.tsx
View File

@@ -30,7 +30,7 @@ const PasscodeLock = observer(({
const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } = appState.accountMenu;
const passcodeInputRef = useRef<HTMLInputElement>();
const passcodeInputRef = useRef<HTMLInputElement>(null);
const [passcode, setPasscode] = useState<string | undefined>(undefined);
const [passcodeConfirmation, setPasscodeConfirmation] = useState<string | undefined>(undefined);
@@ -155,7 +155,7 @@ const PasscodeLock = observer(({
useEffect(() => {
if (isPasscodeFocused) {
passcodeInputRef.current.focus();
passcodeInputRef.current!.focus();
setIsPasscodeFocused(false);
}
}, [isPasscodeFocused]);

16
app/assets/javascripts/components/AccountMenu/SignIn.tsx
View File

@@ -29,12 +29,12 @@ export const SignInPane: FunctionComponent<Props> = observer(
const [showPassword, setShowPassword] = useState(false);
const [shouldMergeLocal, setShouldMergeLocal] = useState(true);
const emailInputRef = useRef<HTMLInputElement>();
const passwordInputRef = useRef<HTMLInputElement>();
const emailInputRef = useRef<HTMLInputElement>(null);
const passwordInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (emailInputRef?.current) {
emailInputRef.current.focus();
emailInputRef.current!.focus();
}
}, []);
@@ -73,8 +73,8 @@ export const SignInPane: FunctionComponent<Props> = observer(
const signIn = () => {
setIsSigningIn(true);
emailInputRef?.current.blur();
passwordInputRef?.current.blur();
emailInputRef?.current!.blur();
passwordInputRef?.current!.blur();
application
.signIn(email, password, isStrictSignin, isEphemeral, shouldMergeLocal)
@@ -92,7 +92,7 @@ export const SignInPane: FunctionComponent<Props> = observer(
application.alertService.alert(err);
}
setPassword('');
passwordInputRef?.current.blur();
passwordInputRef?.current!.blur();
})
.finally(() => {
setIsSigningIn(false);
@@ -109,12 +109,12 @@ export const SignInPane: FunctionComponent<Props> = observer(
e.preventDefault();
if (!email || email.length === 0) {
emailInputRef?.current.focus();
emailInputRef?.current!.focus();
return;
}
if (!password || password.length === 0) {
passwordInputRef?.current.focus();
passwordInputRef?.current!.focus();
return;
}

4
app/assets/javascripts/components/AutocompleteTagHint.tsx
View File

@@ -12,7 +12,7 @@ export const AutocompleteTagHint = observer(
({ appState, closeOnBlur }: Props) => {
const { autocompleteTagHintFocused } = appState.noteTags;
const hintRef = useRef<HTMLButtonElement>();
const hintRef = useRef<HTMLButtonElement>(null);
const { autocompleteSearchQuery, autocompleteTagResults } =
appState.noteTags;
@@ -45,7 +45,7 @@ export const AutocompleteTagHint = observer(
useEffect(() => {
if (autocompleteTagHintFocused) {
hintRef.current.focus();
hintRef.current!.focus();
}
}, [appState.noteTags, autocompleteTagHintFocused]);

10
app/assets/javascripts/components/AutocompleteTagInput.tsx
View File

@@ -25,17 +25,17 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
const [dropdownMaxHeight, setDropdownMaxHeight] =
useState<number | 'auto'>('auto');
const containerRef = useRef<HTMLDivElement>();
const inputRef = useRef<HTMLInputElement>();
const containerRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLInputElement>(null);
const [closeOnBlur] = useCloseOnBlur(containerRef, (visible: boolean) => {
const [closeOnBlur] = useCloseOnBlur(containerRef as any, (visible: boolean) => {
setDropdownVisible(visible);
appState.noteTags.clearAutocompleteSearch();
});
const showDropdown = () => {
const { clientHeight } = document.documentElement;
const inputRect = inputRef.current.getBoundingClientRect();
const inputRect = inputRef.current!.getBoundingClientRect();
setDropdownMaxHeight(clientHeight - inputRect.bottom - 32 * 2);
setDropdownVisible(true);
};
@@ -93,7 +93,7 @@ export const AutocompleteTagInput = observer(({ appState }: Props) => {
useEffect(() => {
if (autocompleteInputFocused) {
inputRef.current.focus();
inputRef.current!.focus();
}
}, [appState.noteTags, autocompleteInputFocused]);

4
app/assets/javascripts/components/AutocompleteTagResult.tsx
View File

@@ -19,7 +19,7 @@ export const AutocompleteTagResult = observer(
focusedTagResultUuid,
} = appState.noteTags;
const tagResultRef = useRef<HTMLButtonElement>();
const tagResultRef = useRef<HTMLButtonElement>(null);
const onTagOptionClick = async (tag: SNTag) => {
await appState.noteTags.addTagToActiveNote(tag);
@@ -68,7 +68,7 @@ export const AutocompleteTagResult = observer(
useEffect(() => {
if (focusedTagResultUuid === tagResult.uuid) {
tagResultRef.current.focus();
tagResultRef.current!.focus();
appState.noteTags.setFocusedTagResultUuid(undefined);
}
}, [appState.noteTags, focusedTagResultUuid, tagResult]);

2
app/assets/javascripts/components/ConfirmSignoutModal.tsx
View File

@@ -25,7 +25,7 @@ export const ConfirmSignoutContainer = observer((props: Props) => {
const ConfirmSignoutModal = observer(({ application, appState }: Props) => {
const [deleteLocalBackups, setDeleteLocalBackups] = useState(false);
const cancelRef = useRef<HTMLButtonElement>();
const cancelRef = useRef<HTMLButtonElement>(null);
function closeDialog() {
appState.accountMenu.setSigningOut(false);
}

2
app/assets/javascripts/components/ConfirmationDialog.tsx
View File

@@ -9,7 +9,7 @@ import { useRef } from 'preact/hooks';
export const ConfirmationDialog: FunctionComponent<{
title: string | ComponentChildren;
}> = ({ title, children }) => {
const ldRef = useRef<HTMLButtonElement>();
const ldRef = useRef<HTMLButtonElement>(null);
return (
<AlertDialog leastDestructiveRef={ldRef}>

2
app/assets/javascripts/components/FloatingLabelInput.tsx
View File

@@ -29,7 +29,7 @@ export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(
className = '',
labelClassName = '',
inputClassName = '',
},
}: Props,
ref: Ref<HTMLInputElement>
) => {
const [focused, setFocused] = useState(false);

2
app/assets/javascripts/components/InputWithIcon.tsx
View File

@@ -42,7 +42,7 @@ export const InputWithIcon: FunctionComponent<Props> = forwardRef(
disabled,
toggle,
placeholder,
},
}: Props,
ref: Ref<HTMLInputElement>
) => {
const handleToggle = () => {

6
app/assets/javascripts/components/NoteTag.tsx
View File

@@ -14,9 +14,9 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
const [showDeleteButton, setShowDeleteButton] = useState(false);
const [tagClicked, setTagClicked] = useState(false);
const deleteTagRef = useRef<HTMLButtonElement>();
const deleteTagRef = useRef<HTMLButtonElement>(null);
const tagRef = useRef<HTMLButtonElement>();
const tagRef = useRef<HTMLButtonElement>(null);
const deleteTag = () => {
appState.noteTags.focusPreviousTag(tag);
@@ -84,7 +84,7 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
useEffect(() => {
if (focusedTagUuid === tag.uuid) {
tagRef.current.focus();
tagRef.current!.focus();
}
}, [appState.noteTags, focusedTagUuid, tag]);

6
app/assets/javascripts/components/NotesContextMenu.tsx
View File

@@ -17,14 +17,14 @@ const NotesContextMenu = observer(({ application, appState }: Props) => {
contextMenuMaxHeight,
} = appState.notes;
const contextMenuRef = useRef<HTMLDivElement>();
const contextMenuRef = useRef<HTMLDivElement>(null);
const [closeOnBlur] = useCloseOnBlur(
contextMenuRef,
contextMenuRef as any,
(open: boolean) => appState.notes.setContextMenuOpen(open)
);
useCloseOnClickOutside(
contextMenuRef,
contextMenuRef as any,
(open: boolean) => appState.notes.setContextMenuOpen(open)
);

6
app/assets/javascripts/components/NotesOptions.tsx
View File

@@ -151,7 +151,7 @@ export const NotesOptions = observer(
const pinned = notes.some((note) => note.pinned);
const unpinned = notes.some((note) => !note.pinned);
const tagsButtonRef = useRef<HTMLButtonElement>();
const tagsButtonRef = useRef<HTMLButtonElement>(null);
const iconClass = 'color-neutral mr-2';
@@ -183,7 +183,7 @@ export const NotesOptions = observer(
).fontSize;
const maxTagsMenuSize = parseFloat(defaultFontSize) * 30;
const { clientWidth, clientHeight } = document.documentElement;
const buttonRect = tagsButtonRef.current.getBoundingClientRect();
const buttonRect = tagsButtonRef.current!.getBoundingClientRect();
const footerHeight = 32;
if (buttonRect.top + maxTagsMenuSize > clientHeight - footerHeight) {
@@ -289,7 +289,7 @@ export const NotesOptions = observer(
onKeyDown={(event) => {
if (event.key === 'Escape') {
setTagsMenuOpen(false);
tagsButtonRef.current.focus();
tagsButtonRef.current!.focus();
}
}}
style={{

10
app/assets/javascripts/components/NotesOptionsPanel.tsx
View File

@@ -24,9 +24,9 @@ export const NotesOptionsPanel = observer(({ application, appState }: Props) =>
right: 0,
});
const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto');
const buttonRef = useRef<HTMLButtonElement>();
const panelRef = useRef<HTMLDivElement>();
const [closeOnBlur] = useCloseOnBlur(panelRef, setOpen);
const buttonRef = useRef<HTMLButtonElement>(null);
const panelRef = useRef<HTMLDivElement>(null);
const [closeOnBlur] = useCloseOnBlur(panelRef as any, setOpen);
const [submenuOpen, setSubmenuOpen] = useState(false);
const onSubmenuChange = (open: boolean) => {
@@ -37,7 +37,7 @@ export const NotesOptionsPanel = observer(({ application, appState }: Props) =>
<Disclosure
open={open}
onChange={() => {
const rect = buttonRef.current.getBoundingClientRect();
const rect = buttonRef.current!.getBoundingClientRect();
const { clientHeight } = document.documentElement;
const footerHeight = 32;
setMaxHeight(clientHeight - rect.bottom - footerHeight - 2);
@@ -65,7 +65,7 @@ export const NotesOptionsPanel = observer(({ application, appState }: Props) =>
onKeyDown={(event) => {
if (event.key === 'Escape' && !submenuOpen) {
setOpen(false);
buttonRef.current.focus();
buttonRef.current!.focus();
}
}}
ref={panelRef}

2
app/assets/javascripts/components/OtherSessionsSignOut.tsx
View File

@@ -23,7 +23,7 @@ export const OtherSessionsSignOutContainer = observer((props: Props) => {
const ConfirmOtherSessionsSignOut = observer(
({ application, appState }: Props) => {
const cancelRef = useRef<HTMLButtonElement>();
const cancelRef = useRef<HTMLButtonElement>(null);
function closeDialog() {
appState.accountMenu.setOtherSessionsSignOut(false);
}

26
app/assets/javascripts/components/QuickSettingsMenu.tsx
View File

@@ -79,11 +79,11 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
const [themesMenuPosition, setThemesMenuPosition] = useState({});
const [defaultThemeOn, setDefaultThemeOn] = useState(false);
const themesMenuRef = useRef<HTMLDivElement>();
const themesButtonRef = useRef<HTMLButtonElement>();
const prefsButtonRef = useRef<HTMLButtonElement>();
const quickSettingsMenuRef = useRef<HTMLDivElement>();
const defaultThemeButtonRef = useRef<HTMLButtonElement>();
const themesMenuRef = useRef<HTMLDivElement>(null);
const themesButtonRef = useRef<HTMLButtonElement>(null);
const prefsButtonRef = useRef<HTMLButtonElement>(null);
const quickSettingsMenuRef = useRef<HTMLDivElement>(null);
const defaultThemeButtonRef = useRef<HTMLButtonElement>(null);
const reloadThemes = useCallback(() => {
application.streamItems(ContentType.Theme, () => {
@@ -119,20 +119,20 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
useEffect(() => {
if (themesMenuOpen) {
defaultThemeButtonRef.current.focus();
defaultThemeButtonRef.current!.focus();
}
}, [themesMenuOpen]);
useEffect(() => {
prefsButtonRef.current.focus();
prefsButtonRef.current!.focus();
}, []);
const [closeOnBlur] = useCloseOnBlur(themesMenuRef, setThemesMenuOpen);
const [closeOnBlur] = useCloseOnBlur(themesMenuRef as any, setThemesMenuOpen);
const toggleThemesMenu = () => {
if (!themesMenuOpen) {
const themesButtonRect =
themesButtonRef.current.getBoundingClientRect();
themesButtonRef.current!.getBoundingClientRect();
setThemesMenuPosition({
left: themesButtonRect.right,
bottom:
@@ -155,7 +155,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
switch (event.key) {
case 'Escape':
setThemesMenuOpen(false);
themesButtonRef.current.focus();
themesButtonRef.current!.focus();
break;
case 'ArrowRight':
if (!themesMenuOpen) {
@@ -167,7 +167,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
const handleQuickSettingsKeyDown: JSXInternal.KeyboardEventHandler<HTMLDivElement> =
(event) => {
const items: NodeListOf<HTMLButtonElement> =
quickSettingsMenuRef.current.querySelectorAll(':scope > button');
quickSettingsMenuRef.current!.querySelectorAll(':scope > button');
const currentFocusedIndex = Array.from(items).findIndex(
(btn) => btn === document.activeElement
);
@@ -198,7 +198,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
const handlePanelKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (
event
) => {
const themes = themesMenuRef.current.querySelectorAll('button');
const themes = themesMenuRef.current!.querySelectorAll('button');
const currentFocusedIndex = Array.from(themes).findIndex(
(themeBtn) => themeBtn === document.activeElement
);
@@ -208,7 +208,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
case 'ArrowLeft':
event.stopPropagation();
setThemesMenuOpen(false);
themesButtonRef.current.focus();
themesButtonRef.current!.focus();
break;
case 'ArrowDown':
if (themes[currentFocusedIndex + 1]) {

8
app/assets/javascripts/components/SearchOptions.tsx
View File

@@ -33,9 +33,9 @@ const SearchOptions = observer(({ appState }: Props) => {
right: 0,
});
const [maxWidth, setMaxWidth] = useState<number | 'auto'>('auto');
const buttonRef = useRef<HTMLButtonElement>();
const panelRef = useRef<HTMLDivElement>();
const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(panelRef, setOpen);
const buttonRef = useRef<HTMLButtonElement>(null);
const panelRef = useRef<HTMLDivElement>(null);
const [closeOnBlur, setLockCloseOnBlur] = useCloseOnBlur(panelRef as any, setOpen);
async function toggleIncludeProtectedContents() {
setLockCloseOnBlur(true);
@@ -47,7 +47,7 @@ const SearchOptions = observer(({ appState }: Props) => {
}
const updateWidthAndPosition = () => {
const rect = buttonRef.current.getBoundingClientRect();
const rect = buttonRef.current!.getBoundingClientRect();
setMaxWidth(rect.right - 16);
setPosition({
top: rect.bottom,

2
app/assets/javascripts/components/SessionsModal.tsx
View File

@@ -109,7 +109,7 @@ const SessionsModal: FunctionComponent<{
const [confirmRevokingSessionUuid, setRevokingSessionUuid] = useState('');
const closeRevokeSessionAlert = () => setRevokingSessionUuid('');
const cancelRevokeRef = useRef<HTMLButtonElement>();
const cancelRevokeRef = useRef<HTMLButtonElement>(null);
const formatter = useMemo(
() =>

12
app/assets/javascripts/components/menu/Menu.tsx
View File

@@ -22,7 +22,7 @@ type MenuProps = {
export const Menu: FunctionComponent<MenuProps> = forwardRef(
(
{ children, className = '', style, a11yLabel, closeMenu },
{ children, className = '', style, a11yLabel, closeMenu }: MenuProps,
ref: Ref<HTMLMenuElement>
) => {
const [currentIndex, setCurrentIndex] = useState(0);
@@ -37,12 +37,12 @@ export const Menu: FunctionComponent<MenuProps> = forwardRef(
break;
case 'End':
setCurrentIndex(
menuItemRefs.current.length ? menuItemRefs.current.length - 1 : 0
menuItemRefs.current!.length ? menuItemRefs.current!.length - 1 : 0
);
break;
case 'ArrowDown':
setCurrentIndex((index) => {
if (index + 1 < menuItemRefs.current.length) {
if (index + 1 < menuItemRefs.current!.length) {
return index + 1;
} else {
return 0;
@@ -54,7 +54,7 @@ export const Menu: FunctionComponent<MenuProps> = forwardRef(
if (index - 1 > -1) {
return index - 1;
} else {
return menuItemRefs.current.length - 1;
return menuItemRefs.current!.length - 1;
}
});
break;
@@ -75,9 +75,9 @@ export const Menu: FunctionComponent<MenuProps> = forwardRef(
Array.from(instance.children).forEach((child) => {
if (
child.getAttribute('role')?.includes('menuitem') &&
!menuItemRefs.current.includes(child as HTMLButtonElement)
!menuItemRefs.current!.includes(child as HTMLButtonElement)
) {
menuItemRefs.current.push(child as HTMLButtonElement);
menuItemRefs.current!.push(child as HTMLButtonElement);
}
});
}

4
app/assets/javascripts/components/menu/MenuItem.tsx
View File

@@ -39,7 +39,7 @@ export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
icon,
iconClassName,
tabIndex,
},
}: MenuItemProps,
ref: Ref<HTMLButtonElement>
) => {
return type === MenuItemType.SwitchButton &&
@@ -90,7 +90,7 @@ type ListElementProps = {
};
export const MenuItemListElement: FunctionComponent<ListElementProps> =
forwardRef(({ children, isFirstMenuItem }, ref: Ref<HTMLLIElement>) => {
forwardRef(({ children, isFirstMenuItem }: ListElementProps, ref: Ref<HTMLLIElement>) => {
const child = children as VNode<unknown>;
return (

2
app/assets/javascripts/components/shared/ModalDialog.tsx
View File

@@ -8,7 +8,7 @@ import { useRef } from '@node_modules/preact/hooks';
import { IconButton } from '@/components/IconButton';
export const ModalDialog: FunctionComponent = ({ children }) => {
const ldRef = useRef<HTMLButtonElement>();
const ldRef = useRef<HTMLButtonElement>(null);
return (
<AlertDialog leastDestructiveRef={ldRef}>

2
app/assets/javascripts/components/utils.ts
View File

@@ -8,7 +8,7 @@ import { useEffect } from 'react';
* monitored.
*/
export function useCloseOnBlur(
container: { current: HTMLDivElement },
container: { current?: HTMLDivElement },
setOpen: (open: boolean) => void
): [
(event: { relatedTarget: EventTarget | null }) => void,