diff --git a/packages/frontend-plugin-api/report.api.md b/packages/frontend-plugin-api/report.api.md index 89fc72992a..85c6b7494c 100644 --- a/packages/frontend-plugin-api/report.api.md +++ b/packages/frontend-plugin-api/report.api.md @@ -19,6 +19,7 @@ import { JSX as JSX_2 } from 'react/jsx-runtime'; import { JSX as JSX_3 } from 'react'; import { Observable } from '@backstage/types'; import { PropsWithChildren } from 'react'; +import { ReactElement } from 'react'; import { ReactNode } from 'react'; import { SwappableComponentRef as SwappableComponentRef_2 } from '@backstage/frontend-plugin-api'; import type { z } from 'zod'; @@ -1935,6 +1936,37 @@ export interface SwappableComponentsApi { // @public export const swappableComponentsApiRef: ApiRef_2; +// @public +export type ToastApi = { + post(toast: ToastMessage): string; + close(key: string): void; + toast$(): Observable; +}; + +// @public +export const toastApiRef: ApiRef; + +// @public +export type ToastLink = { + label: string; + href: string; +}; + +// @public +export type ToastMessage = { + title: ReactNode; + description?: ReactNode; + status?: 'info' | 'success' | 'warning' | 'danger'; + icon?: boolean | ReactElement; + links?: ToastLink[]; + timeout?: number; +}; + +// @public +export type ToastMessageWithKey = ToastMessage & { + key: string; +}; + // @public (undocumented) export type TranslationApi = { getTranslation< diff --git a/packages/frontend-plugin-api/src/apis/definitions/ToastApi.ts b/packages/frontend-plugin-api/src/apis/definitions/ToastApi.ts index fafe302b6a..4fd85e81db 100644 --- a/packages/frontend-plugin-api/src/apis/definitions/ToastApi.ts +++ b/packages/frontend-plugin-api/src/apis/definitions/ToastApi.ts @@ -51,9 +51,9 @@ export type ToastMessage = { }; /** - * Internal toast message with key for tracking. + * Toast message with key, as returned by the toast$() observable. * - * @internal + * @public */ export type ToastMessageWithKey = ToastMessage & { /** Unique key for the toast, used for programmatic dismiss */ diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index 9eb786c5de..c80da62db9 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -54,7 +54,6 @@ import type { TagGroupProps as TagGroupProps_2 } from 'react-aria-components'; import type { TagListProps } from 'react-aria-components'; import type { TagProps as TagProps_2 } from 'react-aria-components'; import type { TextFieldProps as TextFieldProps_2 } from 'react-aria-components'; -import { ToastQueue } from 'react-stately'; import type { ToggleButtonGroupProps as ToggleButtonGroupProps_2 } from 'react-aria-components'; import type { ToggleButtonProps as ToggleButtonProps_2 } from 'react-aria-components'; import { TooltipProps as TooltipProps_2 } from 'react-aria-components'; @@ -2180,52 +2179,6 @@ export type TextVariants = // @public (undocumented) export type TextWeights = 'regular' | 'bold'; -// @public -export const ToastContainer: ForwardRefExoticComponent< - ToastContainerProps & RefAttributes ->; - -// @public -export const ToastContainerDefinition: { - readonly styles: { - readonly [key: string]: string; - }; - readonly classNames: { - readonly container: 'bui-ToastContainer'; - }; - readonly propDefs: { - readonly queue: {}; - readonly className: {}; - }; -}; - -// @public -export type ToastContainerOwnProps = { - queue: ToastQueue; - className?: string; -}; - -// @public -export interface ToastContainerProps extends ToastContainerOwnProps {} - -// @public -export interface ToastContent { - description?: ReactNode; - icon?: boolean | ReactElement; - links?: ToastLink[]; - status?: 'info' | 'success' | 'warning' | 'danger'; - title: ReactNode; -} - -// @public -export interface ToastLink { - href: string; - label: string; -} - -// @public -export const toastQueue: ToastQueue; - // @public (undocumented) export const ToggleButton: ForwardRefExoticComponent< ToggleButtonProps & RefAttributes diff --git a/plugins/app/report.api.md b/plugins/app/report.api.md index 256517b86f..c950aa4f3a 100644 --- a/plugins/app/report.api.md +++ b/plugins/app/report.api.md @@ -15,9 +15,11 @@ import { ExtensionDataRef } from '@backstage/frontend-plugin-api'; import { ExtensionInput } from '@backstage/frontend-plugin-api'; import { IconComponent } from '@backstage/frontend-plugin-api'; import { JSX as JSX_2 } from 'react'; +import { JSX as JSX_3 } from 'react/jsx-runtime'; import { NavContentComponent } from '@backstage/plugin-app-react'; import { OverridableExtensionDefinition } from '@backstage/frontend-plugin-api'; import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api'; +import type { ReactElement } from 'react'; import { ReactNode } from 'react'; import { RouteRef } from '@backstage/frontend-plugin-api'; import { SignInPageProps } from '@backstage/plugin-app-react'; @@ -698,6 +700,21 @@ const appPlugin: OverridableFrontendPlugin< params: ApiFactory, ) => ExtensionBlueprintParams; }>; + 'api:app/toast': OverridableExtensionDefinition<{ + kind: 'api'; + name: 'toast'; + config: {}; + configInput: {}; + output: ExtensionDataRef; + inputs: {}; + params: < + TApi, + TImpl extends TApi, + TDeps extends { [name in string]: unknown }, + >( + params: ApiFactory, + ) => ExtensionBlueprintParams; + }>; 'api:app/translations': OverridableExtensionDefinition<{ config: {}; configInput: {}; @@ -1004,5 +1021,33 @@ const appPlugin: OverridableFrontendPlugin< >; export default appPlugin; +// @public +export interface ToastContent { + description?: ReactNode; + icon?: boolean | ReactElement; + links?: ToastLink[]; + status?: 'info' | 'success' | 'warning' | 'danger'; + title: ReactNode; +} + +// @public +export function ToastDisplay(props: ToastDisplayProps): JSX_3.Element; + +// @public +export interface ToastDisplayProps { + // @deprecated + anchorOrigin?: { + vertical: 'top' | 'bottom'; + horizontal: 'left' | 'center' | 'right'; + }; + transientTimeoutMs?: number; +} + +// @public +export interface ToastLink { + href: string; + label: string; +} + // (No @packageDocumentation comment for this package) ``` diff --git a/plugins/app/src/components/Toast/index.ts b/plugins/app/src/components/Toast/index.ts index ccb9ba6c1e..eb6d7574a8 100644 --- a/plugins/app/src/components/Toast/index.ts +++ b/plugins/app/src/components/Toast/index.ts @@ -14,12 +14,11 @@ * limitations under the License. */ +// Public exports export { ToastDisplay } from './ToastDisplay'; +export type { ToastContent, ToastLink, ToastDisplayProps } from './types'; + +// Internal exports (used within the plugin only) export { ToastContainer } from './ToastContainer'; export { toastQueue } from './ToastQueue'; -export type { - ToastContent, - ToastLink, - ToastDisplayProps, - ToastContainerProps, -} from './types'; +export type { ToastContainerProps } from './types'; diff --git a/plugins/app/src/components/Toast/types.ts b/plugins/app/src/components/Toast/types.ts index 87a6a77b41..a203211c37 100644 --- a/plugins/app/src/components/Toast/types.ts +++ b/plugins/app/src/components/Toast/types.ts @@ -92,10 +92,11 @@ export interface ToastContainerProps { export interface ToastDisplayProps { /** * Number of milliseconds a transient alert will stay open for. - * @default 5000 + * Defaults to 5000ms. */ transientTimeoutMs?: number; /** + * Position of the toast on screen. * @deprecated Toast uses fixed bottom-center positioning. This prop is ignored. */ anchorOrigin?: { diff --git a/plugins/app/src/index.ts b/plugins/app/src/index.ts index 47a369bd2a..230e82ddd3 100644 --- a/plugins/app/src/index.ts +++ b/plugins/app/src/index.ts @@ -17,10 +17,9 @@ export { appPlugin as default } from './plugin'; // Toast components for alert display -export { ToastDisplay, ToastContainer, toastQueue } from './components/Toast'; +export { ToastDisplay } from './components/Toast'; export type { ToastContent, ToastLink, ToastDisplayProps, - ToastContainerProps, } from './components/Toast';