@public-ui/sample-react 2.1.7 → 2.1.8

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

@@ -1,8 +1,11 @@
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
-import { KolButton, KolTableStateful } from '@public-ui/react';
+import { KolButton, KolTableStateful, createReactRenderElement } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
+import { getRoot } from '../../shares/react-roots';
+import type { KoliBriTableCell } from '@public-ui/components';
+import { useToasterService } from '../../hooks/useToasterService';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -11,6 +14,16 @@ const DATA = [
 
 type Data = (typeof DATA)[0];
 
+function KolButtonWrapper({ label }: { label: string }) {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return <KolButton _label={label} _on={dummyEventHandler} />;
+}
+
 export const TableStatefulWithSingleSelection: FC = () => {
 	const [selectedValue, setSelectedValue] = useState<Data | null>();
 
@@ -45,40 +58,47 @@ export const TableStatefulWithSingleSelection: FC = () => {
 		};
 	}, [kolTableStatefulRef]);
 
+	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
+		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);
+	};
+
 	return (
 		<>
 			<SampleDescription>
 				<p>This sample shows KolTableStateful with radio buttons for selection enabled.</p>
 			</SampleDescription>
 
-			<KolTableStateful
-				_label="Table with selection radio"
-				_headers={{
-					horizontal: [
-						[
-							{ key: 'id', label: '#ID', textAlign: 'left' },
-							{ key: 'name', label: 'Name', textAlign: 'left' },
+			<section className="w-full">
+				<KolTableStateful
+					_label="Table with selection radio"
+					_headers={{
+						horizontal: [
+							[
+								{ key: 'id', label: '#ID', textAlign: 'left' },
+								{ key: 'name', label: 'Name', textAlign: 'left' },
+								{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
+							],
 						],
-					],
-				}}
-				_data={DATA}
-				_selection={selection}
-				_on={{ onSelectionChange: handleSelectionChangeCallback }}
-				className="block"
-				style={{ maxWidth: '600px' }}
-				ref={kolTableStatefulRef}
-			/>
-			<div className="grid grid-cols-3 items-end gap-4 mt-4">
-				<KolButton
-					_label="getSelection()"
-					_on={{
-						onClick: () => {
-							void handleButtonClick();
-						},
 					}}
-				></KolButton>
-				<pre>{JSON.stringify(selectedValue, null, 2)}</pre>
-			</div>
+					_data={DATA}
+					_selection={selection}
+					_on={{ onSelectionChange: handleSelectionChangeCallback }}
+					className="block"
+					style={{ maxWidth: '600px' }}
+					ref={kolTableStatefulRef}
+				/>
+				<div className="grid grid-cols-3 items-end gap-4 mt-4">
+					<KolButton
+						_label="getSelection()"
+						_on={{
+							onClick: () => {
+								void handleButtonClick();
+							},
+						}}
+					></KolButton>
+					<pre className="text-base">{JSON.stringify(selectedValue, null, 2)}</pre>
+				</div>
+			</section>
 		</>
 	);
 };

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

@@ -1,8 +1,11 @@
 import type { FC } from 'react';
 import React, { useEffect, useState, useRef } from 'react';
-import { KolTableStateless } from '@public-ui/react';
+import { KolButton, KolTableStateless, createReactRenderElement } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableSelection } from '@public-ui/components';
+import { getRoot } from '../../shares/react-roots';
+import type { KoliBriTableCell } from '@public-ui/components';
+import { useToasterService } from '../../hooks/useToasterService';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -10,6 +13,16 @@ const DATA = [
 ];
 type Data = (typeof DATA)[0];
 
+function KolButtonWrapper({ label }: { label: string }) {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return <KolButton _label={label} _on={dummyEventHandler} />;
+}
+
 export const TableStatelessWithSelection: FC = () => {
 	const [selectedKeys, setSelectedKeys] = useState(['AAA1002']);
 
@@ -39,29 +52,36 @@ export const TableStatelessWithSelection: FC = () => {
 		};
 	}, [kolTableStatelessRef]);
 
+	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
+		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);
+	};
+
 	return (
 		<>
 			<SampleDescription>
 				<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>
 			</SampleDescription>
 
-			<KolTableStateless
-				_label="Table with selection checkboxes"
-				_headerCells={{
-					horizontal: [
-						[
-							{ key: 'id', label: '#ID', textAlign: 'left' },
-							{ key: 'name', label: 'Name', textAlign: 'left' },
+			<section className="w-full">
+				<KolTableStateless
+					_label="Table with selection checkboxes"
+					_headerCells={{
+						horizontal: [
+							[
+								{ key: 'id', label: '#ID', textAlign: 'left' },
+								{ key: 'name', label: 'Name', textAlign: 'left' },
+								{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
+							],
 						],
-					],
-				}}
-				_data={DATA}
-				_selection={selection}
-				_on={{ onSelectionChange: handleSelectionChangeCallback }}
-				className="block"
-				style={{ maxWidth: '600px' }}
-				ref={kolTableStatelessRef}
-			/>
+					}}
+					_data={DATA}
+					_selection={selection}
+					_on={{ onSelectionChange: handleSelectionChangeCallback }}
+					className="block"
+					style={{ maxWidth: '600px' }}
+					ref={kolTableStatelessRef}
+				/>
+			</section>
 		</>
 	);
 };

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

@@ -1,8 +1,11 @@
 import type { FC } from 'react';
 import React, { useEffect, useState, useRef } from 'react';
-import { KolTableStateless } from '@public-ui/react';
+import { KolButton, KolTableStateless, createReactRenderElement } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableSelection } from '@public-ui/components';
+import { getRoot } from '../../shares/react-roots';
+import type { KoliBriTableCell } from '@public-ui/components';
+import { useToasterService } from '../../hooks/useToasterService';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -10,6 +13,16 @@ const DATA = [
 ];
 type Data = (typeof DATA)[0];
 
+function KolButtonWrapper({ label }: { label: string }) {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return <KolButton _label={label} _on={dummyEventHandler} />;
+}
+
 export const TableStatelessWithSingleSelection: FC = () => {
 	const [selectedKeys, setSelectedKeys] = useState(['1002']);
 
@@ -40,29 +53,36 @@ export const TableStatelessWithSingleSelection: FC = () => {
 		};
 	}, [kolTableStatelessRef]);
 
+	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
+		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);
+	};
+
 	return (
 		<>
 			<SampleDescription>
 				<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>
 			</SampleDescription>
 
-			<KolTableStateless
-				_label="Table with selection checkboxes"
-				_headerCells={{
-					horizontal: [
-						[
-							{ key: 'id', label: '#ID', textAlign: 'left' },
-							{ key: 'name', label: 'Name', textAlign: 'left' },
+			<section className="w-full">
+				<KolTableStateless
+					_label="Table with selection checkboxes"
+					_headerCells={{
+						horizontal: [
+							[
+								{ key: 'id', label: '#ID', textAlign: 'left' },
+								{ key: 'name', label: 'Name', textAlign: 'left' },
+								{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
+							],
 						],
-					],
-				}}
-				_data={DATA}
-				_selection={selection}
-				_on={{ onSelectionChange: handleSelectionChangeCallback }}
-				className="block"
-				style={{ maxWidth: '600px' }}
-				ref={kolTableStatelessRef}
-			/>
+					}}
+					_data={DATA}
+					_selection={selection}
+					_on={{ onSelectionChange: handleSelectionChangeCallback }}
+					className="block"
+					style={{ maxWidth: '600px' }}
+					ref={kolTableStatelessRef}
+				/>
+			</section>
 		</>
 	);
 };

package/src/components/table/stateless.tsx

@@ -11,34 +11,36 @@ export const TableStateless: FC = () => (
 			<p>This sample shows how KolTableStateless can be used directly, with the KolTableStateful wrapper.</p>
 		</SampleDescription>
 
-		<KolTableStateless
-			_label="Table for demonstration purposes"
-			_headerCells={{
-				horizontal: [
-					[
-						{ key: 'left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },
-						{ key: 'center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },
-						{ key: 'right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },
-						{ key: 'nosort', label: 'no sort option' },
+		<section className="w-full">
+			<KolTableStateless
+				_label="Table for demonstration purposes"
+				_headerCells={{
+					horizontal: [
+						[
+							{ key: 'left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },
+							{ key: 'center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },
+							{ key: 'right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },
+							{ key: 'nosort', label: 'no sort option' },
+						],
 					],
-				],
-				vertical: [
-					[
-						{ key: 'vertical-left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },
-						{ key: 'vertical-center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },
-						{ key: 'vertical-right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },
-						{ key: 'vertical-nosort', label: 'no sort option' },
+					vertical: [
+						[
+							{ key: 'vertical-left', label: 'left', textAlign: 'left', sortDirection: 'ASC' },
+							{ key: 'vertical-center', label: 'center', textAlign: 'center', sortDirection: 'DESC' },
+							{ key: 'vertical-right', label: 'right', textAlign: 'right', sortDirection: 'NOS' },
+							{ key: 'vertical-nosort', label: 'no sort option' },
+						],
 					],
-				],
-			}}
-			_data={DATA}
-			className="block"
-			style={{ maxWidth: '600px' }}
-			_on={{
-				onSort: (_event, payload) => {
-					console.log(payload);
-				},
-			}}
-		/>
+				}}
+				_data={DATA}
+				className="block"
+				style={{ maxWidth: '600px' }}
+				_on={{
+					onSort: (_event, payload) => {
+						console.log(payload);
+					},
+				}}
+			/>
+		</section>
 	</>
 );

package/src/components/table/with-footer.tsx

@@ -10,6 +10,7 @@ export const TableWithFooter: FC = () => (
 		</SampleDescription>
 
 		<KolTable
+			className="w-full"
 			_label="Business hours"
 			_headers={{
 				horizontal: [

package/src/components/table/with-pagination.tsx

@@ -25,7 +25,7 @@ export const TableWithPagination: FC = () => (
 		<SampleDescription>
 			<p>This sample shows how KolTable can be navigated using a pagination.</p>
 		</SampleDescription>
-		<div>
+		<div className="w-full">
 			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTable>
 		</div>
 	</>

package/src/components/tabs/behavior.tsx

@@ -0,0 +1,61 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolHeading, KolTabs } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+
+const tabs = [
+	{
+		_icons: 'codicon codicon-pie-chart',
+		_label: 'First tab',
+		_on: {
+			onSelect: (event: Event) => {
+				console.log('First tab selected', event);
+			},
+		},
+	},
+	{
+		_icons: 'codicon codicon-calendar',
+		_label: 'Second Tab',
+	},
+	{
+		_disabled: true,
+		_icons: 'codicon codicon-briefcase',
+		_label: 'Disabled Tab',
+	},
+	{
+		_icons: 'codicon codicon-telescope',
+		_label: 'Last tab',
+	},
+];
+
+export const TabsBehavior: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows KolTabs with the property <code>_behavior</code> set to <code>select-manual</code> and <code>select-automatic</code>.
+			</p>
+			<p>This property allows controlling when an arrow key is pressed whether the tab change takes place right away or only focuses the tab caption.</p>
+		</SampleDescription>
+		<div className="grid gap-8">
+			<div className="grid gap-4">
+				<KolHeading _level={2} _label='Tabs with "select manual" behavior' />
+				<KolTabs _tabs={tabs} _behavior="select-manual" _label="Tabs with select manual behavior">
+					<div slot="tab-0">Contents of Tab 1</div>
+					<div slot="tab-1">Contents of Tab 2</div>
+					<div slot="tab-2">Contents of Tab 3</div>
+					<div slot="tab-3">Contents of Tab 4</div>
+				</KolTabs>
+			</div>
+			<div className="grid gap-4">
+				<KolHeading _level={2} _label='Tabs with "select automatic" behavior' />
+				<KolTabs _tabs={tabs} className="mt-4" _behavior="select-automatic" _label="Tabs with select automatic behavior">
+					<div slot="tab-0">Contents of Tab 1</div>
+					<div slot="tab-1">Contents of Tab 2</div>
+					<div slot="tab-2">Contents of Tab 3</div>
+					<div slot="tab-3">Contents of Tab 4</div>
+				</KolTabs>
+			</div>
+		</div>
+	</>
+);

package/src/components/tabs/routes.ts

@@ -1,10 +1,12 @@
 import { Routes } from '../../shares/types';
 import { TabsBasic } from './basic';
 import { TabsIconsOnly } from './icons-only';
+import { TabsBehavior } from './behavior';
 
 export const TABS_ROUTES: Routes = {
 	tabs: {
 		basic: TabsBasic,
 		'icons-only': TabsIconsOnly,
+		behavior: TabsBehavior,
 	},
 };

package/src/components/textarea/adjust-height.tsx

@@ -19,7 +19,7 @@ export const TextareaAdjustHeight: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolForm>
+		<KolForm className="w-full">
 			<KolTextarea _adjustHeight={true} _value={VALUE} _label="Text input (auto grow)" />
 		</KolForm>
 	</>

package/src/components/textarea/counter.tsx

@@ -12,6 +12,9 @@ export const TextareaCounter: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolTextarea _label="Textara with counter" _hasCounter={true} />
+		<section className="w-full">
+			<KolTextarea _label="Textara with counter" _hasCounter={true} />
+			<KolTextarea _label="Textara with counter and initial value" _hasCounter={true} _value={'Lorem Ipsum'} className="mt" />
+		</section>
 	</>
 );

package/src/components/textarea/resize.tsx

@@ -12,7 +12,7 @@ export const TextareaResize: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolForm className="grid gap-4">
+		<KolForm className="w-full grid gap-4">
 			<KolTextarea _resize="both" _label="Text input (both)" />
 			<KolTextarea _resize="vertical" _label="Text input (vertical)" className="mt" />
 			<KolTextarea _resize="horizontal" _label="Text input (horizontal)" className="mt" />

package/src/components/textarea/rows.tsx

@@ -13,7 +13,7 @@ export const TextareaRows: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolForm>
+		<KolForm className="w-full">
 			<KolTextarea _rows={10} _label="Texteingabe" />
 		</KolForm>
 	</>

package/src/components/toast/basic.tsx

@@ -71,17 +71,19 @@ export const ToastBasic: FC = () => {
 				<p>This sample demonstrates the toast service with all its options.</p>
 			</SampleDescription>
 
-			<div>
-				<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>{' '}
-				<KolButton _label="Show toast with alert variant 'msg'" _on={{ onClick: handleButtonClickVariantMessage }}></KolButton>{' '}
-				<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
-				<br />
-				<br />
-				<KolButton _label="Show toast and close after 2 seconds" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>
-				<br />
-				<br />
-				<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
-			</div>
+			<section className="grid gap-4">
+				<section className="flex gap-2">
+					<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>
+					<KolButton _label="Show toast with alert variant 'msg'" _on={{ onClick: handleButtonClickVariantMessage }}></KolButton>
+					<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
+				</section>
+				<section className="flex gap-2">
+					<KolButton _label="Show toast and close after 2 seconds" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>
+				</section>
+				<section className="flex gap-2">
+					<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
+				</section>
+			</section>
 		</>
 	);
 };

package/src/hooks/useToasterService.ts

@@ -0,0 +1,21 @@
+import { ToasterService } from '@public-ui/components';
+
+export function useToasterService() {
+	const toaster = ToasterService.getInstance(document);
+
+	const message = () => {
+		void toaster.enqueue({
+			description: 'Hello',
+			label: `Hello`,
+			type: 'info',
+		});
+	};
+
+	const dummyClickEventHandler = () => {
+		message();
+	};
+
+	return {
+		dummyClickEventHandler,
+	};
+}

package/src/react.main.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
 import { setTagNameTransformer } from '@public-ui/react';
 
-import { bootstrap } from '@public-ui/components';
+import { bootstrap, isInitialized } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import { BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
 
@@ -34,6 +34,9 @@ const getThemes = async () => {
 
 void (async () => {
 	try {
+		console.info('bootstap is initialized: ', isInitialized());
+		console.info('start kolibri bootstrap');
+
 		await bootstrap(
 			await getThemes(),
 			() => {
@@ -56,6 +59,8 @@ void (async () => {
 				environment: process.env.NODE_ENV === 'development' ? 'development' : 'production',
 			},
 		);
+
+		console.info('bootstap is initialized: ', isInitialized());
 	} catch (error) {
 		console.warn('Theme registration failed:', error);
 	}

package/src/scenarios/appointment-form/AppointmentForm.tsx

@@ -101,6 +101,7 @@ export function AppointmentForm() {
 
 			<Formik<FormValues> innerRef={formikRef} initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
 				<KolTabs
+					className="w-full"
 					_tabs={[
 						{
 							_label: '1. Choose registration office',

package/src/scenarios/custom-tooltip-width.tsx

@@ -3,16 +3,31 @@ import React from 'react';
 
 import { KolButton } from '@public-ui/react';
 import { SampleDescription } from '../components/SampleDescription';
+import { useToasterService } from '../hooks/useToasterService';
 
-export const CustomTooltipWidth: FC = () => (
-	<>
-		<SampleDescription>
-			<p>
-				This sample demonstrates how a tooltip&apos;s width can be adjusted by defining the CSS custom property <code>--kol-tooltip-width</code> on one of the
-				parent elements.
-			</p>
-		</SampleDescription>
+export const CustomTooltipWidth: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
 
-		<KolButton _label="Tooltip with fixed width" _hideLabel style={{ '--kol-tooltip-width': '400px' }} _icons="codicon codicon-reactions"></KolButton>
-	</>
-);
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample demonstrates how a tooltip&apos;s width can be adjusted by defining the CSS custom property <code>--kol-tooltip-width</code> on one of the
+					parent elements.
+				</p>
+			</SampleDescription>
+
+			<KolButton
+				_label="Tooltip with fixed width"
+				_hideLabel
+				style={{ '--kol-tooltip-width': '400px' }}
+				_icons="codicon codicon-reactions"
+				_on={dummyEventHandler}
+			></KolButton>
+		</>
+	);
+};