@public-ui/sample-react 4.3.1-rc.5 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "4.3.1-rc.5",
+  "version": "4.4.0",
   "description": "This app contains samples for the KoliBri/Public UI",
   "type": "module",
   "license": "EUPL-1.2",
@@ -20,8 +20,8 @@
     "typescript": "5.9.3",
     "world_countries_lists": "3.3.0",
     "zod": "4.4.3",
-    "@public-ui/react-hook-form-adapter": "4.3.1-rc.5",
-    "@public-ui/react-v19": "4.3.1-rc.5"
+    "@public-ui/react-hook-form-adapter": "4.4.0",
+    "@public-ui/react-v19": "4.4.0"
   },
   "devDependencies": {
     "@types/react": "19.2.18",
@@ -37,7 +37,7 @@
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "react-router": "8.3.0",
-    "@public-ui/components": "4.3.1-rc.5"
+    "@public-ui/components": "4.4.0"
   },
   "files": [
     "assets",

package/src/components/button/access-key.tsx

@@ -1,12 +1,12 @@
 import { KolButton, KolLink } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonAccessKey: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/components/button/aria-description.tsx

@@ -1,12 +1,12 @@
 import { KolButton } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonAriaDescription: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/components/button/baselined.tsx

@@ -1,12 +1,12 @@
 import { KolButton } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonBaselined: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/components/button/basic.tsx

@@ -1,12 +1,12 @@
 import { KolButton } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonBasic: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/components/button/buttons-in-fixed-grid.tsx

@@ -1,11 +1,11 @@
 import { KolButton, KolLinkButton } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonInFixedGrid: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/components/button/disabled.tsx

@@ -1,12 +1,12 @@
 import { KolButton } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonDisabled: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/components/button/expert-slot.tsx

@@ -1,7 +1,7 @@
 import { KolButton, KolIcon } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
@@ -10,7 +10,7 @@ import './expert-slot.tooltip.scss';
 const KolTooltip = 'kol-tooltip-wc' as unknown as React.FC<{ _label: string }>;
 
 export const ButtonExpertSlot: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/components/button/hide-label.tsx

@@ -1,12 +1,12 @@
 import { KolButton } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonHideLabel: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/components/button/icons.tsx

@@ -1,12 +1,12 @@
 import { KolButton } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonIcons: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,
 	};

package/src/components/button/short-key.tsx

@@ -1,12 +1,12 @@
 import { KolAlert, KolButton, KolLink } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonShortKey: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/components/button/spinner.tsx

@@ -1,12 +1,12 @@
 import { KolButton } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonSpinner: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/components/button/variants.tsx

@@ -2,7 +2,7 @@ import { KolButton } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
 import { useSearchParams } from 'react-router';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { fetchVariantData } from '../../shares/fetchVariantData';
 import { getTheme } from '../../shares/store';
 import { SampleBlock } from '../SampleBlock';
@@ -13,7 +13,7 @@ export const ButtonVariants: FC = () => {
 	const theme = searchParams.get('theme') ?? getTheme();
 	const data = useMemo(() => (theme ? fetchVariantData(theme, 'buttonVariants') : []), [theme]);
 
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/components/button/width.tsx

@@ -1,12 +1,12 @@
 import { KolButton } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonWidth: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const ARGS = {
 		className: 'w-8rem',

package/src/components/button-link/basic.tsx

@@ -1,14 +1,12 @@
-import React from 'react';
-
 import { KolButtonLink, KolHeading } from '@public-ui/react-v19';
-
 import type { FC } from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import React from 'react';
+import { useAlert } from '../../hooks/useAlert';
 import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonLinkBasic: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/components/handout/basic.tsx

@@ -35,7 +35,7 @@ import {
 import type { ComponentProps, FC } from 'react';
 import React from 'react';
 
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { getRoot } from '../../shares/react-roots';
 import { getTheme, getThemeName } from '../../shares/store';
 import { TABLE_DATA, type TableDataType } from './table-data';
@@ -43,7 +43,7 @@ import { TABLE_DATA, type TableDataType } from './table-data';
 type KolButtonProps = ComponentProps<typeof KolButton>;
 
 function KolButtonWrapper(props: KolButtonProps & { style: Record<string, unknown> }) {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,
 	};
@@ -182,7 +182,7 @@ const renderCellContent = (element: HTMLElement, content: React.ReactNode) => {
 };
 
 export const HandoutBasic: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/components/input-text/expert-slot.tsx

@@ -8,6 +8,9 @@ export const InputTextExpertSlot = () => {
 		<div className="grid gap-4">
 			<SampleDescription>
 				<p>This sample shows KolInputText with expert slot. The expert slot allows for complex custom content beyond simple text inputs.</p>
+				<p>
+					For further information on the expert slot see its <a href="https://public-ui.github.io/docs/concepts/expert-slot">documentation</a>
+				</p>
 			</SampleDescription>
 
 			<SampleBlock id="text">

package/src/components/link/on-click.tsx

@@ -0,0 +1,166 @@
+import type { FC } from 'react';
+import React, { useState } from 'react';
+
+import { KolLink } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
+import { SampleDescription } from '../SampleDescription';
+
+export const LinkOnClick: FC = () => {
+	const [clickCount, setClickCount] = useState(0);
+
+	// Test 1: onClick ohne preventDefault - sollte navigieren UND onClick ausführen
+	const onClickWithoutPrevent = {
+		onClick: (event: Event, href: string) => {
+			console.log('Test 1: onClick ohne preventDefault', { event, href });
+			setClickCount((c) => c + 1);
+			// Kein preventDefault - Navigation sollte stattfinden
+		},
+	};
+
+	// Test 2: onClick mit preventDefault - sollte NUR onClick ausführen, NICHT navigieren
+	const onClickWithPrevent = {
+		onClick: (event: Event, href: string) => {
+			console.log('Test 2: onClick mit preventDefault', { event, href });
+			setClickCount((c) => c + 1);
+			event.preventDefault();
+			// Navigation sollte blockiert sein
+		},
+	};
+
+	// Test 3: onClick mit return false - sollte NUR onClick ausführen, NICHT navigieren
+	const onClickWithReturnFalse = {
+		onClick: (event: Event, href: string) => {
+			console.log('Test 3: onClick mit return false', { event, href });
+			setClickCount((c) => c + 1);
+			return false;
+			// Navigation sollte blockiert sein
+		},
+	};
+
+	// Test 4: onClick mit useNavigate (React Router Pattern)
+	// Dies ist der Use-Case aus Issue #10726
+	const onClickWithNavigate = {
+		onClick: (event: Event, href: string) => {
+			console.log('Test 4: onClick mit simulate navigate', { event, href });
+			setClickCount((c) => c + 1);
+			event.preventDefault();
+			// Simuliere useNavigate.navigate("/home") - sollte NICHT zu href navigieren
+			console.log('Simulated navigate to:', href);
+		},
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample demonstrates the issue described in{' '}
+					<a href="https://github.com/public-ui/kolibri/issues/10726" target="_blank" rel="noopener noreferrer">
+						#10726
+					</a>
+					.
+					<br />
+					Test the behavior of KolLink with onClick handlers and compare it to native &lt;a&gt; tags.
+				</p>
+				<p>
+					<strong>Expected behavior (like native &lt;a&gt; tag):</strong>
+					<ul>
+						<li>onClick without preventDefault: Execute onClick AND navigate to href</li>
+						<li>onClick with preventDefault: Execute onClick, BLOCK navigation</li>
+						<li>onClick returning false: Execute onClick, BLOCK navigation</li>
+					</ul>
+				</p>
+				<p>
+					<strong>Current behavior (Issue #10726):</strong>
+					<ul>
+						<li>❌ onClick with preventDefault: Still navigates to href (should only execute onClick)</li>
+						<li>❌ onClick returning false: Still navigates to href (should only execute onClick)</li>
+					</ul>
+				</p>
+			</SampleDescription>
+
+			<SampleBlock id="on-click">
+				<div className="grid gap-4">
+					{/* Info Panel */}
+					<div className="bg-gray-100 p-4 rounded">
+						<h2 className="h3 mb-2">Test Results</h2>
+						<p>
+							<strong>onClick executions:</strong> {clickCount}
+						</p>
+						<p className="text-sm text-gray-600">(Open browser console to see detailed logs)</p>
+						<p className="text-sm text-gray-600">
+							Note: This demo uses href=&quot;#test&quot; to avoid actual page reloads. Check the URL hash and console output.
+						</p>
+					</div>
+
+					{/* Test 1: onClick ohne preventDefault */}
+					<div className="bg-white p-4 rounded border">
+						<h3 className="h4 mb-2">Test 1: onClick ohne preventDefault</h3>
+						<p className="text-sm text-gray-600 mb-2">Expected: Click increments counter AND adds #test-1 to URL</p>
+						<KolLink _href="#test-1" _label="Click me (no preventDefault)" _on={onClickWithoutPrevent} _inline={false} />
+					</div>
+
+					{/* Test 2: onClick mit preventDefault */}
+					<div className="bg-white p-4 rounded border">
+						<h3 className="h4 mb-2">Test 2: onClick mit preventDefault()</h3>
+						<p className="text-sm text-gray-600 mb-2">Expected: Click increments counter but does NOT add #test-2 to URL</p>
+						<KolLink _href="#test-2" _label="Click me (with preventDefault)" _on={onClickWithPrevent} _inline={false} />
+					</div>
+
+					{/* Test 3: onClick mit return false */}
+					<div className="bg-white p-4 rounded border">
+						<h3 className="h4 mb-2">Test 3: onClick returning false</h3>
+						<p className="text-sm text-gray-600 mb-2">Expected: Click increments counter but does NOT add #test-3 to URL</p>
+						<KolLink _href="#test-3" _label="Click me (return false)" _on={onClickWithReturnFalse} _inline={false} />
+					</div>
+
+					{/* Test 4: useNavigate Pattern (Issue #10726) */}
+					<div className="bg-white p-4 rounded border">
+						<h3 className="h4 mb-2">Test 4: useNavigate Pattern (Issue #10726)</h3>
+						<p className="text-sm text-gray-600 mb-2">Expected: Click logs navigate action but does NOT add #test-4 to URL</p>
+						<KolLink _href="#test-4" _label="Click me (simulate useNavigate)" _on={onClickWithNavigate} _inline={false} />
+					</div>
+
+					{/* Vergleich: Natives <a>-Tag */}
+					<div className="bg-white p-4 rounded border">
+						<h3 className="h4 mb-2">Reference: Native &lt;a&gt; Tag</h3>
+						<p className="text-sm text-gray-600 mb-2">Test native &lt;a&gt; tag behavior for comparison</p>
+						<div className="grid gap-2">
+							<a
+								href="#native-test-1"
+								onClick={() => {
+									console.log('Native a: onClick ohne preventDefault');
+									setClickCount((c) => c + 1);
+								}}
+								className="btn btn-primary"
+							>
+								Native: No preventDefault
+							</a>
+							<a
+								href="#native-test-2"
+								onClick={(event: React.MouseEvent) => {
+									console.log('Native a: onClick mit preventDefault');
+									setClickCount((c) => c + 1);
+									event.preventDefault();
+								}}
+								className="btn btn-primary"
+							>
+								Native: With preventDefault
+							</a>
+							<a
+								href="#native-test-3"
+								onClick={() => {
+									console.log('Native a: onClick mit return false');
+									setClickCount((c) => c + 1);
+									return false;
+								}}
+								className="btn btn-primary"
+							>
+								Native: Return false
+							</a>
+						</div>
+					</div>
+				</div>
+			</SampleBlock>
+		</>
+	);
+};

package/src/components/link/routes.ts

@@ -6,6 +6,7 @@ import { LinkIcons } from './icons';
 import { LinkImage } from './image';
 import { LinkReactRouter } from './link-react-router';
 import { LinkHeadline } from './linked-headline';
+import { LinkOnClick } from './on-click';
 import { LinkShortKey } from './short-key';
 import { LinkTarget } from './target';
 import { LinkVariant } from './variant';
@@ -21,6 +22,7 @@ export const LINK_ROUTES: Routes = {
 		'short-key': LinkShortKey,
 		'react-router': LinkReactRouter,
 		'linked-headline': LinkHeadline,
+		'on-click': LinkOnClick,
 		'link-variant': LinkVariant,
 	},
 };

package/src/components/link-button/basic.tsx

@@ -4,7 +4,7 @@ import { KolLinkButton } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { useSearchParams } from 'react-router';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { fetchVariantData } from '../../shares/fetchVariantData';
 import { getTheme } from '../../shares/store';
 import { SampleBlock } from '../SampleBlock';
@@ -15,7 +15,7 @@ export const LinkButtonBasic: FC = () => {
 	const theme = searchParams.get('theme') ?? getTheme();
 	const data = useMemo(() => (theme ? fetchVariantData(theme, 'buttonVariants') : []), [theme]);
 
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/components/popover-button/basic.tsx

@@ -2,11 +2,11 @@ import type { ToolbarItemsPropType } from '@public-ui/components';
 import { KolHeading, KolPopoverButton, KolToolbar } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useEffect } from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { SampleDescription } from '../SampleDescription';
 
 export const PopoverButtonBasic: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 	const buttonRef = React.useRef<HTMLKolPopoverButtonElement | null>(null);
 
 	const dummyEventHandler = {

package/src/components/split-button/basic.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 
 import type { ToolbarItemsPropType } from '@public-ui/components';
 import { KolSplitButton, KolToolbar } from '@public-ui/react-v19';
-import { useToasterService } from '../../hooks/useToasterService';
 import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
+import { useAlert } from '../../hooks/useAlert';
 
 export const SplitButtonBasic: FC = () => {
-	const { buttonWithTextClickEventHandler } = useToasterService();
+	const { buttonWithTextClickEventHandler } = useAlert();
 	const dummyEventHandler = {
 		onClick: buttonWithTextClickEventHandler,
 	};

package/src/components/table/action-columns.tsx

@@ -21,6 +21,7 @@ const HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {
 				type: 'action',
 				key: 'actions',
 				label: 'Actions',
+				textAlign: 'left',
 				width: 250,
 				actions: (row) => {
 					const simpleRow = row as ProjectTask;
@@ -58,6 +59,7 @@ const HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {
 				type: 'action',
 				key: 'externalActions',
 				label: 'External Actions',
+				textAlign: 'right',
 				width: 280,
 				actions: (row) => {
 					const simpleRow = row as ProjectTask;

package/src/components/table/interactive-child-elements.tsx

@@ -2,14 +2,14 @@ import type { KoliBriTableCell, KoliBriTableHeaderCell, VariantClassNamePropType
 import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react-v19';
 import type { ComponentProps, FC } from 'react';
 import React from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
 
 type KolButtonProps = ComponentProps<typeof KolButton>;
 
 function KolButtonWrapper(props: KolButtonProps) {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,
 	};

package/src/components/table/render-cell.tsx

@@ -8,7 +8,7 @@ import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';
 
 import type { IconsPropType, KoliBriTableCell, KoliBriTableHeaders } from '@public-ui/components';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 
 type Data = {
 	order: number;
@@ -41,7 +41,7 @@ function generateDataEntries(n: number): Data[] {
 const DATA: Data[] = generateDataEntries(100);
 
 function KolButtonWrapper({ label, icons }: { label: string; icons: IconsPropType }) {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/components/table/stateless-with-selection.tsx

@@ -2,7 +2,7 @@ import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys
 import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { getRoot } from '../../shares/react-roots';
 import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
@@ -22,7 +22,7 @@ const DATA = [
 type Data = (typeof DATA)[0];
 
 function KolButtonWrapper({ label }: { label: string }) {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/components/table/stateless-with-single-selection.tsx

@@ -2,7 +2,7 @@ import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys
 import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
+import { useAlert } from '../../hooks/useAlert';
 import { getRoot } from '../../shares/react-roots';
 import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
@@ -21,7 +21,7 @@ const DATA = [
 type Data = (typeof DATA)[0];
 
 function KolButtonWrapper({ label }: { label: string }) {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/hooks/{useToasterService.ts → useAlert.ts}

@@ -1,14 +1,6 @@
-import { ToasterService } from '@public-ui/components';
-
-export function useToasterService() {
-	const toaster = ToasterService.getInstance(document);
-
+export function useAlert() {
 	const message = (message?: string) => {
-		void toaster.enqueue({
-			description: message || 'Hello',
-			label: `Hello`,
-			type: 'info',
-		});
+		void alert(message || 'The Element was clicked');
 	};
 
 	const dummyClickEventHandler = () => {

package/src/scenarios/custom-tooltip-css-properties.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 
 import { KolButton } from '@public-ui/react-v19';
 import { SampleDescription } from '../components/SampleDescription';
-import { useToasterService } from '../hooks/useToasterService';
+import { useAlert } from '../hooks/useAlert';
 
 export const CustomTooltipCssProperties: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/scenarios/disabled-interactive-elements.tsx

@@ -22,7 +22,7 @@ import {
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';
-import { useToasterService } from '../hooks/useToasterService';
+import { useAlert } from '../hooks/useAlert';
 
 const OPTIONS = [
 	{
@@ -36,7 +36,7 @@ const OPTIONS = [
 ];
 
 export const DisabledInteractiveElements: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/scenarios/same-height-of-all-interactive-elements.tsx

@@ -17,10 +17,10 @@ import {
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';
-import { useToasterService } from '../hooks/useToasterService';
+import { useAlert } from '../hooks/useAlert';
 
 export const SameHeightOfAllInteractiveElements: FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,

package/src/scenarios/sample-form-with-validation.tsx

@@ -21,7 +21,7 @@ import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { SampleDescription } from '../components/SampleDescription';
-import { useToasterService } from '../hooks/useToasterService';
+import { useAlert } from '../hooks/useAlert';
 import { COUNTRY_SUGGESTIONS } from '../shares/country';
 
 const formSchema = z.object({
@@ -52,7 +52,7 @@ const formSchema = z.object({
 });
 
 export const SampleFormWithValidation: React.FC = () => {
-	const { dummyClickEventHandler } = useToasterService();
+	const { dummyClickEventHandler } = useAlert();
 	const {
 		handleSubmit,
 		formState: { errors },