[Snackbar][Material You] convert .js files to .ts

packages/mui-base/src/Snackbar/Snackbar.tsx

@@ -142,7 +142,7 @@ Snackbar.propTypes /* remove-proptypes */ = {
    * The `reason` parameter can optionally be used to control the response to `onClose`,
    * for example ignoring `clickaway`.
    *
-   * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
+   * @param {React.SyntheticEvent<any> | Event | null} event The event source of the callback.
    * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
    */
   onClose: PropTypes.func,

packages/mui-base/src/useSnackbar/useSnackbar.types.ts

@@ -21,7 +21,7 @@ export interface UseSnackbarParameters {
    * The `reason` parameter can optionally be used to control the response to `onClose`,
    * for example ignoring `clickaway`.
    *
-   * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
+   * @param {React.SyntheticEvent<any> | Event | null} event The event source of the callback.
    * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
    */
   onClose?: (event: React.SyntheticEvent<any> | Event | null, reason: SnackbarCloseReason) => void;

packages/mui-material-next/src/Snackbar/Snackbar.js → packages/mui-material-next/src/Snackbar/Snackbar.tsx

@@ -11,8 +11,9 @@ import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import { getSnackbarUtilityClass } from './snackbarClasses';
+import { SnackbarOwnerState, SnackbarProps } from './Snackbar.types';
 
-const useUtilityClasses = (ownerState) => {
+const useUtilityClasses = (ownerState: SnackbarOwnerState) => {
   const { classes, anchorOrigin } = ownerState;
 
   const slots = {
@@ -40,7 +41,7 @@ const SnackbarRoot = styled('div', {
       ],
     ];
   },
-})(({ theme, ownerState }) => {
+})<{ ownerState: SnackbarOwnerState }>(({ theme, ownerState }) => {
   const center = {
     left: '50%',
     right: 'auto',
@@ -73,7 +74,21 @@ const SnackbarRoot = styled('div', {
   };
 });
 
-const Snackbar = React.forwardRef(function Snackbar(inProps, ref) {
+/**
+ * Snackbars provide brief notifications. The component is also known as a toast.
+ *
+ * Demos:
+ *
+ * - [Snackbar](https://mui.com/material-ui/react-snackbar/)
+ *
+ * API:
+ *
+ * - [Snackbar API](https://mui.com/material-ui/api/snackbar/)
+ */
+const Snackbar = React.forwardRef(function Snackbar(
+  inProps: SnackbarProps,
+  ref: React.ForwardedRef<any>,
+) {
   const props = useThemeProps({ props: inProps, name: 'MuiSnackbar' });
   const theme = useTheme();
   const defaultTransitionDuration = {
@@ -111,7 +126,7 @@ const Snackbar = React.forwardRef(function Snackbar(inProps, ref) {
     disableWindowBlurListener,
     TransitionComponent,
     transitionDuration,
-  };
+  } as SnackbarOwnerState;
 
   const classes = useUtilityClasses(ownerState);
 
@@ -124,26 +139,19 @@ const Snackbar = React.forwardRef(function Snackbar(inProps, ref) {
     getSlotProps: getRootProps,
     externalForwardedProps: other,
     ownerState,
-    additionalProps: {
-      ref,
-    },
+    additionalProps: { ref },
     className: [classes.root, className],
+    externalSlotProps: {},
   });
 
-  const handleExited = (node) => {
+  const handleExited = (node: HTMLElement) => {
     setExited(true);
-
-    if (onExited) {
-      onExited(node);
-    }
+    onExited?.(node);
   };
 
-  const handleEnter = (node, isAppearing) => {
+  const handleEnter = (node: HTMLElement, isAppearing: boolean) => {
     setExited(false);
-
-    if (onEnter) {
-      onEnter(node, isAppearing);
-    }
+    onEnter?.(node, isAppearing);
   };
 
   // So we only render active snackbars.
@@ -158,7 +166,6 @@ const Snackbar = React.forwardRef(function Snackbar(inProps, ref) {
           appear
           in={open}
           timeout={transitionDuration}
-          direction={vertical === 'top' ? 'down' : 'up'}
           onEnter={handleEnter}
           onExited={handleExited}
           {...TransitionProps}
@@ -173,7 +180,7 @@ const Snackbar = React.forwardRef(function Snackbar(inProps, ref) {
 Snackbar.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The action to display. It renders after the message, at the end of the snackbar.
@@ -244,7 +251,7 @@ Snackbar.propTypes /* remove-proptypes */ = {
    * The `reason` parameter can optionally be used to control the response to `onClose`,
    * for example ignoring `clickaway`.
    *
-   * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
+   * @param {React.SyntheticEvent<any> | Event | null} event The event source of the callback.
    * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
    */
   onClose: PropTypes.func,
@@ -307,6 +314,6 @@ Snackbar.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   TransitionProps: PropTypes.object,
-};
+} as any;
 
 export default Snackbar;

packages/mui-material-next/src/Snackbar/Snackbar.d.ts → packages/mui-material-next/src/Snackbar/Snackbar.types.ts

@@ -1,12 +1,17 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { ClickAwayListenerProps } from '@mui/base/ClickAwayListener';
+// eslint-disable-next-line no-restricted-imports
 import { InternalStandardProps as StandardProps } from '@mui/material';
 import { SnackbarContentProps } from '@mui/material/SnackbarContent';
 import { TransitionProps } from '@mui/material/transitions';
 import { Theme } from '../styles';
 import { SnackbarClasses } from './snackbarClasses';
 
+export interface SnackbarOwnerState extends SnackbarProps {
+  anchorOrigin: NonNullable<SnackbarProps['anchorOrigin']>;
+}
+
 export interface SnackbarOrigin {
   vertical: 'top' | 'bottom';
   horizontal: 'left' | 'center' | 'right';
@@ -73,10 +78,10 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
    * The `reason` parameter can optionally be used to control the response to `onClose`,
    * for example ignoring `clickaway`.
    *
-   * @param {React.SyntheticEvent<any> | Event} event The event source of the callback.
+   * @param {React.SyntheticEvent<any> | Event | null} event The event source of the callback.
    * @param {string} reason Can be: `"timeout"` (`autoHideDuration` expired), `"clickaway"`, or `"escapeKeyDown"`.
    */
-  onClose?: (event: React.SyntheticEvent<any> | Event, reason: SnackbarCloseReason) => void;
+  onClose?: (event: React.SyntheticEvent<any> | Event | null, reason: SnackbarCloseReason) => void;
   /**
    * If `true`, the component is shown.
    */
@@ -116,15 +121,3 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
    */
   TransitionProps?: TransitionProps;
 }
-
-/**
- *
- * Demos:
- *
- * - [Snackbar](https://mui.com/material-ui/react-snackbar/)
- *
- * API:
- *
- * - [Snackbar API](https://mui.com/material-ui/api/snackbar/)
- */
-export default function Snackbar(props: SnackbarProps): JSX.Element;

packages/mui-material-next/src/index.ts

@@ -47,6 +47,9 @@ export * from './Select';
 export { default as Slider } from './Slider';
 export * from './Slider';
 
+export { default as Snackbar } from './Snackbar';
+export * from './Snackbar';
+
 export { default as Divider } from './Divider';
 export * from './Divider';