chore: update dependencies (#1543)

packages/web/package.json

@@ -25,56 +25,56 @@
   },
   "devDependencies": {
     "@babel/core": "*",
-    "@babel/plugin-transform-react-jsx": "^7.17.3",
+    "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@babel/preset-env": "*",
-    "@babel/preset-typescript": "^7.16.7",
+    "@babel/preset-typescript": "^7.18.6",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
-    "@types/jest": "^28.1.5",
-    "@types/react": "^17.0.42",
-    "@types/react-dom": "^18.0.5",
+    "@types/jest": "^29.0.2",
+    "@types/react": "^18.0.20",
+    "@types/react-dom": "^18.0.6",
     "@types/wicg-file-system-access": "^2020.9.5",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.10",
     "babel-loader": "^8.2.5",
     "circular-dependency-plugin": "^5.2.2",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "*",
-    "dotenv": "^16.0.0",
-    "eslint": "^8.21.0",
+    "dotenv": "^16.0.2",
+    "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^28.1.2",
     "jest-environment-jsdom": "^28.1.2",
     "lint-staged": ">=12",
-    "mini-css-extract-plugin": "^2.6.0",
+    "mini-css-extract-plugin": "^2.6.1",
     "node-sass": "*",
     "npm-check-updates": "*",
-    "postcss": "^8.4.14",
-    "postcss-loader": "^7.0.0",
+    "postcss": "^8.4.16",
+    "postcss-loader": "^7.0.1",
     "prettier": "*",
-    "prettier-plugin-tailwindcss": "^0.1.11",
+    "prettier-plugin-tailwindcss": "^0.1.13",
     "react-refresh": "^0.14.0",
     "sass-loader": "*",
     "svg-jest": "^1.0.1",
-    "tailwindcss": "^3.1.4",
+    "tailwindcss": "^3.1.8",
     "ts-jest": "^28.0.5",
-    "ts-loader": "^9.2.8",
+    "ts-loader": "^9.3.1",
     "typescript": "*",
     "webpack": "*",
     "webpack-dev-server": "*",
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@reach/alert": "^0.16.0",
-    "@reach/alert-dialog": "^0.16.2",
-    "@reach/checkbox": "^0.16.0",
-    "@reach/dialog": "^0.16.2",
-    "@reach/disclosure": "^0.16.2",
-    "@reach/listbox": "^0.16.2",
-    "@reach/tooltip": "^0.16.2",
-    "@reach/visually-hidden": "^0.16.0",
+    "@reach/alert": "^0.17.0",
+    "@reach/alert-dialog": "^0.17.0",
+    "@reach/checkbox": "^0.17.0",
+    "@reach/dialog": "^0.17.0",
+    "@reach/disclosure": "^0.17.0",
+    "@reach/listbox": "^0.17.0",
+    "@reach/tooltip": "^0.17.0",
+    "@reach/visually-hidden": "^0.17.0",
     "@standardnotes/components-meta": "workspace:*",
     "@standardnotes/filepicker": "workspace:*",
     "@standardnotes/icons": "workspace:*",
@@ -83,15 +83,15 @@
     "@standardnotes/styles": "workspace:*",
     "@standardnotes/toast": "workspace:*",
     "@standardnotes/ui-services": "workspace:^",
-    "@zip.js/zip.js": "^2.4.10",
-    "mobx": "^6.5.0",
-    "mobx-react-lite": "^3.3.0",
-    "qrcode.react": "^3.0.1",
-    "react": "^18.1.0",
+    "@zip.js/zip.js": "^2.6.26",
+    "mobx": "^6.6.2",
+    "mobx-react-lite": "^3.4.0",
+    "qrcode.react": "^3.1.0",
+    "react": "^18.2.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-touch-backend": "^16.0.1",
-    "react-dom": "^18.1.0",
+    "react-dom": "^18.2.0",
     "styled-components": "^5.3.5"
   },
   "lint-staged": {

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)
   }, [])