Remove useEvent in favor for @mui/utils useEventCallback

packages/toolpad-app/src/projectEvents.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Emitter } from '@mui/toolpad-utils/events';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { ProjectEvents } from './types';
-import useEvent from './utils/useEvent';
 
 let ws: WebSocket | null = null;
 const projectEvents = new Emitter<ProjectEvents>();
@@ -36,7 +36,7 @@ export function useOnProjectEvent<K extends keyof ProjectEvents>(
  event: K,
  handler: (payload: ProjectEvents[K]) => void,
 ) {
- const stableHandler = useEvent(handler);
+ const stableHandler = useEventCallback(handler);
  return React.useEffect(() => {
  return projectEvents.subscribe(event, stableHandler);
  }, [event, stableHandler]);

packages/toolpad-app/src/runtime/ToolpadApp.tsx

@@ -62,6 +62,7 @@ import { errorFrom } from '@mui/toolpad-utils/errors';
 import useBoolean from '@mui/toolpad-utils/hooks/useBoolean';
 import usePageTitle from '@mui/toolpad-utils/hooks/usePageTitle';
 import invariant from 'invariant';
+import useEventCallback from '@mui/utils/useEventCallback';
 import * as appDom from '../appDom';
 import { RuntimeState } from '../types';
 import { getBindingType, getBindingValue } from '../bindings';
@@ -83,7 +84,6 @@ import { layoutBoxArgTypes } from './toolpadComponents/layoutBox';
 import { useDataQuery, UseFetch } from './useDataQuery';
 import { NavigateToPage } from './CanvasHooksContext';
 import PreviewHeader from './PreviewHeader';
-import useEvent from '../utils/useEvent';
 import { AppLayout } from './AppLayout';
 import api, { queryClient } from './api';
 
@@ -1364,7 +1364,7 @@ export function RenderedPage({ nodeId }: RenderedNodeProps) {
 
  const canvasEvents = React.useContext(CanvasEventsContext);
 
- const onUpdate = useEvent(({ scope, scopeMeta }) => {
+ const onUpdate = useEventCallback(({ scope, scopeMeta }) => {
  if (canvasEvents) {
  canvasEvents.emit('pageStateUpdated', {
  pageState: scope.values,

packages/toolpad-app/src/server/toolpadAppBuilder.ts

@@ -259,6 +259,7 @@ export function createViteConfig({
  '@mui/material/styles',
  '@mui/material/useMediaQuery',
  '@mui/utils',
+ '@mui/utils/useEventCallback',
  '@mui/x-data-grid-pro',
  '@mui/x-date-pickers/AdapterDayjs',
  '@mui/x-date-pickers/DesktopDatePicker',

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/EditorCanvasHost.tsx

@@ -5,11 +5,11 @@ import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import * as ReactDOM from 'react-dom';
 import invariant from 'invariant';
+import useEventCallback from '@mui/utils/useEventCallback';
 import * as appDom from '../../../appDom';
 import { TOOLPAD_BRIDGE_GLOBAL } from '../../../constants';
 import { HTML_ID_EDITOR_OVERLAY } from '../../../runtime/constants';
 import { NodeHashes } from '../../../types';
-import useEvent from '../../../utils/useEvent';
 import { LogEntry } from '../../../components/Console';
 import { useAppStateApi } from '../../AppState';
 import createRuntimeState from '../../../runtime/createRuntimeState';
@@ -68,7 +68,7 @@ const CanvasFrame = styled('iframe')({
 });
 
 function useOnChange<T = unknown>(value: T, handler: (newValue: T, oldValue: T) => void) {
- const stableHandler = useEvent(handler);
+ const stableHandler = useEventCallback(handler);
  const prevValue = React.useRef(value);
  React.useEffect(() => {
  if (prevValue.current !== value) {
@@ -109,7 +109,7 @@ export default function EditorCanvasHost({
 
  const [editorOverlayRoot, setEditorOverlayRoot] = React.useState<HTMLElement | null>(null);
 
- const handleKeyDown = useEvent((event: KeyboardEvent) => {
+ const handleKeyDown = useEventCallback((event: KeyboardEvent) => {
  const isZ = !!event.key && event.key.toLowerCase() === 'z';
 
  const undoShortcut = isZ && (event.metaKey || event.ctrlKey);
@@ -129,7 +129,7 @@ export default function EditorCanvasHost({
  const [loading, setLoading] = React.useState(true);
  useOnChange(src, () => setLoading(true));
 
- const initBridge = useEvent((bridgeInstance: ToolpadBridge) => {
+ const initBridge = useEventCallback((bridgeInstance: ToolpadBridge) => {
  const handleReady = (readyBridge: ToolpadBridge) => {
  setLoading(false);
  setBridge(readyBridge);
@@ -187,7 +187,7 @@ export default function EditorCanvasHost({
  [handleKeyDown, initBridge],
  );
 
- const invalidateCanvasQueries = useEvent(() => {
+ const invalidateCanvasQueries = useEventCallback(() => {
  bridge?.canvasCommands.invalidateQueries();
  });
 

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/QueryEditorDialog.tsx

@@ -16,6 +16,7 @@ import * as React from 'react';
 import { BindableAttrValue } from '@mui/toolpad-core';
 import { useBrowserJsRuntime } from '@mui/toolpad-core/jsBrowserRuntime';
 import invariant from 'invariant';
+import useEventCallback from '@mui/utils/useEventCallback';
 import useLatest from '../../../../utils/useLatest';
 import { usePageEditorState } from '../PageEditorProvider';
 import * as appDom from '../../../../appDom';
@@ -29,7 +30,6 @@ import BindableEditor from '../BindableEditor';
 import { ConfirmDialog } from '../../../../components/SystemDialogs';
 import useBoolean from '../../../../utils/useBoolean';
 import { useNodeNameValidation } from '../../PagesExplorer/validation';
-import useEvent from '../../../../utils/useEvent';
 import useUnsavedChangesConfirm from '../../../hooks/useUnsavedChangesConfirm';
 import client from '../../../../api';
 
@@ -117,7 +117,7 @@ export default function QueryNodeEditorDialog<Q>({
  setInput(node);
  }, [node]);
 
- const reset = useEvent(() => setInput(node));
+ const reset = useEventCallback(() => setInput(node));
 
  React.useEffect(() => {
  if (open) {

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderPanel.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { styled } from '@mui/material';
 import { NodeId } from '@mui/toolpad-core';
+import useEventCallback from '@mui/utils/useEventCallback';
 import * as appDom from '../../../../appDom';
 import EditorCanvasHost from '../EditorCanvasHost';
 import { getNodeHashes, useAppState, useAppStateApi, useDomApi } from '../../../AppState';
 import { usePageEditorApi, usePageEditorState } from '../PageEditorProvider';
 import RenderOverlay from './RenderOverlay';
 import { NodeHashes } from '../../../../types';
-import useEvent from '../../../../utils/useEvent';
 import type { ToolpadBridge } from '../../../../canvas/ToolpadBridge';
 import { getBindingType } from '../../../../bindings';
 
@@ -43,7 +43,7 @@ export default function RenderPanel({ className }: RenderPanelProps) {
  [domLoader.savedDom],
  );
 
- const handleInit = useEvent((initializedBridge: ToolpadBridge) => {
+ const handleInit = useEventCallback((initializedBridge: ToolpadBridge) => {
  initializedBridge.canvasEvents.on('propUpdated', (event) => {
  domApi.update((draft) => {
  const node = appDom.getMaybeNode(draft, event.nodeId as NodeId, 'element');

packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/CreateCodeComponentNodeDialog.tsx

@@ -12,10 +12,10 @@ import {
 import * as React from 'react';
 import invariant from 'invariant';
 import CloseIcon from '@mui/icons-material/Close';
+import useEventCallback from '@mui/utils/useEventCallback';
 import * as appDom from '../../../appDom';
 import { useAppState } from '../../AppState';
 import DialogForm from '../../../components/DialogForm';
-import useEvent from '../../../utils/useEvent';
 import { useNodeNameValidation } from './validation';
 import client from '../../../api';
 import useLatest from '../../../utils/useLatest';
@@ -43,7 +43,9 @@ export default function CreateCodeComponentDialog({
  const [name, setName] = React.useState(appDom.proposeName(DEFAULT_NAME, existingNames));
 
  // Reset form
- const handleReset = useEvent(() => setName(appDom.proposeName(DEFAULT_NAME, existingNames)));
+ const handleReset = useEventCallback(() =>
+ setName(appDom.proposeName(DEFAULT_NAME, existingNames)),
+ );
 
  React.useEffect(() => {
  if (open) {

packages/toolpad-app/src/toolpad/AppEditor/PagesExplorer/CreatePageNodeDialog.tsx

@@ -8,9 +8,9 @@ import {
 } from '@mui/material';
 import * as React from 'react';
 import invariant from 'invariant';
+import useEventCallback from '@mui/utils/useEventCallback';
 import * as appDom from '../../../appDom';
 import DialogForm from '../../../components/DialogForm';
-import useEvent from '../../../utils/useEvent';
 import { useAppStateApi, useAppState } from '../../AppState';
 import { useNodeNameValidation } from './validation';
 
@@ -33,7 +33,9 @@ export default function CreatePageDialog({ open, onClose, ...props }: CreatePage
  const [name, setName] = React.useState(appDom.proposeName(DEFAULT_NAME, existingNames));
 
  // Reset form
- const handleReset = useEvent(() => setName(appDom.proposeName(DEFAULT_NAME, existingNames)));
+ const handleReset = useEventCallback(() =>
+ setName(appDom.proposeName(DEFAULT_NAME, existingNames)),
+ );
 
  React.useEffect(() => {
  if (open) {

packages/toolpad-app/src/toolpad/AppState.tsx

@@ -7,12 +7,12 @@ import { debounce, DebouncedFunc } from 'lodash-es';
 import { useLocation } from 'react-router-dom';
 import { mapValues } from '@mui/toolpad-utils/collections';
 import useDebouncedHandler from '@mui/toolpad-utils/hooks/useDebouncedHandler';
+import useEventCallback from '@mui/utils/useEventCallback';
 import * as appDom from '../appDom';
 import { omit, update } from '../utils/immutability';
 import client from '../api';
 import useShortcut from '../utils/useShortcut';
 import insecureHash from '../utils/insecureHash';
-import useEvent from '../utils/useEvent';
 import { NodeHashes } from '../types';
 import { hasFieldFocus } from '../utils/fields';
 import { DomView, getViewFromPathname, PageViewTab } from '../utils/domView';
@@ -505,7 +505,7 @@ export default function AppProvider({ children }: DomContextProps) {
  [],
  );
 
- const dispatchWithHistory = useEvent((action: AppStateAction) => {
+ const dispatchWithHistory = useEventCallback((action: AppStateAction) => {
  if (state.hasUnsavedChanges && isCancellableAction(action)) {
  // eslint-disable-next-line no-alert
  const ok = window.confirm(

packages/toolpad-utils/package.json

@@ -60,8 +60,8 @@
  },
  "devDependencies": {
  "@types/invariant": "2.2.35",
- "@types/react": "18.2.21",
  "@types/prettier": "2.7.3",
+ "@types/react": "18.2.21",
  "@types/react-is": "18.2.1"
  },
  "gitHead": "60bec54459ba0f3334c62f12e6e6c2c10a08fd21"