@public-ui/sample-react 2.1.3 → 2.1.4-alpha.1

package/src/components/handout/table-data.ts

@@ -0,0 +1,543 @@
+export const TABLE_DATA = [
+	{
+		montag: 'Alex',
+		dienstag: 'Anna',
+		mittwoch: 'Amalia',
+		donnerstag: 'Arthur',
+		freitag: 'Alex',
+		samstag: 'Andrea',
+		sonntag: 'Arnold',
+	},
+	{
+		montag: 'Helena',
+		dienstag: 'Fabian',
+		mittwoch: 'Marie',
+		donnerstag: 'Ben',
+		freitag: 'Marcus',
+		samstag: 'Alex',
+		sonntag: 'Marcus',
+	},
+	{
+		montag: 'Fabian',
+		dienstag: 'Helena',
+		mittwoch: 'Fabian',
+		donnerstag: 'Maya',
+		freitag: 'Ben',
+		samstag: 'Alex',
+		sonntag: 'Helena',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Finn',
+		dienstag: 'Roger',
+		mittwoch: 'Christian',
+		donnerstag: 'Caspar',
+		freitag: 'David',
+		samstag: 'Bernard',
+		sonntag: 'Anna',
+	},
+	{
+		montag: 'Alex',
+		dienstag: 'Anna',
+		mittwoch: 'Amalia',
+		donnerstag: 'Arthur',
+		freitag: 'Alex',
+		samstag: 'Andrea',
+		sonntag: 'Arnold',
+	},
+	{
+		montag: 'Helena',
+		dienstag: 'Fabian',
+		mittwoch: 'Marie',
+		donnerstag: 'Ben',
+		freitag: 'Marcus',
+		samstag: 'Alex',
+		sonntag: 'Marcus',
+	},
+	{
+		montag: 'Fabian',
+		dienstag: 'Helena',
+		mittwoch: 'Fabian',
+		donnerstag: 'Maya',
+		freitag: 'Ben',
+		samstag: 'Alex',
+		sonntag: 'Helena',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Finn',
+		dienstag: 'Roger',
+		mittwoch: 'Christian',
+		donnerstag: 'Caspar',
+		freitag: 'David',
+		samstag: 'Bernard',
+		sonntag: 'Anna',
+	},
+	{
+		montag: 'Alex',
+		dienstag: 'Anna',
+		mittwoch: 'Amalia',
+		donnerstag: 'Arthur',
+		freitag: 'Alex',
+		samstag: 'Andrea',
+		sonntag: 'Arnold',
+	},
+	{
+		montag: 'Helena',
+		dienstag: 'Fabian',
+		mittwoch: 'Marie',
+		donnerstag: 'Ben',
+		freitag: 'Marcus',
+		samstag: 'Alex',
+		sonntag: 'Marcus',
+	},
+	{
+		montag: 'Fabian',
+		dienstag: 'Helena',
+		mittwoch: 'Fabian',
+		donnerstag: 'Maya',
+		freitag: 'Ben',
+		samstag: 'Alex',
+		sonntag: 'Helena',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Finn',
+		dienstag: 'Roger',
+		mittwoch: 'Christian',
+		donnerstag: 'Caspar',
+		freitag: 'David',
+		samstag: 'Bernard',
+		sonntag: 'Anna',
+	},
+	{
+		montag: 'Alex',
+		dienstag: 'Anna',
+		mittwoch: 'Amalia',
+		donnerstag: 'Arthur',
+		freitag: 'Alex',
+		samstag: 'Andrea',
+		sonntag: 'Arnold',
+	},
+	{
+		montag: 'Helena',
+		dienstag: 'Fabian',
+		mittwoch: 'Marie',
+		donnerstag: 'Ben',
+		freitag: 'Marcus',
+		samstag: 'Alex',
+		sonntag: 'Marcus',
+	},
+	{
+		montag: 'Fabian',
+		dienstag: 'Helena',
+		mittwoch: 'Fabian',
+		donnerstag: 'Maya',
+		freitag: 'Ben',
+		samstag: 'Alex',
+		sonntag: 'Helena',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Finn',
+		dienstag: 'Roger',
+		mittwoch: 'Christian',
+		donnerstag: 'Caspar',
+		freitag: 'David',
+		samstag: 'Bernard',
+		sonntag: 'Anna',
+	},
+	{
+		montag: 'Alex',
+		dienstag: 'Anna',
+		mittwoch: 'Amalia',
+		donnerstag: 'Arthur',
+		freitag: 'Alex',
+		samstag: 'Andrea',
+		sonntag: 'Arnold',
+	},
+	{
+		montag: 'Helena',
+		dienstag: 'Fabian',
+		mittwoch: 'Marie',
+		donnerstag: 'Ben',
+		freitag: 'Marcus',
+		samstag: 'Alex',
+		sonntag: 'Marcus',
+	},
+	{
+		montag: 'Fabian',
+		dienstag: 'Helena',
+		mittwoch: 'Fabian',
+		donnerstag: 'Maya',
+		freitag: 'Ben',
+		samstag: 'Alex',
+		sonntag: 'Helena',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Hong',
+		dienstag: 'Alex',
+		mittwoch: 'Kevin',
+		donnerstag: 'Maya',
+		freitag: 'Fabian',
+		samstag: 'Helena',
+		sonntag: 'Alex',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Samuel',
+		dienstag: 'Selena',
+		mittwoch: 'Sandra',
+		donnerstag: 'Salim',
+		freitag: 'Robert',
+		samstag: 'Richard',
+		sonntag: 'Pamela',
+	},
+	{
+		montag: 'Finn',
+		dienstag: 'Roger',
+		mittwoch: 'Christian',
+		donnerstag: 'Caspar',
+		freitag: 'David',
+		samstag: 'Bernard',
+		sonntag: 'Anna',
+	},
+];
+export type TableDataType = (typeof TABLE_DATA)[0];

package/src/components/input-checkbox/button.tsx

@@ -2,8 +2,9 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputCheckboxVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import type { Components } from '@public-ui/components';
+import { InputCheckboxVariants } from './partials/variants';
 
 export const InputCheckboxButton: FC = () => (
 	<>
@@ -15,6 +16,6 @@ export const InputCheckboxButton: FC = () => (
 				dargestellt.
 			</p>
 		</SampleDescription>
-		<FormWrap RefComponent={InputCheckboxVariants} _variant="button" />
+		<FormWrap<Components.KolInputCheckbox> RefComponent={InputCheckboxVariants} _variant="button" />
 	</>
 );

package/src/components/skip-nav/basic.tsx

@@ -19,15 +19,15 @@ export const SkipNavBasic: FC = () => (
 			_links={[
 				{
 					_label: 'Zum Anfang',
-					_selector: 'header',
+					_href: '#header',
 				},
 				{
 					_label: 'Zum Formular',
-					_selector: '#form',
+					_href: '#form',
 				},
 				{
 					_label: 'Zum Ende',
-					_selector: 'footer',
+					_href: '#footer',
 				},
 			]}
 		></KolSkipNav>

package/src/components/table/badge-size.tsx

@@ -26,17 +26,17 @@ const HEADERS: KoliBriTableHeaders = {
 				textAlign: 'center',
 				width: '20em',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				sort: (data: Data[]) =>
+				sort: (data) =>
 					data.sort((data0, data1) => {
-						if (data0.date < data1.date) return -1;
-						else if (data1.date < data0.date) return 1;
+						if ((data0 as Data).date < (data1 as Data).date) return -1;
+						else if ((data1 as Data).date < (data0 as Data).date) return 1;
 						else return 0;
 					}),
 			},
 			{
 				label: 'Aktion',
 				key: 'order',
-				render: (el, cell, tupel) => {
+				render: (el) => {
 					getRoot(el).render(
 						<KolBadge
 							style={{

package/src/components/table/column-alignment.tsx

@@ -6,8 +6,7 @@ import { KolHeading, KolTable } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }];
-type Data = (typeof DATA)[0];
-const genericNonSorter = (data: Data[]): Data[] => data;
+const genericNonSorter = <T,>(data: T): T => data;
 
 export const TableColumnAlignment: FC = () => (
 	<>

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

@@ -5,7 +5,7 @@ import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
 
 import { SampleDescription } from '../SampleDescription';
 
-import type { KoliBriTableHeaders } from '@public-ui/components/src';
+import type { KoliBriTableHeaders } from '@public-ui/components';
 
 const DATA = [{ small: 'Small Example', large: 'Larger Example' }];
 const HEADERS: KoliBriTableHeaders = {

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

@@ -69,7 +69,7 @@ const HEADERS: KoliBriTableHeaders = {
 				render: (el, cell) => {
 					el.innerHTML = `<strong>${DATE_FORMATTER.format(cell.label as unknown as Date)}</strong>`;
 				},
-				sort: (data: Data[]) => data.sort((data0, data1) => data0.date.getTime() - data1.date.getTime()),
+				sort: (data) => data.sort((data0, data1) => (data0 as Data).date.getTime() - (data1 as Data).date.getTime()),
 			},
 			{
 				label: 'Action (react)',

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

@@ -22,10 +22,10 @@ const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 				key: 'date',
 				textAlign: 'center',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				sort: (data: Data[]) =>
+				sort: (data) =>
 					data.sort((data0, data1) => {
-						if (data0.date < data1.date) return -1;
-						else if (data1.date < data0.date) return 1;
+						if ((data0 as Data).date < (data1 as Data).date) return -1;
+						else if ((data1 as Data).date < (data0 as Data).date) return 1;
 						else return 0;
 					}),
 			},
@@ -42,10 +42,10 @@ const HEADERS_VERTICAL: KoliBriTableHeaders = {
 				key: 'date',
 				textAlign: 'center',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				sort: (data: Data[]) =>
+				sort: (data) =>
 					data.sort((data0, data1) => {
-						if (data0.date < data1.date) return -1;
-						else if (data1.date < data0.date) return 1;
+						if ((data0 as Data).date < (data1 as Data).date) return -1;
+						else if ((data1 as Data).date < (data0 as Data).date) return 1;
 						else return 0;
 					}),
 			},

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

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import { KolButton, KolTableStateful } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
-import type { KoliBriTableSelection } from '@public-ui/components';
+import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar' },
@@ -14,29 +14,31 @@ export const TableStatefulWithSelection: FC = () => {
 	const [selectedValue, setSelectedValue] = useState<Data[]>();
 
 	const selection: KoliBriTableSelection = {
-		label: (row: Data) => `Selection for ${row.name}`,
+		label: (row) => `Selection for ${(row as Data).name}`,
 		selectedKeys: selectedValue ? selectedValue.map((element) => element.id) : [],
 		keyPropertyName: 'id',
 	};
 
-	const kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>();
+	const kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);
 
-	const handleSelectionChangeEvent = ({ detail: selection }) => {
+	const handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event, selection) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[]) => {
 		console.log('Selection change via callback', selection);
 	};
 
 	const handleButtonClick = async () => {
 		const selection = await kolTableStatefulRef.current?.getSelection();
-		setSelectedValue(selection);
+		setSelectedValue(selection as Data[]);
 	};
 
 	useEffect(() => {
+		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
 		kolTableStatefulRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
 
 		return () => {
+			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
 			kolTableStatefulRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
 		};
 	}, [kolTableStatefulRef]);