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

package/src/components/select/basic.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { SelectVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { SelectVariants } from './partials/variants';
 
 export const SelectBasic: FC = () => (
 	<>
@@ -11,6 +11,6 @@ export const SelectBasic: FC = () => (
 			<p>KolSelect renders a select field. The sample shows KolSelect in a form context with all variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={SelectVariants} />
+		<FormWrap RefComponent={SelectVariants} showButtons={false} />
 	</>
 );

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

@@ -1,17 +1,16 @@
 import React, { forwardRef } from 'react';
 
-import { KolSelect } from '@public-ui/react';
+import { KolSelect } from '@public-ui/react-v19';
 
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_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>[] = [
 	{
-		label: 'No choice',
+		label: 'No salutation',
 		value: '',
-		disabled: true,
 	},
 	{
 		label: 'Mrs.',
@@ -27,6 +26,23 @@ const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	},
 ];
 
+const SALUTATION_OPTIONS_DISABLED = SALUTATION_OPTIONS.map((option, index) =>
+	index === 0 ? { label: 'Select salutation', value: '', disabled: true } : option,
+);
+
+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">
@@ -46,7 +62,7 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				}}
 			/>
 			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Disabled" _disabled />
-			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Salutation with error" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
+			<KolSelect {...props} _options={SALUTATION_OPTIONS_DISABLED} _label="Salutation with error" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
 			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Multiple choice" _multiple />
 			<KolSelect
 				{...props}
@@ -55,10 +71,13 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				_multiple
 				_required
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_hint={HINT_MSG}
 				_touched
 			/>
 			<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/select/partials/variants.tsx

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { SelectCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const SelectVariants = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<SelectCases {...props} />
@@ -14,6 +15,6 @@ export const SelectVariants = forwardRef<HTMLKolSelectElement, Components.KolSel
 				<legend>Text (hideLabel)</legend>
 				<SelectCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

package/src/components/single-select/basic.tsx

@@ -1,23 +1,17 @@
-import React from 'react';
 import type { FC } from 'react';
+import React from 'react';
 import { FormWrap } from '../FormWrap';
-import { HideMenusContext } from '../../shares/HideMenusContext';
 import { SampleDescription } from '../SampleDescription';
 import { SingleSelectVariants } from './partials/variants';
-import { useContext } from 'react';
-import { KolBadge } from '@public-ui/react';
 
 export const SingleSelectBasic: FC = () => {
-	const hideMenus = useContext(HideMenusContext);
-
 	return (
 		<>
 			<SampleDescription>
 				<p>SingleSelect provides a select field for a single value, supported by a search field.</p>
 			</SampleDescription>
-			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 
-			<FormWrap RefComponent={SingleSelectVariants} />
+			<FormWrap RefComponent={SingleSelectVariants} showButtons={false} />
 		</>
 	);
 };

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 { KolSingleSelect } from '@public-ui/react-v19';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
 import type { Components, Option, StencilUnknown } from '@public-ui/components';
 import { COUNTRY_OPTIONS } from '../../../shares/country';
+import { LONG_OPTIONS } from '../../../shares/longOptions';
 
-export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Components.KolSingleSelect>(function SingleSelectCases(props) {
+export const SingleSelectCases = (props: Components.KolSingleSelect) => {
 	return (
 		<div className="grid gap-4">
 			<KolSingleSelect
@@ -29,6 +30,7 @@ export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Componen
 				{...props}
 				_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_rows={3}
 				_touched
 				_label="Label"
 				_placeholder="Placeholder"
@@ -36,6 +38,95 @@ export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Componen
 			/>
 			<KolSingleSelect {...props} _label="With access key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _accessKey="c" />
 			<KolSingleSelect {...props} _label="With short key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _shortKey="s" />
+			<KolSingleSelect {...props} _label="With long labels" _options={LONG_OPTIONS as Option<StencilUnknown>[]} _placeholder="Placeholder" />
+			<KolSingleSelect {...props} _label="With hidden clear button" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _hideClearButton />
+			<KolSingleSelect
+				{...props}
+				_hint={HINT_MSG}
+				_label="With disabled options"
+				_options={
+					[
+						{
+							value: 'bw',
+							label: 'Baden-Württemberg',
+						},
+						{
+							value: 'by',
+							label: 'Bayern',
+							disabled: true,
+						},
+						{
+							value: 'be',
+							label: 'Berlin',
+						},
+						{
+							value: 'bb',
+							label: 'Brandenburg',
+						},
+						{
+							value: 'hb',
+							label: 'Bremen',
+						},
+						{
+							value: 'hh',
+							label: 'Hamburg',
+						},
+						{
+							value: 'he',
+							label: 'Hessen',
+						},
+						{
+							value: 'mv',
+							label: 'Mecklenburg-Vorpommern',
+							disabled: true,
+						},
+						{
+							value: 'ni',
+							label: 'Niedersachsen',
+							disabled: true,
+						},
+						{
+							value: 'nw',
+							label: 'Nordrhein-Westfalen',
+						},
+						{
+							value: 'rp',
+							label: 'Rheinland-Pfalz',
+							disabled: true,
+						},
+						{
+							value: 'sl',
+							label: 'Saarland',
+						},
+						{
+							value: 'sn',
+							label: 'Sachsen',
+						},
+						{
+							value: 'st',
+							label: 'Sachsen-Anhalt',
+							disabled: true,
+						},
+						{
+							value: 'sh',
+							label: 'Schleswig-Holstein',
+							disabled: true,
+						},
+						{
+							value: 'th',
+							label: 'Thüringen',
+						},
+					] as Option<StencilUnknown>[]
+				}
+				_value={'be'}
+				_on={{
+					onBlur: console.log,
+					onInput: console.log,
+					onChange: console.log,
+					onClick: console.log,
+					onFocus: console.log,
+				}}
+			/>
 		</div>
 	);
-});
+};

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

@@ -1,19 +1,20 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
+import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 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">
+		<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,33 +1,42 @@
 import type { FC } from 'react';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
-import { KolSkipNav } from '@public-ui/react';
+import { KolSkipNav } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 
-export const SkipNavBasic: FC = () => (
-	<div className="grid gap-4">
-		<SampleDescription>
-			<p>KolSkipNav renders a list of navigation links that are visually hidden by default and only visible on focus.</p>
-			<p>For testing purposes, click into the example and press the tab-key in order to focus the first link.</p>
-		</SampleDescription>
+export const SkipNavBasic: FC = () => {
+	const skipNavRef = useRef<HTMLKolSkipNavElement>(null);
 
-		<KolSkipNav
-			_label="Hidden navigation"
-			_links={[
-				{
-					_label: 'To the top',
-					_href: '#/back-page',
-				},
-				{
-					_label: 'To the form',
-					_href: '#/back-page',
-				},
-				{
-					_label: 'To the end',
-					_href: '#/back-page',
-				},
-			]}
-		></KolSkipNav>
-	</div>
-);
+	useEffect(() => {
+		skipNavRef.current?.kolFocus();
+	}, []);
+
+	return (
+		<div className="grid gap-4">
+			<SampleDescription>
+				<p>KolSkipNav renders a list of navigation links that are visually hidden by default and only visible on focus.</p>
+				<p>For testing purposes, click into the example and press the tab-key in order to focus the first link.</p>
+			</SampleDescription>
+
+			<KolSkipNav
+				ref={skipNavRef}
+				_label="Hidden navigation"
+				_links={[
+					{
+						_label: 'To the top',
+						_href: '#/back-page',
+					},
+					{
+						_label: 'To the form',
+						_href: '#/back-page',
+					},
+					{
+						_label: 'To the end',
+						_href: '#/back-page',
+					},
+				]}
+			></KolSkipNav>
+		</div>
+	);
+};

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

@@ -1,9 +1,9 @@
-import './custom.css';
 import { SampleDescription } from '../SampleDescription';
+import './custom.css';
 
 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 { KolSpin } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useEffect, useState } 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,51 @@
 import React from 'react';
 
-import { ToasterService } from '@public-ui/components';
-import { KolSplitButton } from '@public-ui/react';
+import type { ToolbarItemsPropType } from '@public-ui/components';
+import { KolSplitButton, KolToolbar } from '@public-ui/react-v19';
+import { useToasterService } from '../../hooks/useToasterService';
 import { SampleDescription } from '../SampleDescription';
 
 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: ToolbarItemsPropType = [
+		{
+			type: 'button',
+			_label: 'Save',
+			_icons: 'codicon codicon-save',
+			_on: dummyEventHandler,
+		},
+		{
+			type: 'button',
+			_label: 'Move',
+			_icons: 'codicon codicon-move',
+			_on: dummyEventHandler,
+		},
+		{
+			type: 'button',
+			_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' },