Update @types/react

package.json

@@ -15,7 +15,8 @@
     "@fortawesome/fontawesome-svg-core": "^6.1.0",
     "@fortawesome/free-solid-svg-icons": "^6.1.0",
     "@fortawesome/react-fontawesome": "^0.1.17",
-    "@nitrots/nitro-renderer": "^1.2.3",
+    "@nitrots/nitro-renderer": "^1.2.5",
+    "@types/react-transition-group": "^4.4.4",
     "animate.css": "^4.1.1",
     "classnames": "^2.3.1",
     "cross-env": "^7.0.3",
@@ -33,14 +34,15 @@
     "use-between": "^1.3.1"
   },
   "resolutions": {
-    "react-error-overlay": "6.0.9"
+    "react-error-overlay": "6.0.9",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3"
   },
   "devDependencies": {
     "@types/node": "^12.20.19",
-    "@types/react": "^17.0.15",
+    "@types/react": "^18.0.8",
-    "@types/react-dom": "^17.0.9",
+    "@types/react-dom": "^18.0.3",
     "@types/react-slider": "^1.3.1",
-    "@types/react-transition-group": "^4.4.2",
     "@types/react-virtualized": "^9.21.13",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",

src/common/Base.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, DetailedHTMLProps, FC, HTMLAttributes, MutableRefObject, useMemo } from 'react';
+import { CSSProperties, DetailedHTMLProps, FC, HTMLAttributes, MutableRefObject, ReactNode, useMemo } from 'react';
 import { ColorVariantType, DisplayType, FloatType, OverflowType, PositionType } from './types';
 
 export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttributes<T>, T>
@@ -17,11 +17,12 @@ export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttrib
     visible?: boolean;
     textColor?: ColorVariantType;
     classNames?: string[];
+    children?: ReactNode;
 }
 
 export const Base: FC<BaseProps<HTMLDivElement>> = props =>
 {
-    const { ref = null, innerRef = null, display = null, fit = false, grow = false, shrink = false, fullWidth = false, fullHeight = false, overflow = null, position = null, float = null, pointer = false, visible = null, textColor = null, classNames = [], className = '', style = {}, ...rest } = props;
+    const { ref = null, innerRef = null, display = null, fit = false, grow = false, shrink = false, fullWidth = false, fullHeight = false, overflow = null, position = null, float = null, pointer = false, visible = null, textColor = null, classNames = [], className = '', style = {}, children = null, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -72,5 +73,9 @@ export const Base: FC<BaseProps<HTMLDivElement>> = props =>
         return newStyle;
     }, [ style ]);
     
-    return <div ref={ innerRef } className={ getClassName } style={ getStyle } { ...rest } />;
+    return (
+        <div ref={ innerRef } className={ getClassName } style={ getStyle } { ...rest }>
+            { children }
+        </div>
+    );
 }

src/common/draggable-window/DraggableWindow.tsx

@@ -1,5 +1,5 @@
 import { MouseEventType, TouchEventType } from '@nitrots/nitro-renderer';
-import { CSSProperties, FC, Key, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { CSSProperties, FC, Key, MouseEvent as ReactMouseEvent, ReactNode, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Base } from '..';
 import { DraggableWindowPosition } from './DraggableWindowPosition';
@@ -18,6 +18,7 @@ export interface DraggableWindowProps
     dragStyle?: CSSProperties;
     offsetLeft?: number;
     offsetTop?: number;
+    children?: ReactNode;
 }
 
 export const DraggableWindow: FC<DraggableWindowProps> = props =>

src/common/layout/LayoutRoomPreviewerView.tsx

@@ -1,16 +1,17 @@
 import { ColorConverter, IRoomRenderingCanvas, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer';
-import { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { FC, MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { GetNitroInstance } from '../../api';
 
 export interface LayoutRoomPreviewerViewProps
 {
     roomPreviewer: RoomPreviewer;
     height?: number;
+    children?: ReactNode;
 }
 
 export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =>
 {
-    const { roomPreviewer = null, height = 0 } = props;
+    const { roomPreviewer = null, height = 0, children = null } = props;
     const [ renderingCanvas, setRenderingCanvas ] = useState<IRoomRenderingCanvas>(null);
     const elementRef = useRef<HTMLDivElement>();
 
@@ -98,7 +99,7 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
     return (
         <div className="room-preview-container">
             <div ref={ elementRef } className="room-preview-image" style={ { height } } onClick={ onClick } />
-            { props.children }
+            { children }
         </div>
     );
 }

src/common/transitions/TransitionAnimation.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, ReactNode, useEffect, useState } from 'react';
 import { Transition } from 'react-transition-group';
 import { getTransitionAnimationStyle } from './TransitionAnimationStyles';
 
@@ -8,6 +8,7 @@ interface TransitionAnimationProps
     inProp: boolean;
     timeout?: number;
     className?: string;
+    children?: ReactNode;
 }
 
 export const TransitionAnimation: FC<TransitionAnimationProps> = props =>

src/components/achievements/views/AchievementDetailsView.tsx

@@ -1,5 +1,5 @@
 import { AchievementData } from '@nitrots/nitro-renderer';
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { GetAchievementBadgeCode, GetAchievementLevel, LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../api';
 import { Column, Flex, LayoutCurrencyIcon, LayoutProgressBar, Text } from '../../../common';
 import { AchievementBadgeView } from './AchievementBadgeView';
@@ -9,7 +9,7 @@ interface AchievementDetailsViewProps
     achievement: AchievementData;
 }
 
-export const AchievementDetailsView: FC<AchievementDetailsViewProps> = props =>
+export const AchievementDetailsView: FC<PropsWithChildren<AchievementDetailsViewProps>> = props =>
 {
     const { achievement = null, children = null, ...rest } = props;
 

src/components/achievements/views/achievement-list/AchievementListItemView.tsx

@@ -1,5 +1,5 @@
 import { AchievementData } from '@nitrots/nitro-renderer';
-import { Dispatch, FC, SetStateAction } from 'react';
+import { Dispatch, FC, PropsWithChildren, SetStateAction } from 'react';
 import { LayoutGridItem } from '../../../../common';
 import { AchievementBadgeView } from '../AchievementBadgeView';
 
@@ -10,7 +10,7 @@ interface AchievementListItemViewProps
     setSelectedAchievementId: Dispatch<SetStateAction<number>>;
 }
 
-export const AchievementListItemView: FC<AchievementListItemViewProps> = props =>
+export const AchievementListItemView: FC<PropsWithChildren<AchievementListItemViewProps>> = props =>
 {
     const { achievement = null, selectedAchievementId = -1, setSelectedAchievementId = null, children = null, ...rest } = props;
 

src/components/achievements/views/achievement-list/AchievementListView.tsx

@@ -1,5 +1,5 @@
 import { AchievementData } from '@nitrots/nitro-renderer';
-import { Dispatch, FC, SetStateAction } from 'react';
+import { Dispatch, FC, PropsWithChildren, SetStateAction } from 'react';
 import { AutoGrid } from '../../../../common';
 import { AchievementListItemView } from './AchievementListItemView';
 
@@ -10,7 +10,7 @@ interface AchievementListViewProps
     setSelectedAchievementId: Dispatch<SetStateAction<number>>;
 }
 
-export const AchievementListView: FC<AchievementListViewProps> = props =>
+export const AchievementListView: FC<PropsWithChildren<AchievementListViewProps>> = props =>
 {
     const { achievements = null, selectedAchievementId = -1, setSelectedAchievementId = null, children = null, ...rest } = props;
 

src/components/achievements/views/category-list/AchievementsCategoryListItemView.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, FC, SetStateAction } from 'react';
+import { Dispatch, FC, PropsWithChildren, SetStateAction } from 'react';
 import { GetAchievementCategoryImageUrl, GetAchievementCategoryMaxProgress, GetAchievementCategoryProgress, GetAchievementCategoryTotalUnseen, IAchievementCategory, LocalizeText } from '../../../../api';
 import { LayoutBackgroundImage, LayoutGridItem, Text } from '../../../../common';
 
@@ -9,7 +9,7 @@ interface AchievementCategoryListItemViewProps
     setSelectedCategoryCode: Dispatch<SetStateAction<string>>;
 }
 
-export const AchievementsCategoryListItemView: FC<AchievementCategoryListItemViewProps> = props =>
+export const AchievementsCategoryListItemView: FC<PropsWithChildren<AchievementCategoryListItemViewProps>> = props =>
 {
     const { category = null, selectedCategoryCode = null, setSelectedCategoryCode = null, children = null, ...rest } = props;
 

src/components/achievements/views/category-list/AchievementsCategoryListView.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, FC, SetStateAction } from 'react';
+import { Dispatch, FC, PropsWithChildren, SetStateAction } from 'react';
 import { IAchievementCategory } from '../../../../api';
 import { AutoGrid } from '../../../../common';
 import { AchievementsCategoryListItemView } from './AchievementsCategoryListItemView';
@@ -10,7 +10,7 @@ interface AchievementsCategoryListViewProps
     setSelectedCategoryCode: Dispatch<SetStateAction<string>>;
 }
 
-export const AchievementsCategoryListView: FC<AchievementsCategoryListViewProps> = props =>
+export const AchievementsCategoryListView: FC<PropsWithChildren<AchievementsCategoryListViewProps>> = props =>
 {
     const { categories = null, selectedCategoryCode = null, setSelectedCategoryCode = null, children = null, ...rest } = props;
     

src/components/inventory/views/badge/InventoryBadgeItemView.tsx

@@ -1,9 +1,9 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { UnseenItemCategory } from '../../../../api';
 import { LayoutBadgeImageView, LayoutGridItem } from '../../../../common';
 import { useInventoryBadges, useInventoryUnseenTracker } from '../../../../hooks';
 
-export const InventoryBadgeItemView: FC<{ badgeCode: string }> = props =>
+export const InventoryBadgeItemView: FC<PropsWithChildren<{ badgeCode: string }>> = props =>
 {
     const { badgeCode = null, children = null, ...rest } = props;
     const { selectedBadgeCode = null, setSelectedBadgeCode = null, getBadgeId = null } = useInventoryBadges();

src/components/inventory/views/bot/InventoryBotItemView.tsx

@@ -1,10 +1,10 @@
 import { MouseEventType } from '@nitrots/nitro-renderer';
-import { FC, MouseEvent, useState } from 'react';
+import { FC, MouseEvent, PropsWithChildren, useState } from 'react';
 import { attemptBotPlacement, IBotItem, UnseenItemCategory } from '../../../../api';
 import { LayoutAvatarImageView, LayoutGridItem } from '../../../../common';
 import { useInventoryBots, useInventoryUnseenTracker } from '../../../../hooks';
 
-export const InventoryBotItemView: FC<{ botItem: IBotItem }> = props =>
+export const InventoryBotItemView: FC<PropsWithChildren<{ botItem: IBotItem }>> = props =>
 {
     const { botItem = null, children = null, ...rest } = props;
     const [ isMouseDown, setMouseDown ] = useState(false);

src/components/inventory/views/pet/InventoryPetItemView.tsx

@@ -1,10 +1,10 @@
 import { MouseEventType } from '@nitrots/nitro-renderer';
-import { FC, MouseEvent, useState } from 'react';
+import { FC, MouseEvent, PropsWithChildren, useState } from 'react';
 import { attemptPetPlacement, IPetItem, UnseenItemCategory } from '../../../../api';
 import { LayoutGridItem, LayoutPetImageView } from '../../../../common';
 import { useInventoryPets, useInventoryUnseenTracker } from '../../../../hooks';
 
-export const InventoryPetItemView: FC<{ petItem: IPetItem }> = props =>
+export const InventoryPetItemView: FC<PropsWithChildren<{ petItem: IPetItem }>> = props =>
 {
     const { petItem = null, children = null, ...rest } = props;
     const [ isMouseDown, setMouseDown ] = useState(false);

src/components/toolbar/ToolbarMeView.tsx

@@ -1,5 +1,5 @@
 import { MouseEventType, RoomObjectCategory } from '@nitrots/nitro-renderer';
-import { Dispatch, FC, SetStateAction, useEffect, useRef } from 'react';
+import { Dispatch, FC, PropsWithChildren, SetStateAction, useEffect, useRef } from 'react';
 import { CreateLinkEvent, GetRoomEngine, GetRoomSession, GetSessionDataManager, GetUserProfile } from '../../api';
 import { Base, Flex, LayoutItemCountView } from '../../common';
 import { GuideToolEvent } from '../../events';
@@ -12,7 +12,7 @@ interface ToolbarMeViewProps
     setMeExpanded: Dispatch<SetStateAction<boolean>>;
 }
 
-export const ToolbarMeView: FC<ToolbarMeViewProps> = props =>
+export const ToolbarMeView: FC<PropsWithChildren<ToolbarMeViewProps>> = props =>
 {
     const { useGuideTool = false, unseenAchievementCount = 0, setMeExpanded = null, children = null, ...rest } = props;
     const elementRef = useRef<HTMLDivElement>();

src/components/wired/views/WiredBaseView.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, PropsWithChildren, useEffect, useState } from 'react';
 import { GetSessionDataManager, LocalizeText, WiredFurniType, WiredSelectionVisualizer } from '../../../api';
 import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { useWiredContext } from '../WiredContext';
@@ -13,7 +13,7 @@ export interface WiredBaseViewProps
     validate?: () => boolean;
 }
 
-export const WiredBaseView: FC<WiredBaseViewProps> = props =>
+export const WiredBaseView: FC<PropsWithChildren<WiredBaseViewProps>> = props =>
 {
     const { wiredType = '', requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, validate = null, children = null, hasSpecialInput = false } = props;
     const [ wiredName, setWiredName ] = useState<string>(null);

src/components/wired/views/actions/WiredActionBaseView.tsx

@@ -1,5 +1,5 @@
 import { WiredActionDefinition } from '@nitrots/nitro-renderer';
-import { FC, useEffect } from 'react';
+import { FC, PropsWithChildren, useEffect } from 'react';
 import ReactSlider from 'react-slider';
 import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
 import { Column, Text } from '../../../../common';
@@ -13,7 +13,7 @@ export interface WiredActionBaseViewProps
     save: () => void;
 }
 
-export const WiredActionBaseView: FC<WiredActionBaseViewProps> = props =>
+export const WiredActionBaseView: FC<PropsWithChildren<WiredActionBaseViewProps>> = props =>
 {
     const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, hasSpecialInput = false, children = null } = props;
     const { trigger = null, actionDelay = 0, setActionDelay = null } = useWiredContext();

src/components/wired/views/conditions/WiredConditionBaseView.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { WiredFurniType } from '../../../../api';
 import { WiredBaseView } from '../WiredBaseView';
 
@@ -9,7 +9,7 @@ export interface WiredConditionBaseViewProps
     save: () => void;
 }
 
-export const WiredConditionBaseView: FC<WiredConditionBaseViewProps> = props =>
+export const WiredConditionBaseView: FC<PropsWithChildren<WiredConditionBaseViewProps>> = props =>
 {
     const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, hasSpecialInput = false, children = null } = props;
     

src/components/wired/views/triggers/WiredTriggerBaseView.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { WiredFurniType } from '../../../../api';
 import { WiredBaseView } from '../WiredBaseView';
 
@@ -9,7 +9,7 @@ export interface WiredTriggerBaseViewProps
     save: () => void;
 }
 
-export const WiredTriggerBaseView: FC<WiredTriggerBaseViewProps> = props =>
+export const WiredTriggerBaseView: FC<PropsWithChildren<WiredTriggerBaseViewProps>> = props =>
 {
     const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, hasSpecialInput = false, children = null } = props;
     

tsconfig.json

@@ -14,7 +14,7 @@
     "strict": false,
     "downlevelIteration": true,
     "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
+    "noFallthroughCasesInSwitch": false,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,