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 >; };