chore: update dependencies (#1543)

packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx

@@ -1,7 +1,7 @@
 import { WebApplication } from '@/Application/Application'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
-import { ChangeEventHandler, FunctionComponent, useCallback, useEffect, useState } from 'react'
+import { ChangeEventHandler, FunctionComponent, ReactNode, useCallback, useEffect, useState } from 'react'
 import Checkbox from '@/Components/Checkbox/Checkbox'
 import DecoratedInput from '@/Components/Input/DecoratedInput'
 import Icon from '@/Components/Icon/Icon'
@@ -12,6 +12,7 @@ type Props = {
   disabled?: boolean
   onPrivateWorkspaceChange?: (isPrivate: boolean, identifier?: string) => void
   onStrictSignInChange?: (isStrictSignIn: boolean) => void
+  children?: ReactNode
 }
 
 const AdvancedOptions: FunctionComponent<Props> = ({

packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx

@@ -2,7 +2,15 @@ import { STRING_NON_MATCHING_PASSWORDS } from '@/Constants/Strings'
 import { WebApplication } from '@/Application/Application'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react'
+import {
+  FormEventHandler,
+  FunctionComponent,
+  KeyboardEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import { AccountMenuPane } from './AccountMenuPane'
 import Button from '@/Components/Button/Button'
 import Checkbox from '@/Components/Checkbox/Checkbox'
@@ -50,7 +58,7 @@ const ConfirmPassword: FunctionComponent<Props> = ({
     setShouldMergeLocal(!shouldMergeLocal)
   }, [shouldMergeLocal])
 
-  const handleConfirmFormSubmit = useCallback(
+  const handleConfirmFormSubmit: FormEventHandler = useCallback(
     (e) => {
       e.preventDefault()
 

packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx

@@ -1,7 +1,15 @@
 import { WebApplication } from '@/Application/Application'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useRef, useState } from 'react'
+import {
+  FormEventHandler,
+  FunctionComponent,
+  KeyboardEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import { AccountMenuPane } from './AccountMenuPane'
 import Button from '@/Components/Button/Button'
 import DecoratedInput from '@/Components/Input/DecoratedInput'
@@ -54,7 +62,7 @@ const CreateAccount: FunctionComponent<Props> = ({
     [setPassword],
   )
 
-  const handleRegisterFormSubmit = useCallback(
+  const handleRegisterFormSubmit: FormEventHandler = useCallback(
     (e) => {
       e.preventDefault()
 

packages/web/src/javascripts/Components/DeallocateHandler/DeallocateHandler.tsx

@@ -1,9 +1,10 @@
 import { WebApplication } from '@/Application/Application'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'react'
+import { FunctionComponent, ReactNode } from 'react'
 
 type Props = {
   application: WebApplication
+  children?: ReactNode
 }
 
 const DeallocateHandler: FunctionComponent<Props> = ({ application, children }) => {

packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx

@@ -1,20 +1,28 @@
-import { FunctionComponent } from 'react'
+import { FunctionComponent, ReactNode } from 'react'
 
-export const Title: FunctionComponent = ({ children }) => (
+type ChildrenProp = {
+  children: ReactNode
+}
+
+export const Title: FunctionComponent<ChildrenProp> = ({ children }) => (
   <>
     <h2 className="m-0 mb-1 text-lg font-bold text-info md:text-base">{children}</h2>
   </>
 )
 
-export const Subtitle: FunctionComponent<{ className?: string }> = ({ children, className = '' }) => (
+type Props = {
+  className?: string
+} & ChildrenProp
+
+export const Subtitle: FunctionComponent<Props> = ({ children, className = '' }) => (
   <h4 className={`m-0 mb-1 text-sm font-medium ${className}`}>{children}</h4>
 )
 
-export const SubtitleLight: FunctionComponent<{ className?: string }> = ({ children, className = '' }) => (
+export const SubtitleLight: FunctionComponent<Props> = ({ children, className = '' }) => (
   <h4 className={`m-0 mb-1 text-sm font-normal ${className}`}>{children}</h4>
 )
 
-export const Text: FunctionComponent<{ className?: string }> = ({ children, className = '' }) => (
+export const Text: FunctionComponent<Props> = ({ children, className = '' }) => (
   <p className={`${className} text-sm md:text-xs`}>{children}</p>
 )
 

packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesGroup.tsx

@@ -1,6 +1,8 @@
-import { FunctionComponent } from 'react'
+import { FunctionComponent, ReactNode } from 'react'
 
-const PreferencesGroup: FunctionComponent = ({ children }) => (
+const PreferencesGroup: FunctionComponent<{
+  children: ReactNode
+}> = ({ children }) => (
   <div className="mb-3 flex flex-col rounded border border-solid border-border bg-default p-6">{children}</div>
 )
 

packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx

@@ -1,6 +1,6 @@
-import { FunctionComponent } from 'react'
+import { FunctionComponent, ReactNode } from 'react'
 
-const PreferencesPane: FunctionComponent = ({ children }) => (
+const PreferencesPane: FunctionComponent<{ children?: ReactNode }> = ({ children }) => (
   <div className="flex min-h-0 flex-grow flex-col overflow-y-auto text-foreground md:flex-row">
     <div className="flex flex-grow flex-col items-center px-3 py-6 md:px-0">
       <div className="flex flex-col md:w-125 md:max-w-125">

packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesSegment.tsx

@@ -1,6 +1,7 @@
-import { FunctionComponent } from 'react'
+import { FunctionComponent, ReactNode } from 'react'
 
 type Props = {
+  children: ReactNode
   classes?: string
 }
 const PreferencesSegment: FunctionComponent<Props> = ({ children, classes = '' }) => (

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryListItem.tsx

@@ -1,10 +1,11 @@
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
-import { FunctionComponent } from 'react'
+import { FunctionComponent, ReactNode } from 'react'
 import RadioIndicator from '../RadioIndicator/RadioIndicator'
 
 type HistoryListItemProps = {
   isSelected: boolean
   onClick: () => void
+  children?: ReactNode
 }
 
 const HistoryListItem: FunctionComponent<HistoryListItemProps> = ({ children, isSelected, onClick }) => {

packages/web/src/javascripts/Components/Shared/AccordionItem.tsx

@@ -1,10 +1,11 @@
-import { FunctionComponent, useRef, useState } from 'react'
+import { FunctionComponent, ReactNode, useRef, useState } from 'react'
 import { ArrowDownCheckmarkIcon } from '@standardnotes/icons'
 import { Title } from '@/Components/Preferences/PreferencesComponents/Content'
 
 type Props = {
   title: string | JSX.Element
   className?: string
+  children?: ReactNode
 }
 
 const AccordionItem: FunctionComponent<Props> = ({ title, className = '', children }) => {

packages/web/src/javascripts/Components/Shared/ModalDialogButtons.tsx

@@ -1,8 +1,9 @@
 import { classNames } from '@/Utils/ConcatenateClassNames'
-import { Fragment, FunctionComponent } from 'react'
+import { Fragment, FunctionComponent, ReactNode } from 'react'
 
 type Props = {
   className?: string
+  children?: ReactNode
 }
 
 const ModalDialogButtons: FunctionComponent<Props> = ({ children, className }) => (

packages/web/src/javascripts/Components/Shared/ModalDialogDescription.tsx

@@ -1,8 +1,9 @@
-import { FunctionComponent } from 'react'
+import { FunctionComponent, ReactNode } from 'react'
 import { AlertDialogDescription } from '@reach/alert-dialog'
 
 type Props = {
   className?: string
+  children?: ReactNode
 }
 
 const ModalDialogDescription: FunctionComponent<Props> = ({ children, className = '' }) => (

packages/web/src/javascripts/Components/Shared/ModalDialogLabel.tsx

@@ -7,6 +7,7 @@ type Props = {
   closeDialog: () => void
   className?: string
   headerButtons?: ReactNode
+  children?: ReactNode
 }
 
 const ModalDialogLabel: FunctionComponent<Props> = ({ children, closeDialog, className, headerButtons }) => (

packages/web/src/javascripts/Components/Tags/TagsListItem.tsx

@@ -116,7 +116,7 @@ export const TagsListItem: FunctionComponent<Props> = observer(({ tag, features,
     }
   }, [inputRef, isEditing])
 
-  const onSubtagInput = useCallback((e) => {
+  const onSubtagInput: FormEventHandler<HTMLInputElement> = useCallback((e) => {
     const value = (e.target as HTMLInputElement).value
     setSubtagTitle(value)
   }, [])