@public-ui/sample-react 4.0.0-alpha.0 → 4.0.0-alpha.2

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

@@ -1,19 +1,20 @@
-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) {
+import { SampleColumns } from '../../SampleColumns';
+
+export const SingleSelectVariants = (props: Components.KolSingleSelect) => {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<SingleSelectCases {...props} />
 			</fieldset>
 			<fieldset>
 				<legend>Text (hideLabel)</legend>
-				<SingleSelectCases ref={ref} {...props} _hideLabel />
+				<SingleSelectCases {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
-});
+};

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolSkipNav } from '@public-ui/react';
+import { KolSkipNav } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 

package/src/components/spin/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolSpin } from '@public-ui/react';
+import { KolSpin } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/spin/custom.css

@@ -1,26 +1,27 @@
 .loader {
-	width: 48px;
-	height: 48px;
-	border: 5px solid #333;
 	border-radius: 50%;
 	display: inline-block;
-	box-sizing: border-box;
 	position: relative;
+	box-sizing: border-box;
+	width: 48px;
+	height: 48px;
 	animation: pulse 1s linear infinite;
+	border: 5px solid #333;
 }
 .loader:after {
-	content: '';
-	position: absolute;
-	width: 48px;
-	height: 48px;
-	border: 5px solid #f00;
+	transform: translate(-50%, -50%);
 	border-radius: 50%;
 	display: inline-block;
-	box-sizing: border-box;
-	left: 50%;
+	position: absolute;
 	top: 50%;
-	transform: translate(-50%, -50%);
+	left: 50%;
+	box-sizing: border-box;
+	width: 48px;
+	height: 48px;
+
+	content: '';
 	animation: scaleUp 1s linear infinite;
+	border: 5px solid #f00;
 }
 
 @keyframes scaleUp {

package/src/components/spin/custom.tsx

@@ -3,7 +3,7 @@ import { SampleDescription } from '../SampleDescription';
 
 import React from 'react';
 
-import { KolSpin } from '@public-ui/react';
+import { KolSpin } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 

package/src/components/spin/cycle.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolSpin } from '@public-ui/react';
+import { KolSpin } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/spin/label.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from 'react';
+import { KolSpin } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const SpinLabel: FC = () => {
+	const [show, setShow] = useState(true);
+
+	useEffect(() => {
+		const id = setInterval(() => setShow((value) => !value), 3000);
+		return () => clearInterval(id);
+	}, []);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows KolSpin with a label.</p>
+			</SampleDescription>
+
+			<KolSpin _show={show} _label={show ? 'Loading data...' : 'Data loaded.'} />
+		</>
+	);
+};

package/src/components/spin/routes.ts

@@ -2,11 +2,13 @@ import { Routes } from '../../shares/types';
 import { SpinBasic } from './basic';
 import { SpinCustom } from './custom';
 import { SpinCycle } from './cycle';
+import { SpinLabel } from './label';
 
 export const SPIN_ROUTES: Routes = {
 	spin: {
 		basic: SpinBasic,
 		cycle: SpinCycle,
 		custom: SpinCustom,
+		label: SpinLabel,
 	},
 };

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

@@ -1,36 +1,47 @@
 import React from 'react';
 
-import { ToasterService } from '@public-ui/components';
-import { KolSplitButton } from '@public-ui/react';
+import { KolSplitButton, KolToolbar } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
+import { useToasterService } from '../../hooks/useToasterService';
 
 import type { FC } from 'react';
 
 export const SplitButtonBasic: FC = () => {
-	const toaster = ToasterService.getInstance(document);
-	const handleButtonClick = () => {
-		void toaster.enqueue({
-			description: 'The Button has been clicked.',
-			label: `Button Clicked`,
-			type: 'info',
-		});
+	const { buttonWithTextClickEventHandler } = useToasterService();
+	const dummyEventHandler = {
+		onClick: buttonWithTextClickEventHandler,
 	};
+	const TOOLBAR_ITEMS = [
+		{
+			_label: 'Save',
+			_icons: 'codicon codicon-save',
+			_on: dummyEventHandler,
+		},
+		{
+			_label: 'Move',
+			_icons: 'codicon codicon-move',
+			_on: dummyEventHandler,
+		},
+		{
+			_label: 'Delete',
+			_icons: 'codicon codicon-trash',
+			_on: dummyEventHandler,
+		},
+	];
 
 	return (
 		<>
 			<SampleDescription>
 				<p>
-					SplitButton renders a button with an additional context-menu, that can be opened by clicking the arrow icon. The first sample shows the button with an
-					assigned action. In the second sample no action is assigned and clicking the button opens the context menu instead.
+					The <code>SplitButton</code> component combines a primary action button with a context menu. Clicking the main button triggers the
+					<strong> Edit</strong> action. The context menu opens a vertical list of additional actions:
+					<strong> Save</strong>, <strong>Move</strong>, and <strong>Delete</strong>.
 				</p>
 			</SampleDescription>
 
-			<div className="flex gap-4">
-				<KolSplitButton _label="Only the arrow opens" _on={{ onClick: handleButtonClick }}>
-					Dropdown-Inhalt
-				</KolSplitButton>
-				<KolSplitButton _label="Button without visible label" _hideLabel _icons="codicon codicon-git-pull-request">
-					Dropdown-Inhalt
+			<div className="flex flex-col gap-4">
+				<KolSplitButton _label="Edit" _on={dummyEventHandler}>
+					<KolToolbar _label="Action toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
 				</KolSplitButton>
 			</div>
 		</>

package/src/components/split-button/with-context.tsx

@@ -2,13 +2,13 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import * as React from 'react';
 
-import { KolButton, KolInputText, KolSplitButton } from '@public-ui/react';
+import { KolButton, KolInputText, KolSplitButton } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 
 export const SplitButtonWithContext: FC = () => {
-	const splitButtonRef = React.useRef<HTMLKolSplitButtonElement & { closePopup: any }>();
+	const splitButtonRef = React.useRef<HTMLKolSplitButtonElement & { closePopup: any }>(null);
 
 	const handleCloseClick = () => {
 		splitButtonRef.current?.closePopup();

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

@@ -1,23 +1,24 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTable } from '@public-ui/react';
+import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
 
 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"
+				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[
@@ -33,14 +34,15 @@ 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"
+				_minWidth="auto"
 				_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 +52,14 @@ 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"
+				_minWidth="auto"
 				_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,12 +70,12 @@ 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"
+				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[
-							{ label: '', asTd: true },
 							{ label: 'left', key: 'left', textAlign: 'left' },
 							{ label: 'center', key: 'center', textAlign: 'center' },
 							{ label: 'right', key: 'right', textAlign: 'right' },

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

@@ -1,17 +1,18 @@
 import type { FC } from 'react';
 import React from 'react';
-import { KolTable } from '@public-ui/react';
+import { KolTableStateful } from '@public-ui/react-v19';
 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"
+				_minWidth="auto"
 				_data={[
 					{
 						asp: 'Center',
@@ -39,24 +40,34 @@ export const TableComplexHeaders: FC = () => (
 					},
 				]}
 				_headers={{
-					vertical: [[{ label: 'Berlin', rowSpan: 2 }, { label: 'München' }]],
-					horizontal: [
+					vertical: [
 						[
 							{
-								label: '',
-								colSpan: 7,
+								label: 'Berlin',
+								rowSpan: 2,
 							},
 							{
-								label: 'Weekend',
-								colSpan: 2,
+								label: 'München',
 							},
 						],
+					],
+					horizontal: [
 						[
-							{ label: '' },
 							{
 								label: 'District',
+								rowSpan: 2,
 								key: 'asp',
 							},
+							{
+								label: 'Workdays',
+								colSpan: 5,
+							},
+							{
+								label: 'Weekend',
+								colSpan: 2,
+							},
+						],
+						[
 							{
 								label: 'Monday',
 								key: 'monday',

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

@@ -1,9 +1,12 @@
 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-v19';
 
 import { SampleDescription } from '../SampleDescription';
+import { DATE_FORMATTER } from './formatter';
+import { DATA as tableData } from './test-data';
+import type { Data } from './test-data';
 
 import type { KoliBriTableHeaders } from '@public-ui/components';
 
@@ -18,6 +21,7 @@ const HEADERS: KoliBriTableHeaders = {
 		],
 	],
 };
+const genericNonSorter = () => 0;
 
 export const TableHorizontalScrollbar: FC = () => {
 	const [hasWidthRestriction, setHasWidthRestriction] = useState(true);
@@ -26,33 +30,47 @@ 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
-					_label="Table for demonstration purposes with horizontal scrollbar."
-					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
-					_headers={HEADERS}
-					_data={DATA}
-					className="block"
-					style={{ width: '400px' }}
-				/>
-
-				<KolHeading _label="Empty Table with scrollbar" _level={3} />
-
-				<KolTable
-					_label="Table for demonstration purposes with horizontal scrollbar with auto minWidth."
-					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
-					_headers={HEADERS}
-					_data={[]}
-					className="block"
-					style={{ width: '400px' }}
-				/>
+				<div className="w-[400px] flex flex-col gap-4">
+					<KolTableStateful
+						_label="Table for demonstration purposes with horizontal scrollbar."
+						_minWidth={hasWidthRestriction ? '600px' : '300px'}
+						_headers={HEADERS}
+						_data={DATA}
+						className="block"
+					/>
+					<KolTableStateful
+						_label="Table for demonstration horizontal scrolling with pagination."
+						_minWidth={hasWidthRestriction ? '600px' : '300px'}
+						_headers={{
+							horizontal: [
+								[
+									{ label: 'Order', key: 'order' },
+									{
+										label: 'Date',
+										key: 'date',
+										compareFn: genericNonSorter,
+										render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date),
+									},
+								],
+							],
+						}}
+						_data={tableData}
+						_pagination
+					/>
+					<KolTableStateful
+						_label="Table for demonstration purposes with horizontal scrollbar with auto minWidth."
+						_minWidth={hasWidthRestriction ? '600px' : '300px'}
+						_headers={HEADERS}
+						_data={[]}
+						className="block"
+					/>
+				</div>
 
 				<KolInputCheckbox
 					_checked={hasWidthRestriction}
@@ -70,7 +88,14 @@ 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"
+					_pagination
+				/>
 			</section>
 		</>
 	);

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

@@ -1,5 +1,5 @@
 import type { ButtonProps, ButtonVariantPropType, KoliBriTableCell, KoliBriTableHeaderCell } from '@public-ui/components';
-import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { getRoot } from '../../shares/react-roots';
@@ -46,10 +46,10 @@ export const InteractiveChildElements: FC = () => (
 		<section className="w-full flex flex-col">
 			<KolTableStateless
 				_label="Button styles"
+				_minWidth="auto"
 				_headerCells={{
 					horizontal: [
 						[
-							{ label: '', asTd: true, width: '20ex' },
 							getButtonHeaderCell('primary'),
 							getButtonHeaderCell('secondary'),
 							getButtonHeaderCell('normal'),
@@ -80,10 +80,10 @@ export const InteractiveChildElements: FC = () => (
 
 			<KolTableStateless
 				_label="Link styles"
+				_minWidth="auto"
 				_headerCells={{
 					horizontal: [
 						[
-							{ label: '', asTd: true, width: '20ex' },
 							{
 								key: 'regular',
 								label: 'Regular',

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-v19';
 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,8 +86,9 @@ export const MultiSortTable: FC = () => {
 						_variant="switch"
 						_on={{ onChange: (_, value) => setAllowMultiSortVertical(Boolean(value)) }}
 					></KolInputCheckbox>
-					<KolTable
+					<KolTableStateful
 						_label="Sort Table with Order and Date"
+						_minWidth="auto"
 						_data={DATA.slice(0, 10)}
 						_headers={HEADERS_VERTICAL}
 						className="block"
@@ -102,8 +103,9 @@ export const MultiSortTable: FC = () => {
 						_variant="switch"
 						_on={{ onChange: (_, value) => setAllowMultiSortHorizontal(Boolean(value)) }}
 					></KolInputCheckbox>
-					<KolTable
+					<KolTableStateful
 						_label="Sort Table with Order and Date"
+						_minWidth="auto"
 						_data={DATA}
 						_headers={HEADERS_HORIZONTAL}
 						className="block"

package/src/components/table/non-hidable-columns.tsx

@@ -0,0 +1,35 @@
+import { KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+const DATA = [
+	{ id: '1001', name: 'John', age: 30 },
+	{ id: '1002', name: 'Jane', age: 25 },
+];
+
+export const TableNonHidableColumns: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This example demonstrates a column that cannot be hidden in the settings.</p>
+		</SampleDescription>
+
+		<KolTableStateful
+			_label="Table with a non-hidable column"
+			_minWidth="auto"
+			_hasSettingsMenu
+			_headers={{
+				horizontal: [
+					[
+						{ key: 'id', label: 'ID', hidable: false },
+						{ key: 'name', label: 'Name' },
+						{ key: 'age', label: 'Age' },
+					],
+				],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '600px' }}
+		/>
+	</>
+);

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-v19';
 
 import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';
@@ -23,21 +23,42 @@ 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"
+					_minWidth="auto"
+					_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"
+					_minWidth="auto"
+					_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"
+					_minWidth="auto"
+					_data={DATA}
+					_headers={HEADERS}
+					_pagination={PAGINATION}
+					_paginationPosition="both"
+				></KolTableStateful>
 			</section>
 		</section>
 	</div>