diff --git a/packages/components/src/notice/types.ts b/packages/components/src/notice/types.ts
index 1ae9af6be76e55..0e421cfe26a3bc 100644
--- a/packages/components/src/notice/types.ts
+++ b/packages/components/src/notice/types.ts
@@ -23,7 +23,7 @@ type NoticeActionWithOnClick = CommonNoticeActionProps & {
export type NoticeAction = NoticeActionWithURL | NoticeActionWithOnClick;
-type NoticeChildren = string | JSX.Element;
+export type NoticeChildren = string | JSX.Element;
export type NoticeProps = {
/**
diff --git a/packages/components/src/snackbar/index.tsx b/packages/components/src/snackbar/index.tsx
index 833d9dce8d30ff..f95a0c88afe473 100644
--- a/packages/components/src/snackbar/index.tsx
+++ b/packages/components/src/snackbar/index.tsx
@@ -16,7 +16,8 @@ import warning from '@wordpress/warning';
* Internal dependencies
*/
import Button from '../button';
-import type { NoticeAction, SnackbarProps } from './types';
+import type { SnackbarProps } from './types';
+import type { NoticeAction } from '../notice/types';
import type { WordPressComponentProps } from '../ui/context';
const NOTICE_TIMEOUT = 10000;
diff --git a/packages/components/src/snackbar/list.tsx b/packages/components/src/snackbar/list.tsx
index 093c0b3529612d..ebd1fca2518f51 100644
--- a/packages/components/src/snackbar/list.tsx
+++ b/packages/components/src/snackbar/list.tsx
@@ -17,7 +17,7 @@ import {
__unstableMotion as motion,
__unstableAnimatePresence as AnimatePresence,
} from '../animation';
-import type { Notice, SnackbarListProps } from './types';
+import type { SnackbarListProps } from './types';
import type { WordPressComponentProps } from '../ui/context';
const SNACKBAR_VARIANTS = {
@@ -61,7 +61,9 @@ export function SnackbarList( {
const listRef = useRef< HTMLDivElement | null >( null );
const isReducedMotion = useReducedMotion();
className = classnames( 'components-snackbar-list', className );
- const removeNotice = ( notice: Notice ) => () => onRemove?.( notice.id );
+ const removeNotice =
+ ( notice: SnackbarListProps[ 'notices' ][ number ] ) => () =>
+ onRemove?.( notice.id );
return (
{ children }
diff --git a/packages/components/src/snackbar/types.ts b/packages/components/src/snackbar/types.ts
index 46c9a8e67e8cfb..71ded92e5b7d11 100644
--- a/packages/components/src/snackbar/types.ts
+++ b/packages/components/src/snackbar/types.ts
@@ -1,116 +1,42 @@
/**
* External dependencies
*/
-import type { MutableRefObject, ReactNode, SyntheticEvent } from 'react';
+import type { MutableRefObject, ReactNode } from 'react';
-export type NoticeActionWithURL = {
- label: string;
- url: string;
- onClick?: ( event: SyntheticEvent ) => void;
-};
-
-type NoticeActionWithOnClick = {
- label: string;
- url?: string;
- onClick: ( event: SyntheticEvent ) => void;
-};
-
-// TODO: move this type to the Notice component once it gets typed.
-export type NoticeAction = NoticeActionWithURL | NoticeActionWithOnClick;
-
-export type Notice = {
- id: string;
- spokenMessage: string;
- actions: NoticeAction[];
- icon?: ReactNode;
- onDismiss?: () => void;
- content: string;
- isDismissible: boolean;
- explicitDismiss: boolean;
-};
+/**
+ * Internal dependencies
+ */
+import type { NoticeProps, NoticeChildren } from '../notice/types';
-export type SnackbarProps = {
- /**
- * The displayed message of a notice.
- *
- * Also used as the spoken message for assistive technology,
- * unless `spokenMessage` is provided as an alternative message.
- */
- children: string;
- /**
- * Used to provide a custom spoken message.
- *
- * @default children
- */
- spokenMessage?: Notice[ 'spokenMessage' ];
- /**
- * A politeness level for the notice's spoken message. Should be provided as
- * one of the valid options for an `aria-live` attribute value. Note that this
- * value should be considered a suggestion; assistive technologies may
- * override it based on internal heuristics.
- *
- * A value of `'assertive'` is to be used for important, and usually
- * time-sensitive, information. It will interrupt anything else the screen
- * reader is announcing in that moment.
- * A value of `'polite'` is to be used for advisory information. It should
- * not interrupt what the screen reader is announcing in that moment
- * (the "speech queue") or interrupt the current task.
- *
- * @see https://www.w3.org/TR/wai-aria-1.1/#aria-live
- *
- * @default 'polite'
- */
- politeness?: 'polite' | 'assertive';
- /**
- * An array of action objects.
- *
- * Each member object should contain
- * a `label` and either a `url` link string or `onClick` callback function.
- *
- * @default []
- */
- actions?: Notice[ 'actions' ];
- /**
- * Called to remove the snackbar from the UI.
- */
- onRemove?: () => void;
+type SnackbarOnlyProps = {
/**
* The icon to render in the snackbar.
*
* @default null
*/
- icon?: Notice[ 'icon' ];
+ icon?: ReactNode;
/**
* Whether to require user action to dismiss the snackbar.
* By default, this is dismissed on a timeout, without user interaction.
*
* @default false
*/
- explicitDismiss?: Notice[ 'explicitDismiss' ];
- /**
- * A callback executed when the snackbar is dismissed.
- *
- * It is distinct from onRemove, which _looks_ like a callback but is
- * actually the function to call to remove the snackbar from the UI.
- */
- onDismiss?: Notice[ 'onDismiss' ];
+ explicitDismiss?: boolean;
/**
* A ref to the list that contains the snackbar.
*/
listRef?: MutableRefObject< HTMLDivElement | null >;
};
+export type SnackbarProps = NoticeProps & SnackbarOnlyProps;
+
export type SnackbarListProps = {
- /**
- * Array of notices to render.
- */
- notices: Notice[];
- /**
- * Children to be rendered inside the notice list.
- */
- children?: ReactNode;
- /**
- * Function called when a notice should be removed / dismissed.
- */
- onRemove?: ( id: Notice[ 'id' ] ) => void;
+ notices: Array<
+ Omit< SnackbarProps, 'children' > & {
+ id: string;
+ content: string;
+ }
+ >;
+ onRemove: ( id: string ) => void;
+ children?: NoticeChildren | Array< NoticeChildren >;
};