@public-ui/sample-react 3.0.0-rc.1 → 3.0.0-rc.3

package/src/components/nav/horizontal.tsx

@@ -13,11 +13,11 @@ export const NavHorizontal: FC = () => (
 		<section className="grid gap-8">
 			<section className="grid gap-4">
 				<KolHeading _level={2} _label="Navigation without submenu" />
-				<KolNav _label="Main navigation" _links={LINKS_WITHOUT_SUBMENU} _orientation="horizontal" />
+				<KolNav _label="Navigation without submenu" _links={LINKS_WITHOUT_SUBMENU} _orientation="horizontal" />
 			</section>
 			<section className="grid gap-4">
 				<KolHeading _level={2} _label="Navigation with submenu" />
-				<KolNav _label="Main navigation" _links={LINKS} _orientation="horizontal" />
+				<KolNav _label="Navigation with submenu" _links={LINKS} _orientation="horizontal" />
 			</section>
 		</section>
 	</>

package/src/components/pagination/basic.tsx

@@ -25,7 +25,7 @@ export const PaginationBasic: FC = () => (
 				_siblingCount={0}
 				_boundaryCount={2}
 				_hasButtons={false}
-				_label="Test pagination 4"
+				_label="Test pagination 5"
 				_on={{}}
 				_pageSizeOptions={[10, 100]}
 			/>

package/src/components/select/partials/cases.tsx

@@ -4,7 +4,7 @@ import { KolSelect } from '@public-ui/react';
 
 import { ERROR_MSG } from '../../../shares/constants';
 
-import type { Components, SelectOption } from '@public-ui/components';
+import type { Components, Optgroup, SelectOption, StencilUnknown } from '@public-ui/components';
 import { COUNTRY_OPTIONS } from '../../../shares/country';
 
 const SALUTATION_OPTIONS: SelectOption<string>[] = [
@@ -27,6 +27,19 @@ const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	},
 ];
 
+type GroupedOptionsType = Record<string, Optgroup<StencilUnknown>>;
+
+const groupedOptions: GroupedOptionsType = COUNTRY_OPTIONS.reduce((acc, option) => {
+	const firstLetter = (option.label as string).charAt(0).toUpperCase();
+	if (!acc[firstLetter]) {
+		acc[firstLetter] = { label: firstLetter, options: [] };
+	}
+	acc[firstLetter].options.push({ label: option.label, value: option.label });
+	return acc;
+}, {} as GroupedOptionsType);
+
+const groupedOptionsArray = Object.values(groupedOptions);
+
 export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectCases(props, ref) {
 	return (
 		<div className="grid gap-4">
@@ -59,6 +72,8 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 			/>
 			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="With access key" _accessKey="c" />
 			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="With short key" _shortKey="s" />
+			<KolSelect {...props} _options={groupedOptionsArray} _label="With grouped by first letter" _value={['Albanien']} />
+			<KolSelect {...props} _options={groupedOptionsArray} _label="With grouped by first letter (multiple)" _multiple _value={['Albanien']} />
 		</div>
 	);
 });

package/src/components/single-select/partials/cases.tsx

@@ -1,13 +1,14 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { KolSingleSelect } from '@public-ui/react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components, Option, StencilUnknown } from '@public-ui/components';
+import type { Option, StencilUnknown } from '@public-ui/components';
 import { COUNTRY_OPTIONS } from '../../../shares/country';
+import type { Components } from '@public-ui/components';
 
-export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Components.KolSingleSelect>(function SingleSelectCases(props) {
+export const SingleSelectCases = (props: Components.KolSingleSelect) => {
 	return (
 		<div className="grid gap-4">
 			<KolSingleSelect
@@ -38,4 +39,4 @@ export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Componen
 			<KolSingleSelect {...props} _label="With short key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _shortKey="s" />
 		</div>
 	);
-});
+};

package/src/components/single-select/partials/variants.tsx

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { SingleSelectCases } from './cases';
-
 import type { Components } from '@public-ui/components';
-export const SingleSelectVariants = forwardRef<HTMLKolSingleSelectElement, Components.KolSingleSelect>(function SingleSelectVariant(props, ref) {
+
+export const SingleSelectVariants = (props: Components.KolSingleSelect) => {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">
 			<fieldset>
@@ -12,8 +12,8 @@ export const SingleSelectVariants = forwardRef<HTMLKolSingleSelectElement, Compo
 			</fieldset>
 			<fieldset>
 				<legend>Text (hideLabel)</legend>
-				<SingleSelectCases ref={ref} {...props} _hideLabel />
+				<SingleSelectCases {...props} _hideLabel />
 			</fieldset>
 		</div>
 	);
-});
+};

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

@@ -27,10 +27,10 @@ export const SplitButtonBasic: FC = () => {
 
 			<div className="flex gap-4">
 				<KolSplitButton _label="Only the arrow opens" _on={{ onClick: handleButtonClick }}>
-					Dropdown-Inhalt
+					Dropdown contents
 				</KolSplitButton>
 				<KolSplitButton _label="Button without visible label" _hideLabel _icons="codicon codicon-git-pull-request">
-					Dropdown-Inhalt
+					Dropdown contents
 				</KolSplitButton>
 			</div>
 		</>

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

@@ -1,22 +1,22 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTable } from '@public-ui/react';
+import { KolHeading, KolTableStateful } from '@public-ui/react';
 
 import { SampleDescription } from '../SampleDescription';
 
 const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }];
-const genericNonSorter = <T,>(data: T): T => data;
+const genericNonSorter = () => 0;
 
 export const TableColumnAlignment: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows KolTable with columns headers and data in different text alignments.</p>
+			<p>This sample shows KolTableStateful with columns headers and data in different text alignments.</p>
 		</SampleDescription>
 
 		<section className="w-full flex flex-col">
 			<KolHeading _label="Simple table" _level={3}></KolHeading>
-			<KolTable
+			<KolTableStateful
 				_label="Table for demonstration purposes with different text align properties"
 				_headers={{
 					horizontal: [
@@ -33,14 +33,14 @@ export const TableColumnAlignment: FC = () => (
 			/>
 
 			<KolHeading _label="Table with sortable columns" _level={3} className="block mt-6"></KolHeading>
-			<KolTable
+			<KolTableStateful
 				_label="Table for demonstration purposes with sortable columns"
 				_headers={{
 					horizontal: [
 						[
-							{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
-							{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
-							{ label: 'right', key: 'right', textAlign: 'right', sort: genericNonSorter },
+							{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter },
+							{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter },
+							{ label: 'right', key: 'right', textAlign: 'right', compareFn: genericNonSorter },
 						],
 					],
 				}}
@@ -50,13 +50,13 @@ export const TableColumnAlignment: FC = () => (
 			/>
 
 			<KolHeading _label="Table some sortable columns" _level={3} className="block mt-6"></KolHeading>
-			<KolTable
+			<KolTableStateful
 				_label="Table for demonstration purposes with some but not all columns sortable"
 				_headers={{
 					horizontal: [
 						[
-							{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
-							{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
+							{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter },
+							{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter },
 							{ label: 'right', key: 'right', textAlign: 'right' },
 						],
 					],
@@ -67,7 +67,7 @@ export const TableColumnAlignment: FC = () => (
 			/>
 
 			<KolHeading _label="Table with vertical heading" _level={3} className="block mt-6"></KolHeading>
-			<KolTable
+			<KolTableStateful
 				_label="Table for demonstration purposes with vertical heading"
 				_headers={{
 					horizontal: [

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

@@ -1,16 +1,16 @@
 import type { FC } from 'react';
 import React from 'react';
-import { KolTable } from '@public-ui/react';
+import { KolTableStateful } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableComplexHeaders: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows KolTable using vertical and horizontal headers, applying colspan and rowspan.</p>
+			<p>This sample shows KolTableStateful using vertical and horizontal headers, applying colspan and rowspan.</p>
 		</SampleDescription>
 
 		<section className="w-full flex flex-col">
-			<KolTable
+			<KolTableStateful
 				_label="Business hours"
 				_data={[
 					{

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
-import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
+import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react';
 
 import { SampleDescription } from '../SampleDescription';
 
@@ -26,15 +26,15 @@ export const TableHorizontalScrollbar: FC = () => {
 		<>
 			<SampleDescription>
 				<p>
-					This sample shows KolTable with and without horizontal scrollbars. When a scrollbar is present, it should be possible to focus the table container and
-					to scroll it using arrow keys.
+					This sample shows KolTableStateful with and without horizontal scrollbars. When a scrollbar is present, it should be possible to focus the table
+					container and to scroll it using arrow keys.
 				</p>
 			</SampleDescription>
 
 			<section className="w-full flex flex-col gap-4">
 				<KolHeading _label="Table with scrollbar" _level={2} />
 
-				<KolTable
+				<KolTableStateful
 					_label="Table for demonstration purposes with horizontal scrollbar."
 					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
 					_headers={HEADERS}
@@ -45,7 +45,7 @@ export const TableHorizontalScrollbar: FC = () => {
 
 				<KolHeading _label="Empty Table with scrollbar" _level={3} />
 
-				<KolTable
+				<KolTableStateful
 					_label="Table for demonstration purposes with horizontal scrollbar with auto minWidth."
 					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
 					_headers={HEADERS}
@@ -70,7 +70,13 @@ export const TableHorizontalScrollbar: FC = () => {
 					<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" />
+				<KolTableStateful
+					_label="Table for demonstration purposes without horizontal scrollbar"
+					_minWidth="600px"
+					_headers={HEADERS}
+					_data={DATA}
+					className="block"
+				/>
 			</section>
 		</>
 	);

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
-import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
+import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react';
 import type { KoliBriTableHeaders, KoliBriTableDataType } from '@public-ui/components';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
@@ -74,7 +74,7 @@ export const MultiSortTable: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample shows KolTable with multi-sort functionality, allowing sorting by both &quot;order&quot; and &quot;date&quot; columns.</p>
+				<p>This sample shows KolTableStateful with multi-sort functionality, allowing sorting by both &quot;order&quot; and &quot;date&quot; columns.</p>
 			</SampleDescription>
 
 			<section className="w-full grid gap-4">
@@ -86,7 +86,7 @@ export const MultiSortTable: FC = () => {
 						_variant="switch"
 						_on={{ onChange: (_, value) => setAllowMultiSortVertical(Boolean(value)) }}
 					></KolInputCheckbox>
-					<KolTable
+					<KolTableStateful
 						_label="Sort Table with Order and Date"
 						_data={DATA.slice(0, 10)}
 						_headers={HEADERS_VERTICAL}
@@ -102,7 +102,7 @@ export const MultiSortTable: FC = () => {
 						_variant="switch"
 						_on={{ onChange: (_, value) => setAllowMultiSortHorizontal(Boolean(value)) }}
 					></KolInputCheckbox>
-					<KolTable
+					<KolTableStateful
 						_label="Sort Table with Order and Date"
 						_data={DATA}
 						_headers={HEADERS_HORIZONTAL}

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTable } from '@public-ui/react';
+import { KolHeading, KolTableStateful } from '@public-ui/react';
 
 import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';
@@ -23,21 +23,39 @@ const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
 export const PaginationPosition: FC = () => (
 	<div className="w-full grid gap-14">
 		<SampleDescription>
-			<p>This sample shows KolTable with different pagination positions.</p>
+			<p>This sample shows KolTableStateful with different pagination positions.</p>
 		</SampleDescription>
 
 		<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>
+				<KolTableStateful
+					_label="Sample table with pagination at the bottom"
+					_data={DATA}
+					_headers={HEADERS}
+					_pagination={PAGINATION}
+					_paginationPosition="bottom"
+				></KolTableStateful>
 			</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>
+				<KolTableStateful
+					_label="Sample table with pagination at the top"
+					_data={DATA}
+					_headers={HEADERS}
+					_pagination={PAGINATION}
+					_paginationPosition="top"
+				></KolTableStateful>
 			</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>
+				<KolTableStateful
+					_label="Sample table with pagination at both top and bottom"
+					_data={DATA}
+					_headers={HEADERS}
+					_pagination={PAGINATION}
+					_paginationPosition="both"
+				></KolTableStateful>
 			</section>
 		</section>
 	</div>

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { createReactRenderElement, KolButton, KolInputText, KolTable } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolInputText, KolTableStateful } from '@public-ui/react';
 
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
@@ -80,7 +80,7 @@ const HEADERS: KoliBriTableHeaders = {
 				render: (el, cell) => {
 					el.innerHTML = `<strong>${DATE_FORMATTER.format(cell.label as unknown as Date)}</strong>`;
 				},
-				sort: (data) => data.sort((data0, data1) => (data0 as Data).date.getTime() - (data1 as Data).date.getTime()),
+				compareFn: (data0, data1) => (data0 as Data).date.getTime() - (data1 as Data).date.getTime(),
 			},
 			{
 				label: 'Action (react)',
@@ -112,9 +112,9 @@ const HEADERS: KoliBriTableHeaders = {
 export const TableRenderCell: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows KolTable using React render functions for the cell contents.</p>
+			<p>This sample shows KolTableStateful using React render functions for the cell contents.</p>
 		</SampleDescription>
 
-		<KolTable _label="Sort by date column" _data={DATA} _headers={HEADERS} className="w-full" />
+		<KolTableStateful _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 { KolHeading, KolTable } from '@public-ui/react';
+import { KolHeading, KolTableStateful } from '@public-ui/react';
 import type { KoliBriTableHeaders } from '@public-ui/components';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
@@ -22,12 +22,11 @@ const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 				key: 'date',
 				textAlign: 'center',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				sort: (data) =>
-					data.sort((data0, data1) => {
-						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;
-					}),
+				compareFn: (data0, data1) => {
+					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,12 +41,11 @@ const HEADERS_VERTICAL: KoliBriTableHeaders = {
 				key: 'date',
 				textAlign: 'center',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				sort: (data) =>
-					data.sort((data0, data1) => {
-						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;
-					}),
+				compareFn: (data0, data1) => {
+					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;
+				},
 			},
 		],
 	],
@@ -56,17 +54,17 @@ const HEADERS_VERTICAL: KoliBriTableHeaders = {
 export const TableSortData: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows KolTable with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>
+			<p>This sample shows KolTableStateful with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>
 		</SampleDescription>
 
 		<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" />
+				<KolTableStateful _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" />
+				<KolTableStateful _label="Sort a date column" _data={DATA} _headers={HEADERS_HORIZONTAL} className="block" />
 			</section>
 		</section>
 	</>

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

@@ -1,10 +1,10 @@
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
-import { KolButton, KolTableStateful, createReactRenderElement } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
-import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
+import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
+import { KolEvent } from '@public-ui/components';
 import { getRoot } from '../../shares/react-roots';
-import type { KoliBriTableCell } from '@public-ui/components';
 import { useToasterService } from '../../hooks/useToasterService';
 
 const DATA = [
@@ -48,11 +48,11 @@ export const TableStatefulWithSelection: FC = () => {
 
 	useEffect(() => {
 		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-		kolTableStatefulRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
+		kolTableStatefulRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 
 		return () => {
 			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-			kolTableStatefulRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
+			kolTableStatefulRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 		};
 	}, [kolTableStatefulRef]);
 

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

@@ -1,10 +1,10 @@
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
-import { KolButton, KolTableStateful, createReactRenderElement } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
-import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
+import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
+import { KolEvent } from '@public-ui/components';
 import { getRoot } from '../../shares/react-roots';
-import type { KoliBriTableCell } from '@public-ui/components';
 import { useToasterService } from '../../hooks/useToasterService';
 
 const DATA = [
@@ -50,11 +50,11 @@ export const TableStatefulWithSingleSelection: FC = () => {
 
 	useEffect(() => {
 		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-		kolTableStatefulRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
+		kolTableStatefulRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 
 		return () => {
 			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-			kolTableStatefulRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
+			kolTableStatefulRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 		};
 	}, [kolTableStatefulRef]);
 

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

@@ -1,10 +1,10 @@
 import type { FC } from 'react';
-import React, { useEffect, useState, useRef } from 'react';
-import { KolButton, KolTableStateless, createReactRenderElement } from '@public-ui/react';
+import React, { useEffect, useRef, useState } from 'react';
+import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
-import type { KoliBriTableSelection } from '@public-ui/components';
+import type { KoliBriTableCell, KoliBriTableSelection } from '@public-ui/components';
+import { KolEvent } from '@public-ui/components';
 import { getRoot } from '../../shares/react-roots';
-import type { KoliBriTableCell } from '@public-ui/components';
 import { useToasterService } from '../../hooks/useToasterService';
 
 const DATA = [
@@ -44,11 +44,11 @@ export const TableStatelessWithSelection: FC = () => {
 
 	useEffect(() => {
 		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-		kolTableStatelessRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
+		kolTableStatelessRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 
 		return () => {
 			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-			kolTableStatelessRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
+			kolTableStatelessRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 		};
 	}, [kolTableStatelessRef]);
 

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

@@ -1,10 +1,10 @@
 import type { FC } from 'react';
-import React, { useEffect, useState, useRef } from 'react';
-import { KolButton, KolTableStateless, createReactRenderElement } from '@public-ui/react';
+import React, { useEffect, useRef, useState } from 'react';
+import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
-import type { KoliBriTableSelection } from '@public-ui/components';
+import type { KoliBriTableCell, KoliBriTableSelection } from '@public-ui/components';
+import { KolEvent } from '@public-ui/components';
 import { getRoot } from '../../shares/react-roots';
-import type { KoliBriTableCell } from '@public-ui/components';
 import { useToasterService } from '../../hooks/useToasterService';
 
 const DATA = [
@@ -45,11 +45,11 @@ export const TableStatelessWithSingleSelection: FC = () => {
 
 	useEffect(() => {
 		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-		kolTableStatelessRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
+		kolTableStatelessRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 
 		return () => {
 			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-			kolTableStatelessRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
+			kolTableStatelessRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 		};
 	}, [kolTableStatelessRef]);
 

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

@@ -1,15 +1,15 @@
 import type { FC } from 'react';
 import React from 'react';
-import { KolTable } from '@public-ui/react';
+import { KolTableStateful } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableWithFooter: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows KolTable with footer data.</p>
+			<p>This sample shows KolTableStateful with footer data.</p>
 		</SampleDescription>
 
-		<KolTable
+		<KolTableStateful
 			className="w-full"
 			_label="Business hours"
 			_headers={{

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolTable } from '@public-ui/react';
+import { KolTableStateful } from '@public-ui/react';
 
 import { DATE_FORMATTER } from './formatter';
 import { SampleDescription } from '../SampleDescription';
@@ -23,10 +23,10 @@ const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
 export const TableWithPagination: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows how KolTable can be navigated using a pagination.</p>
+			<p>This sample shows how KolTableStateful can be navigated using a pagination.</p>
 		</SampleDescription>
 		<div className="w-full">
-			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTable>
+			<KolTableStateful _label="Table description" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTableStateful>
 		</div>
 	</>
 );

package/src/components/textarea/partials/cases.tsx

@@ -1,14 +1,19 @@
 import React, { forwardRef } from 'react';
-
 import { KolTextarea } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolTextarea {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched />
+			<div className="black-background">
+				<KolTextarea {...props} ref={ref} _placeholder="Placeholder" _label="Text" />
+			</div>
+			<KolTextarea {...props} _placeholder="Placeholder" _required _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched _hint={HINT_MSG} />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'info', _description: 'Just a hint' }} />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'warning', _description: 'Small warning' }} />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'success', _description: 'Success message' }} />
 			<KolTextarea {...props} ref={ref} _accessKey="T" _label="Text (3 rows)" _rows={3} />
 			<KolTextarea {...props} ref={ref} _label="Text (placeholder)" _rows={3} _placeholder="Placeholder" />
 			<KolTextarea {...props} ref={ref} _label="Text (disabled & placeholder)" _rows={3} _placeholder="Placeholder" _disabled />