diff --git a/packages/tldraw/src/TLDraw.tsx b/packages/tldraw/src/TLDraw.tsx index 5ddb5f104..77965624a 100644 --- a/packages/tldraw/src/TLDraw.tsx +++ b/packages/tldraw/src/TLDraw.tsx @@ -421,26 +421,24 @@ function InnerTldraw({ ) } -const OneOff = React.memo( - ({ - focusableRef, - autofocus, - }: { - autofocus?: boolean - focusableRef: React.RefObject - }) => { - useKeyboardShortcuts(focusableRef) - useStylesheet() +const OneOff = React.memo(function OneOff({ + focusableRef, + autofocus, +}: { + autofocus?: boolean + focusableRef: React.RefObject +}) { + useKeyboardShortcuts(focusableRef) + useStylesheet() - React.useEffect(() => { - if (autofocus) { - focusableRef.current?.focus() - } - }, [autofocus]) + React.useEffect(() => { + if (autofocus) { + focusableRef.current?.focus() + } + }, [autofocus]) - return null - } -) + return null +}) const StyledLayout = styled('div', { position: 'absolute', diff --git a/packages/tldraw/src/components/ToolsPanel/BackToContent.tsx b/packages/tldraw/src/components/ToolsPanel/BackToContent.tsx index e0d6f341b..90507855e 100644 --- a/packages/tldraw/src/components/ToolsPanel/BackToContent.tsx +++ b/packages/tldraw/src/components/ToolsPanel/BackToContent.tsx @@ -9,7 +9,7 @@ const isEmptyCanvasSelector = (s: Data) => Object.keys(s.document.pages[s.appState.currentPageId].shapes).length > 0 && s.appState.isEmptyCanvas -export const BackToContent = React.memo(() => { +export const BackToContent = React.memo(function BackToContent() { const { tlstate, useSelector } = useTLDrawContext() const isEmptyCanvas = useSelector(isEmptyCanvasSelector) diff --git a/packages/tldraw/src/components/ToolsPanel/PrimaryTools.tsx b/packages/tldraw/src/components/ToolsPanel/PrimaryTools.tsx index adfe18cd6..12f4944fa 100644 --- a/packages/tldraw/src/components/ToolsPanel/PrimaryTools.tsx +++ b/packages/tldraw/src/components/ToolsPanel/PrimaryTools.tsx @@ -15,7 +15,7 @@ import { Panel } from '~components/Panel' const activeToolSelector = (s: Data) => s.appState.activeTool -export const PrimaryTools = React.memo((): JSX.Element => { +export const PrimaryTools = React.memo(function PrimaryTools(): JSX.Element { const { tlstate, useSelector } = useTLDrawContext() const activeTool = useSelector(activeToolSelector) diff --git a/packages/tldraw/src/components/ToolsPanel/ToolsPanel.tsx b/packages/tldraw/src/components/ToolsPanel/ToolsPanel.tsx index ad1d62185..ed3a3f57a 100644 --- a/packages/tldraw/src/components/ToolsPanel/ToolsPanel.tsx +++ b/packages/tldraw/src/components/ToolsPanel/ToolsPanel.tsx @@ -10,7 +10,7 @@ import { LockButton } from './LockButton' const isDebugModeSelector = (s: Data) => s.settings.isDebugMode -export const ToolsPanel = React.memo((): JSX.Element => { +export const ToolsPanel = React.memo(function ToolsPanel(): JSX.Element { const { useSelector } = useTLDrawContext() const isDebugMode = useSelector(isDebugModeSelector) diff --git a/packages/tldraw/src/components/TopPanel/ColorMenu.tsx b/packages/tldraw/src/components/TopPanel/ColorMenu.tsx index fba9289e4..0cb613c99 100644 --- a/packages/tldraw/src/components/TopPanel/ColorMenu.tsx +++ b/packages/tldraw/src/components/TopPanel/ColorMenu.tsx @@ -11,7 +11,7 @@ const selectColor = (s: Data) => s.appState.selectedStyle.color const preventEvent = (e: Event) => e.preventDefault() const themeSelector = (data: Data) => (data.settings.isDarkMode ? 'dark' : 'light') -export const ColorMenu = React.memo((): JSX.Element => { +export const ColorMenu = React.memo(function ColorMenu(): JSX.Element { const { tlstate, useSelector } = useTLDrawContext() const theme = useSelector(themeSelector) diff --git a/packages/tldraw/src/components/TopPanel/DashMenu.tsx b/packages/tldraw/src/components/TopPanel/DashMenu.tsx index d97208e88..33fcd64cc 100644 --- a/packages/tldraw/src/components/TopPanel/DashMenu.tsx +++ b/packages/tldraw/src/components/TopPanel/DashMenu.tsx @@ -17,7 +17,7 @@ const selectDash = (s: Data) => s.appState.selectedStyle.dash const preventEvent = (e: Event) => e.preventDefault() -export const DashMenu = React.memo((): JSX.Element => { +export const DashMenu = React.memo(function DashMenu(): JSX.Element { const { tlstate, useSelector } = useTLDrawContext() const dash = useSelector(selectDash) diff --git a/packages/tldraw/src/components/TopPanel/FillCheckbox.tsx b/packages/tldraw/src/components/TopPanel/FillCheckbox.tsx index 019cf224e..2602c4f85 100644 --- a/packages/tldraw/src/components/TopPanel/FillCheckbox.tsx +++ b/packages/tldraw/src/components/TopPanel/FillCheckbox.tsx @@ -7,7 +7,7 @@ import { ToolButton } from '~components/ToolButton' const isFilledSelector = (s: Data) => s.appState.selectedStyle.isFilled -export const FillCheckbox = React.memo((): JSX.Element => { +export const FillCheckbox = React.memo(function FillCheckbox(): JSX.Element { const { tlstate, useSelector } = useTLDrawContext() const isFilled = useSelector(isFilledSelector) diff --git a/packages/tldraw/src/components/TopPanel/Menu.tsx b/packages/tldraw/src/components/TopPanel/Menu.tsx index ea51dc4d9..38e4763e0 100644 --- a/packages/tldraw/src/components/TopPanel/Menu.tsx +++ b/packages/tldraw/src/components/TopPanel/Menu.tsx @@ -11,7 +11,7 @@ interface MenuProps { readOnly: boolean } -export const Menu = React.memo(({ readOnly }: MenuProps) => { +export const Menu = React.memo(function Menu({ readOnly }: MenuProps) { const { tlstate, callbacks } = useTLDrawContext() const { onNewProject, onOpenProject, onSaveProject, onSaveProjectAs } = useFileSystemHandlers() diff --git a/packages/tldraw/src/components/TopPanel/SizeMenu.tsx b/packages/tldraw/src/components/TopPanel/SizeMenu.tsx index e3fb9d905..de7647fd1 100644 --- a/packages/tldraw/src/components/TopPanel/SizeMenu.tsx +++ b/packages/tldraw/src/components/TopPanel/SizeMenu.tsx @@ -16,7 +16,7 @@ const selectSize = (s: Data) => s.appState.selectedStyle.size const preventEvent = (e: Event) => e.preventDefault() -export const SizeMenu = React.memo((): JSX.Element => { +export const SizeMenu = React.memo(function SizeMenu(): JSX.Element { const { tlstate, useSelector } = useTLDrawContext() const size = useSelector(selectSize)