fix: TypeScript performance of DismissibleBanner.tsx (#11075)

* clean up types to fix perf

* add changeset

---------

Co-authored-by: Banks Nussman <banks@nussman.us>

packages/manager/.changeset/pr-11075-fixed-1728498752415.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Fix TypeScript performance of `DismissibleBanner.tsx` ([#11075](https://github.com/linode/manager/pull/11075))

packages/manager/src/components/DismissibleBanner/DismissibleBanner.tsx

@@ -1,31 +1,20 @@
 import Close from '@mui/icons-material/Close';
 import Grid from '@mui/material/Unstable_Grid2';
-import { SxProps } from '@mui/system';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
-import {
-  DismissibleNotificationOptions,
-  useDismissibleNotifications,
-} from 'src/hooks/useDismissibleNotifications';
+import { useDismissibleNotifications } from 'src/hooks/useDismissibleNotifications';
 
 import { StyledButton, StyledNotice } from './DismissibleBanner.styles';
 
 import type { NoticeProps } from 'src/components/Notice/Notice';
+import type { DismissibleNotificationOptions } from 'src/hooks/useDismissibleNotifications';
 
-interface Props {
+interface Props extends NoticeProps {
   /**
    * Optional element to pass to the banner to trigger actions
    */
   actionButton?: JSX.Element;
-  /**
-   * Child element to pass to the banner
-   */
-  children: JSX.Element;
-  /**
-   * Additional classes to the root element
-   */
-  className?: string;
   /**
    * Additional controls to pass to the Dismissible Banner
    */
@@ -34,16 +23,8 @@ interface Props {
    * Used to check if this banner has already been dismissed
    */
   preferenceKey: string;
-  /**
-   * Additional styles to apply to the root element
-   */
-  sx?: SxProps;
 }
 
-interface DismissibleBannerProps
-  extends Omit<Partial<NoticeProps>, 'children'>,
-    Props {}
-
 /**
  * ## Usage
  *
@@ -60,7 +41,7 @@ interface DismissibleBannerProps
  * - Warning: Informs users of an impending change that will have an impact on their service(s).
  * - Call to action: Primary Button or text link allows a user to take action directly from the banner.
  */
-export const DismissibleBanner = (props: DismissibleBannerProps) => {
+export const DismissibleBanner = (props: Props) => {
   const {
     actionButton,
     children,

packages/manager/src/components/Notice/Notice.tsx

@@ -1,14 +1,16 @@
-import Grid, { Grid2Props } from '@mui/material/Unstable_Grid2';
-import { SxProps } from '@mui/system';
+import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
 import Error from 'src/assets/icons/alert.svg';
 import Check from 'src/assets/icons/check.svg';
 import Warning from 'src/assets/icons/warning.svg';
-import { Typography, TypographyProps } from 'src/components/Typography';
+import { Typography } from 'src/components/Typography';
 
 import { useStyles } from './Notice.styles';
 
+import type { Grid2Props } from '@mui/material/Unstable_Grid2';
+import type { TypographyProps } from 'src/components/Typography';
+
 export type NoticeVariant =
   | 'error'
   | 'info'
@@ -23,10 +25,6 @@ export interface NoticeProps extends Grid2Props {
    * **Note:** This only applies to notice variants of "error".
    */
   bypassValidation?: boolean;
-  /**
-   * Additional classes to be applied to the root element.
-   */
-  className?: string;
   /**
    * The data-qa attribute to apply to the root element.
    */
@@ -39,10 +37,6 @@ export interface NoticeProps extends Grid2Props {
    * If true, an icon will be displayed to the left of the error, reflecting the variant of the error.
    */
   important?: boolean;
-  /**
-   * The function to execute when/if the error is clicked.
-   */
-  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
   /**
    * The amount of spacing to apply to the bottom of the error.
    */
@@ -55,10 +49,6 @@ export interface NoticeProps extends Grid2Props {
    * The amount of spacing to apply to the top of the error.
    */
   spacingTop?: 0 | 4 | 8 | 12 | 16 | 24 | 32;
-  /**
-   * Additional styles to apply to the root element.
-   */
-  sx?: SxProps;
   /**
    * The text to display in the error. If this is not provided, props.children will be used.
    */