Toast Service: Convert Toast to internal functional component and allow render function instead of description string

packages/components/src/components.d.ts

@@ -59,8 +59,7 @@ import { SpinVariantPropType } from "./types/props/variant/spin";
 import { KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps } from "./components/table/types";
 import { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/types";
 import { CSSResize } from "./components/textarea/types";
-import { KoliBriToastEventCallbacks } from "./types/toast";
-import { Toast, ToastState, ToastStatus } from "./components/toast-container/types";
+import { Toast, ToastState } from "./components/toast-container/types";
 export { LabelPropType, LabelWithExpertSlotPropType } from "./types/props/label";
 export { TooltipAlignPropType } from "./types/props/tooltip-align";
 export { HeadingLevel } from "./types/heading-level";
@@ -115,8 +114,7 @@ export { SpinVariantPropType } from "./types/props/variant/spin";
 export { KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps } from "./components/table/types";
 export { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/types";
 export { CSSResize } from "./components/textarea/types";
-export { KoliBriToastEventCallbacks } from "./types/toast";
-export { Toast, ToastState, ToastStatus } from "./components/toast-container/types";
+export { Toast, ToastState } from "./components/toast-container/types";
 export namespace Components {
     interface KolAbbr {
         /**
@@ -2433,24 +2431,6 @@ export namespace Components {
          */
         "_value"?: string;
     }
-    interface KolToast {
-        /**
-          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
-         */
-        "_label": LabelPropType;
-        /**
-          * Defines the event callback functions for the component.
-         */
-        "_on"?: KoliBriToastEventCallbacks;
-        /**
-          * Defines the current toast status.
-         */
-        "_status": ToastStatus;
-        /**
-          * Defines either the type of the component or of the components interactive element.
-         */
-        "_type"?: AlertType;
-    }
     interface KolToastContainer {
         "enqueue": (toast: Toast) => Promise<void>;
     }
@@ -2809,12 +2789,6 @@ declare global {
         prototype: HTMLKolTextareaElement;
         new (): HTMLKolTextareaElement;
     };
-    interface HTMLKolToastElement extends Components.KolToast, HTMLStencilElement {
-    }
-    var HTMLKolToastElement: {
-        prototype: HTMLKolToastElement;
-        new (): HTMLKolToastElement;
-    };
     interface HTMLKolToastContainerElement extends Components.KolToastContainer, HTMLStencilElement {
     }
     var HTMLKolToastContainerElement: {
@@ -2889,7 +2863,6 @@ declare global {
         "kol-table": HTMLKolTableElement;
         "kol-tabs": HTMLKolTabsElement;
         "kol-textarea": HTMLKolTextareaElement;
-        "kol-toast": HTMLKolToastElement;
         "kol-toast-container": HTMLKolToastContainerElement;
         "kol-tooltip-wc": HTMLKolTooltipWcElement;
         "kol-version": HTMLKolVersionElement;
@@ -5211,24 +5184,6 @@ declare namespace LocalJSX {
          */
         "_value"?: string;
     }
-    interface KolToast {
-        /**
-          * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
-         */
-        "_label": LabelPropType;
-        /**
-          * Defines the event callback functions for the component.
-         */
-        "_on"?: KoliBriToastEventCallbacks;
-        /**
-          * Defines the current toast status.
-         */
-        "_status": ToastStatus;
-        /**
-          * Defines either the type of the component or of the components interactive element.
-         */
-        "_type"?: AlertType;
-    }
     interface KolToastContainer {
     }
     interface KolTooltipWc {
@@ -5307,7 +5262,6 @@ declare namespace LocalJSX {
         "kol-table": KolTable;
         "kol-tabs": KolTabs;
         "kol-textarea": KolTextarea;
-        "kol-toast": KolToast;
         "kol-toast-container": KolToastContainer;
         "kol-tooltip-wc": KolTooltipWc;
         "kol-version": KolVersion;
@@ -5375,7 +5329,6 @@ declare module "@stencil/core" {
             "kol-table": LocalJSX.KolTable & JSXBase.HTMLAttributes<HTMLKolTableElement>;
             "kol-tabs": LocalJSX.KolTabs & JSXBase.HTMLAttributes<HTMLKolTabsElement>;
             "kol-textarea": LocalJSX.KolTextarea & JSXBase.HTMLAttributes<HTMLKolTextareaElement>;
-            "kol-toast": LocalJSX.KolToast & JSXBase.HTMLAttributes<HTMLKolToastElement>;
             "kol-toast-container": LocalJSX.KolToastContainer & JSXBase.HTMLAttributes<HTMLKolToastContainerElement>;
             "kol-tooltip-wc": LocalJSX.KolTooltipWc & JSXBase.HTMLAttributes<HTMLKolTooltipWcElement>;
             "kol-version": LocalJSX.KolVersion & JSXBase.HTMLAttributes<HTMLKolVersionElement>;

packages/components/src/components/component-list.ts

@@ -54,7 +54,6 @@ import { KolTable } from './table/component';
 import { KolTabs } from './tabs/component';
 import { KolTextarea } from './textarea/component';
 import { KolToastContainer } from './toast-container/component';
-import { KolToast } from './toast/component';
 import { KolTooltip } from './tooltip/component';
 import { KolVersion } from './version/component';
 
@@ -114,7 +113,6 @@ export const COMPONENTS = [
 	KolTable,
 	KolTabs,
 	KolTextarea,
-	KolToast,
 	KolToastContainer,
 	KolTooltip,
 	KolVersion,

packages/components/src/components/toast-container/ToastFC.tsx

@@ -0,0 +1,32 @@
+import { h } from '@stencil/core';
+import { ToastState } from './types';
+
+type Props = {
+	toastState: ToastState;
+	onClose: () => void;
+	key: string;
+};
+export const ToastFC = ({ toastState, onClose, key }: Props) => {
+	const handleRef = (element?: HTMLDivElement) => {
+		if (typeof toastState.toast.render === 'function' && element) {
+			toastState.toast.render(element, { close: () => onClose() });
+		}
+	};
+
+	return (
+		<div class={`toast ${toastState.status}`} key={key}>
+			<kol-alert
+				class="alert"
+				_alert={true}
+				_label={toastState.toast.label}
+				_level={0}
+				_hasCloser={true}
+				_type={toastState.toast.type}
+				_variant="card"
+				_on={{ onClose }}
+			>
+				<div ref={handleRef}>{typeof toastState.toast.description === 'string' ? toastState.toast.description : null}</div>
+			</kol-alert>
+		</div>
+	);
+};

packages/components/src/components/toast-container/component.tsx

@@ -3,6 +3,7 @@ import { Component, Fragment, h, JSX, Method, State } from '@stencil/core';
 import { translate } from '../../i18n';
 import { nonce } from '../../utils/dev.utils';
 import { API, States, Toast, ToastState } from './types';
+import { ToastFC } from './ToastFC';
 
 const TRANSITION_TIMEOUT = 300;
 
@@ -90,15 +91,7 @@ export class KolToastContainer implements API {
 					<kol-button _label={translate('kol-toast-close-all')} class="close-all" _on={{ onClick: this.handleCloseAllClick.bind(this) }}></kol-button>
 				)}
 				{this.state._toastStates.map((toastState) => (
-					<kol-toast
-						_label={toastState.toast.label}
-						_status={toastState.status}
-						_type={toastState.toast.type}
-						_on={{ onClose: () => this.handleClose(toastState) }}
-						key={toastState.id}
-					>
-						{toastState.toast.description}
-					</kol-toast>
+					<ToastFC toastState={toastState} onClose={() => this.handleClose(toastState)} key={toastState.id} />
 				))}
 			</Fragment>
 		);

packages/components/src/components/toast/toaster.tsx → packages/components/src/components/toast-container/toaster.tsx

@@ -1,4 +1,4 @@
-import { Toast } from '../toast-container/types';
+import { Toast } from './types';
 
 export class ToasterService {
 	private static readonly instances: Map<Document, ToasterService> = new Map<Document, ToasterService>();

packages/components/src/components/toast-container/types.ts

@@ -3,11 +3,12 @@ import { Generic } from '@a11y-ui/core';
 import { LabelPropType } from '../../types/props/label';
 import { AlertType } from '../alert/types';
 
-export const toastStatusOptions = ['adding', 'settled', 'removing'] as const;
-export type ToastStatus = (typeof toastStatusOptions)[number];
+const toastStatusOptions = ['adding', 'settled', 'removing'] as const;
+type ToastStatus = (typeof toastStatusOptions)[number];
 
 export type Toast = {
-	description: string;
+	description?: string;
+	render?: (nodeRef: HTMLElement, options: { close: () => void }) => void;
 	label: LabelPropType;
 	type: AlertType;
 };