@public-ui/sample-react 2.1.7 → 2.1.8

package/src/components/table/complex-headers.tsx

@@ -9,84 +9,86 @@ export const TableComplexHeaders: FC = () => (
 			<p>This sample shows KolTable using vertical and horizontal headers, applying colspan and rowspan.</p>
 		</SampleDescription>
 
-		<KolTable
-			_label="Business hours"
-			_data={[
-				{
-					asp: 'Center',
-					monday: '08:00',
-					tuesday: '08:00',
-					wednesday: '10:00',
-					thursday: '11:00',
-					friday: '08:00',
-				},
-				{
-					asp: 'Tiergarten',
-					monday: '08:00',
-					tuesday: '08:00',
-					wednesday: '10:00',
-					thursday: '11:00',
-					friday: '08:00',
-				},
-				{
-					asp: 'Maxvorstadt',
-					monday: '08:00',
-					tuesday: '08:00',
-					wednesday: '10:00',
-					thursday: '11:00',
-					friday: '08:00',
-				},
-			]}
-			_headers={{
-				vertical: [[{ label: 'Berlin', rowSpan: 2 }, { label: 'München' }]],
-				horizontal: [
-					[
-						{
-							label: '',
-							colSpan: 7,
-						},
-						{
-							label: 'Weekend',
-							colSpan: 2,
-						},
+		<section className="w-full flex flex-col">
+			<KolTable
+				_label="Business hours"
+				_data={[
+					{
+						asp: 'Center',
+						monday: '08:00',
+						tuesday: '08:00',
+						wednesday: '10:00',
+						thursday: '11:00',
+						friday: '08:00',
+					},
+					{
+						asp: 'Tiergarten',
+						monday: '08:00',
+						tuesday: '08:00',
+						wednesday: '10:00',
+						thursday: '11:00',
+						friday: '08:00',
+					},
+					{
+						asp: 'Maxvorstadt',
+						monday: '08:00',
+						tuesday: '08:00',
+						wednesday: '10:00',
+						thursday: '11:00',
+						friday: '08:00',
+					},
+				]}
+				_headers={{
+					vertical: [[{ label: 'Berlin', rowSpan: 2 }, { label: 'München' }]],
+					horizontal: [
+						[
+							{
+								label: '',
+								colSpan: 7,
+							},
+							{
+								label: 'Weekend',
+								colSpan: 2,
+							},
+						],
+						[
+							{ label: '' },
+							{
+								label: 'District',
+								key: 'asp',
+							},
+							{
+								label: 'Monday',
+								key: 'monday',
+							},
+							{
+								label: 'Tuesday',
+								key: 'tuesday',
+							},
+							{
+								label: 'Wednesday',
+								key: 'wednesday',
+							},
+							{
+								label: 'Thursday',
+								key: 'thursday',
+							},
+							{
+								label: 'Friday',
+								key: 'friday',
+							},
+							{
+								label: 'Saturday',
+								key: 'saturday',
+							},
+							{
+								label: 'Sunday',
+								key: 'sunday',
+							},
+						],
 					],
-					[
-						{ label: '' },
-						{
-							label: 'District',
-							key: 'asp',
-						},
-						{
-							label: 'Monday',
-							key: 'monday',
-						},
-						{
-							label: 'Tuesday',
-							key: 'tuesday',
-						},
-						{
-							label: 'Wednesday',
-							key: 'wednesday',
-						},
-						{
-							label: 'Thursday',
-							key: 'thursday',
-						},
-						{
-							label: 'Friday',
-							key: 'friday',
-						},
-						{
-							label: 'Saturday',
-							key: 'saturday',
-						},
-						{
-							label: 'Sunday',
-							key: 'sunday',
-						},
-					],
-				],
-			}}
-		/>
+				}}
+			/>
+		</section>
 	</>
 );

package/src/components/table/horizontal-scrollbar.tsx

@@ -29,34 +29,36 @@ export const TableHorizontalScrollbar: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<KolHeading _label="Table with scrollbar" _level={2} />
-
-			<KolTable
-				_label="Table for demonstration purposes with horizontal scrollbar."
-				_minWidth={hasWidthRestriction ? '600px' : 'auto'}
-				_headers={HEADERS}
-				_data={DATA}
-				className="block"
-				style={{ width: '400px' }}
-			/>
-
-			<KolInputCheckbox
-				_checked={hasWidthRestriction}
-				_label="Toggle width restriction"
-				_variant="switch"
-				_on={{
-					onChange: (_event, value) => {
-						setHasWidthRestriction(Boolean(value));
-					},
-				}}
-			></KolInputCheckbox>
-
-			<KolHeading _label="Same table without scrollbar" _level={2} className="block mt-4" />
-			<p className="mt-0">
-				<i>Scrollbar appears on very small viewport sizes</i>
-			</p>
-
-			<KolTable _label="Table for demonstration purposes without horizontal scrollbar" _minWidth="600px" _headers={HEADERS} _data={DATA} className="block" />
+			<section className="w-full flex flex-col">
+				<KolHeading _label="Table with scrollbar" _level={2} />
+
+				<KolTable
+					_label="Table for demonstration purposes with horizontal scrollbar."
+					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+					_headers={HEADERS}
+					_data={DATA}
+					className="block"
+					style={{ width: '400px' }}
+				/>
+
+				<KolInputCheckbox
+					_checked={hasWidthRestriction}
+					_label="Toggle width restriction"
+					_variant="switch"
+					_on={{
+						onChange: (_event, value) => {
+							setHasWidthRestriction(Boolean(value));
+						},
+					}}
+				></KolInputCheckbox>
+
+				<KolHeading _label="Same table without scrollbar" _level={2} className="block mt-4" />
+				<p className="mt-0">
+					<i>Scrollbar appears on very small viewport sizes</i>
+				</p>
+
+				<KolTable _label="Table for demonstration purposes without horizontal scrollbar" _minWidth="600px" _headers={HEADERS} _data={DATA} className="block" />
+			</section>
 		</>
 	);
 };

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

@@ -1,10 +1,20 @@
+import type { ButtonProps, ButtonVariantPropType, KoliBriTableCell, KoliBriTableHeaderCell } from '@public-ui/components';
+import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react';
 import type { FC } from 'react';
 import React from 'react';
-import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react';
-import { SampleDescription } from '../SampleDescription';
 import { getRoot } from '../../shares/react-roots';
-import type { ButtonVariantPropType, KoliBriTableCell } from '@public-ui/components';
-import type { KoliBriTableHeaderCell } from '@public-ui/components/src/schema';
+import { SampleDescription } from '../SampleDescription';
+import { useToasterService } from '../../hooks/useToasterService';
+
+function KolButtonWrapper({ _on, ...other }: ButtonProps) {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return <KolButton {...other} _on={dummyEventHandler} />;
+}
 
 const getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeaderCell => {
 	const capitalizedVariant = variant.charAt(0).toUpperCase() + variant.slice(1);
@@ -19,7 +29,7 @@ const getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeader
 				_icons: { right: 'codicon codicon-squirrel' },
 			};
 			getRoot(createReactRenderElement(element)).render(
-				cell.label === 'button' ? <KolButton {...commonProps} /> : <KolLinkButton _href="#/back-page" {...commonProps} />,
+				cell.label === 'button' ? <KolButtonWrapper {...commonProps} /> : <KolLinkButton _href="#/back-page" {...commonProps} />,
 			);
 		},
 	};
@@ -33,73 +43,75 @@ export const InteractiveChildElements: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolTableStateless
-			_label="Button styles"
-			_headerCells={{
-				horizontal: [
-					[
-						{ label: '', asTd: true, width: '20ex' },
-						getButtonHeaderCell('primary'),
-						getButtonHeaderCell('secondary'),
-						getButtonHeaderCell('normal'),
-						getButtonHeaderCell('danger'),
-						getButtonHeaderCell('ghost'),
+		<section className="w-full flex flex-col">
+			<KolTableStateless
+				_label="Button styles"
+				_headerCells={{
+					horizontal: [
+						[
+							{ label: '', asTd: true, width: '20ex' },
+							getButtonHeaderCell('primary'),
+							getButtonHeaderCell('secondary'),
+							getButtonHeaderCell('normal'),
+							getButtonHeaderCell('danger'),
+							getButtonHeaderCell('ghost'),
+						],
 					],
-				],
-				vertical: [[{ label: 'Button' }, { label: 'Link-Button' }]],
-			}}
-			_data={[
-				{
-					primary: 'button',
-					secondary: 'button',
-					normal: 'button',
-					danger: 'button',
-					ghost: 'button',
-				},
-				{
-					primary: 'link-button',
-					secondary: 'link-button',
-					normal: 'link-button',
-					danger: 'link-button',
-					ghost: 'link-button',
-				},
-			]}
-			className="block"
-		/>
+					vertical: [[{ label: 'Button' }, { label: 'Link-Button' }]],
+				}}
+				_data={[
+					{
+						primary: 'button',
+						secondary: 'button',
+						normal: 'button',
+						danger: 'button',
+						ghost: 'button',
+					},
+					{
+						primary: 'link-button',
+						secondary: 'link-button',
+						normal: 'link-button',
+						danger: 'link-button',
+						ghost: 'link-button',
+					},
+				]}
+				className="block"
+			/>
 
-		<KolTableStateless
-			_label="Link styles"
-			_headerCells={{
-				horizontal: [
-					[
-						{ label: '', asTd: true, width: '20ex' },
-						{
-							key: 'regular',
-							label: 'Regular',
-							textAlign: 'left',
-							render: (element: HTMLElement, cell: KoliBriTableCell) => {
-								const commonProps = {
-									_label: cell.label,
-									_icons: { right: 'codicon codicon-squirrel' },
-								};
-								getRoot(createReactRenderElement(element)).render(
-									cell.label === 'button-link' ? <KolButtonLink {...commonProps} /> : <KolLink _href="#/back-page" {...commonProps} />,
-								);
+			<KolTableStateless
+				_label="Link styles"
+				_headerCells={{
+					horizontal: [
+						[
+							{ label: '', asTd: true, width: '20ex' },
+							{
+								key: 'regular',
+								label: 'Regular',
+								textAlign: 'left',
+								render: (element: HTMLElement, cell: KoliBriTableCell) => {
+									const commonProps = {
+										_label: cell.label,
+										_icons: { right: 'codicon codicon-squirrel' },
+									};
+									getRoot(createReactRenderElement(element)).render(
+										cell.label === 'button-link' ? <KolButtonLink {...commonProps} /> : <KolLink _href="#/back-page" {...commonProps} />,
+									);
+								},
 							},
-						},
+						],
 					],
-				],
-				vertical: [[{ label: 'Link' }, { label: 'Button-Link' }]],
-			}}
-			_data={[
-				{
-					regular: 'link',
-				},
-				{
-					regular: 'button-link',
-				},
-			]}
-			className="block mt"
-		/>
+					vertical: [[{ label: 'Link' }, { label: 'Button-Link' }]],
+				}}
+				_data={[
+					{
+						regular: 'link',
+					},
+					{
+						regular: 'button-link',
+					},
+				]}
+				className="block mt"
+			/>
+		</section>
 	</>
 );

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolTable } from '@public-ui/react';
+import { KolHeading, KolTable } from '@public-ui/react';
 
 import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';
@@ -21,22 +21,24 @@ const HEADERS: KoliBriTableHeaders = {
 const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
 
 export const PaginationPosition: FC = () => (
-	<div className="grid gap-14">
+	<div className="w-full grid gap-14">
 		<SampleDescription>
 			<p>This sample shows KolTable with different pagination positions.</p>
 		</SampleDescription>
 
-		<section>
-			<h2>Table with pagination at the bottom.</h2>
-			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="bottom"></KolTable>
-		</section>
-		<section>
-			<h2>Table with pagination at the top.</h2>
-			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="top"></KolTable>
-		</section>
-		<section>
-			<h2>Table with pagination at both top and bottom.</h2>
-			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="both"></KolTable>
+		<section className="w-full flex flex-col gap-14">
+			<section className="grid gap-4">
+				<KolHeading _level={2} _label="Table with pagination at the bottom."></KolHeading>
+				<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="bottom"></KolTable>
+			</section>
+			<section className="grid gap-4">
+				<KolHeading _level={2} _label="Table with pagination at the top."></KolHeading>
+				<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="top"></KolTable>
+			</section>
+			<section className="grid gap-4">
+				<KolHeading _level={2} _label="Table with pagination at both top and bottom."></KolHeading>
+				<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="both"></KolTable>
+			</section>
 		</section>
 	</div>
 );

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

@@ -7,7 +7,8 @@ import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';
 
-import type { KoliBriTableHeaders } from '@public-ui/components';
+import type { IconsPropType, KoliBriTableHeaders } from '@public-ui/components';
+import { useToasterService } from '../../hooks/useToasterService';
 
 type Data = {
 	order: number;
@@ -32,6 +33,16 @@ const DATA: Data[] = [
 	},
 ];
 
+function KolButtonWrapper({ label, icons }: { label: string; icons: IconsPropType }) {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return <KolButton _label={label} _icons={icons} _on={dummyEventHandler} />;
+}
+
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
@@ -89,7 +100,7 @@ const HEADERS: KoliBriTableHeaders = {
 							}}
 						>
 							<KolInputText _label="Input" />
-							<KolButton _label="Save" _icons={{ left: 'codicon codicon-save' }} />
+							<KolButtonWrapper label="Save" icons={{ left: 'codicon codicon-save' }} />
 						</div>,
 					);
 				},
@@ -104,6 +115,6 @@ export const TableRenderCell: FC = () => (
 			<p>This sample shows KolTable using React render functions for the cell contents.</p>
 		</SampleDescription>
 
-		<KolTable _label="Sort by date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />
+		<KolTable _label="Sort by date column" _data={DATA} _headers={HEADERS} className="w-full" />
 	</>
 );

package/src/components/table/sort-data.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolTable } from '@public-ui/react';
+import { KolHeading, KolTable } from '@public-ui/react';
 import type { KoliBriTableHeaders } from '@public-ui/components';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
@@ -59,12 +59,15 @@ export const TableSortData: FC = () => (
 			<p>This sample shows KolTable with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>
 		</SampleDescription>
 
-		<h2>Vertical</h2>
-
-		<KolTable _label="Sort a date column" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className="block" />
-
-		<h2>Horizontal</h2>
-
-		<KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS_HORIZONTAL} className="block" />
+		<section className="w-full grid gap-4">
+			<section className="grid gap-4">
+				<KolHeading _level={2} _label="Vertical" />
+				<KolTable _label="Sort a date column" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className="block" />
+			</section>
+			<section className="grid gap-4">
+				<KolHeading _level={2} _label="Horizontal" />
+				<KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS_HORIZONTAL} className="block" />
+			</section>
+		</section>
 	</>
 );

package/src/components/table/stateful-with-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` },
@@ -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 TableStatefulWithSelection: FC = () => {
 	const [selectedValue, setSelectedValue] = useState<Data[] | null>();
 
@@ -43,40 +56,47 @@ export const TableStatefulWithSelection: 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 checkboxes for selection enabled.</p>
 			</SampleDescription>
 
-			<KolTableStateful
-				_label="Table with selection checkboxes"
-				_headers={{
-					horizontal: [
-						[
-							{ key: 'id', label: '#ID', textAlign: 'left' },
-							{ key: 'name', label: 'Name', textAlign: 'left' },
+			<section className="w-full">
+				<KolTableStateful
+					_label="Table with selection checkboxes"
+					_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>
 		</>
 	);
 };