Update eslint to 8.27.0

ts/components/Toast.tsx

@@ -23,93 +23,91 @@ export type PropsType = {
   style?: React.CSSProperties;
 };
 
-export const Toast = memo(
-  ({
-    autoDismissDisabled = false,
-    children,
-    align = 'center',
-    className,
-    disableCloseOnClick = false,
-    onClose,
-    style,
-    timeout = 8000,
-    toastAction,
-  }: PropsType): JSX.Element | null => {
-    const [root, setRoot] = React.useState<HTMLElement | null>(null);
-    const [focusRef] = useRestoreFocus();
+export const Toast = memo(function ToastInner({
+  autoDismissDisabled = false,
+  children,
+  align = 'center',
+  className,
+  disableCloseOnClick = false,
+  onClose,
+  style,
+  timeout = 8000,
+  toastAction,
+}: PropsType): JSX.Element | null {
+  const [root, setRoot] = React.useState<HTMLElement | null>(null);
+  const [focusRef] = useRestoreFocus();
 
-    useEffect(() => {
-      const div = document.createElement('div');
-      document.body.appendChild(div);
-      setRoot(div);
+  useEffect(() => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    setRoot(div);
 
-      return () => {
-        document.body.removeChild(div);
-        setRoot(null);
-      };
-    }, []);
+    return () => {
+      document.body.removeChild(div);
+      setRoot(null);
+    };
+  }, []);
 
-    useEffect(() => {
-      if (!root || autoDismissDisabled) {
-        return;
-      }
+  useEffect(() => {
+    if (!root || autoDismissDisabled) {
+      return;
+    }
 
-      const timeoutId = setTimeout(onClose, timeout);
+    const timeoutId = setTimeout(onClose, timeout);
 
-      return () => {
-        clearTimeoutIfNecessary(timeoutId);
-      };
-    }, [autoDismissDisabled, onClose, root, timeout]);
+    return () => {
+      clearTimeoutIfNecessary(timeoutId);
+    };
+  }, [autoDismissDisabled, onClose, root, timeout]);
 
-    return root
-      ? createPortal(
-          <div
-            aria-live="assertive"
-            className={classNames('Toast', `Toast--align-${align}`, className)}
-            onClick={() => {
+  return root
+    ? createPortal(
+        <div
+          aria-live="assertive"
+          className={classNames('Toast', `Toast--align-${align}`, className)}
+          onClick={() => {
+            if (!disableCloseOnClick) {
+              onClose();
+            }
+          }}
+          onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
+            if (ev.key === 'Enter' || ev.key === ' ') {
               if (!disableCloseOnClick) {
                 onClose();
               }
-            }}
-            onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
-              if (ev.key === 'Enter' || ev.key === ' ') {
-                if (!disableCloseOnClick) {
-                  onClose();
-                }
-              }
-            }}
-            role="button"
-            tabIndex={0}
-            style={style}
-          >
-            <div className="Toast__content">{children}</div>
-            {toastAction && (
-              <div
-                className="Toast__button"
-                onClick={(ev: MouseEvent<HTMLDivElement>) => {
+            }
+          }}
+          role="button"
+          tabIndex={0}
+          style={style}
+        >
+          <div className="Toast__content">{children}</div>
+          {toastAction && (
+            <div
+              className="Toast__button"
+              onClick={(ev: MouseEvent<HTMLDivElement>) => {
+                ev.stopPropagation();
+                ev.preventDefault();
+                toastAction.onClick();
+                onClose();
+              }}
+              onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
+                if (ev.key === 'Enter' || ev.key === ' ') {
                   ev.stopPropagation();
                   ev.preventDefault();
                   toastAction.onClick();
                   onClose();
-                }}
-                onKeyDown={(ev: KeyboardEvent<HTMLDivElement>) => {
-                  if (ev.key === 'Enter' || ev.key === ' ') {
-                    ev.stopPropagation();
-                    ev.preventDefault();
-                    toastAction.onClick();
-                    onClose();
-                  }
-                }}
-                ref={focusRef}
-                role="button"
-                tabIndex={0}
-              >
-                {toastAction.label}
-              </div>
-            )}
-          </div>,
-          root
-        )
-      : null;
-  }
-);
+                }
+              }}
+              ref={focusRef}
+              role="button"
+              tabIndex={0}
+            >
+              {toastAction.label}
+            </div>
+          )}
+        </div>,
+        root
+      )
+    : null;
+});