@public-ui/sample-react 2.1.7-rc.1 → 2.1.7

package/src/components/modal/basic.tsx

@@ -6,6 +6,7 @@ import { SampleDescription } from '../SampleDescription';
 
 export const ModalBasic: FC = () => {
 	const modalElement = useRef<HTMLKolModalElement>(null);
+	const stackedModalElement = useRef<HTMLKolModalElement>(null);
 
 	return (
 		<>
@@ -17,29 +18,47 @@ export const ModalBasic: FC = () => {
 			</SampleDescription>
 
 			<div>
-				<KolModal _label="" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
-					<KolCard _label="I am a modal." style={{ width: '100%' }}>
-						<div>
-							<KolButton
-								_label="Close modal"
-								_on={{
-									onClick: () => {
-										if (modalElement?.current) {
-											modalElement.current._activeElement = null;
-										}
-									},
-								}}
-							/>
-						</div>
+				<KolModal _label="Primary modal" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
+					<KolCard _label="I am a modal.">
+						<KolButton
+							_label="Open stacked modal"
+							className="mr"
+							_on={{
+								onClick: () => {
+									stackedModalElement.current?.openModal();
+								},
+							}}
+						/>
+
+						<KolButton
+							_label="Close modal"
+							_on={{
+								onClick: () => {
+									modalElement.current?.closeModal();
+								},
+							}}
+						/>
 					</KolCard>
 				</KolModal>
+
+				<KolModal _label="Stacked modal" _width="80%" ref={stackedModalElement}>
+					<KolCard _label="Stacked modal element">
+						<KolButton
+							_label="Close stacked modal"
+							_on={{
+								onClick: () => {
+									stackedModalElement.current?.closeModal();
+								},
+							}}
+						/>
+					</KolCard>
+				</KolModal>
+
 				<KolButton
 					_label="Open modal"
 					_on={{
-						onClick: (event: Event) => {
-							if (modalElement?.current) {
-								modalElement.current._activeElement = event.target as HTMLElement;
-							}
+						onClick: () => {
+							modalElement.current?.openModal();
 						},
 					}}
 				/>

package/src/components/nav/links.ts

@@ -72,21 +72,21 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 		},
 	},
 	{
-		_label: '5 Keine eigene Seite, nur Kategorie',
+		_label: '5 No own page, only category',
 		_active: true,
 		_children: [
 			{
-				_label: '5.1 Verschachtelter Link',
+				_label: '5.1 Nested link',
 				_href: '#/back-page',
 			},
 		],
 	},
 	{
-		_label: '6 Keine eigene Seite, mit Icon',
+		_label: '6 No own page, with icon',
 		_icons: 'codicon codicon-squirrel',
 		_children: [
 			{
-				_label: '6.1 Verschachtelter Link',
+				_label: '6.1 Nested link',
 				_href: '#/back-page',
 			},
 		],

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

@@ -9,17 +9,17 @@ import { COUNTRY_OPTIONS } from '../../../shares/country';
 
 const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	{
-		label: 'Keine Auswahl',
+		label: 'No choice',
 		value: '',
 		disabled: true,
 	},
 	{
-		label: 'Frau',
-		value: 'Frau',
+		label: 'Mrs.',
+		value: 'Mrs.',
 	},
 	{
-		label: 'Herr',
-		value: 'Herr',
+		label: 'Mr.',
+		value: 'Mr.',
 	},
 	{
 		label: 'Divers',
@@ -35,7 +35,7 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				ref={ref}
 				_accessKey="a"
 				_options={SALUTATION_OPTIONS}
-				_label="Anrede"
+				_label="Salutation"
 				_icons={{
 					left: {
 						icon: 'codicon codicon-arrow-left',
@@ -46,12 +46,12 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				}}
 			/>
 			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Disabled" _disabled />
-			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Anrede mit Fehler" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
-			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Mehrfachauswahl" _multiple />
+			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Salutation with error" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
+			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Multiple choice" _multiple />
 			<KolSelect
 				{...props}
 				_options={COUNTRY_OPTIONS}
-				_label="Mehrfachauswahl mit Fehler"
+				_label="Multiple choice with error"
 				_multiple
 				_required
 				_msg={{ _type: 'error', _description: ERROR_MSG }}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { FC } 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} />
+		</>
+	);
+};

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

@@ -0,0 +1,39 @@
+import React, { forwardRef } 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 { COUNTRY_OPTIONS } from '../../../shares/country';
+
+export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Components.KolSingleSelect>(function SingleSelectCases(props) {
+	return (
+		<div className="grid gap-4">
+			<KolSingleSelect
+				{...props}
+				_hint={HINT_MSG}
+				_label="Label"
+				_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
+				_value={'de'}
+				_on={{
+					onBlur: console.log,
+					onInput: console.log,
+					onChange: console.log,
+					onClick: console.log,
+					onFocus: console.log,
+				}}
+			/>
+			<KolSingleSelect {...props} _label="Disabled" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _disabled />
+			<KolSingleSelect
+				{...props}
+				_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_touched
+				_label="Label"
+				_placeholder="Placeholder"
+				_required
+			/>
+		</div>
+	);
+});

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

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

package/src/components/single-select/routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '../../shares/types';
+import { SingleSelectBasic } from './basic';
+
+export const SINGLE_SELECT_ROUTES: Routes = {
+	'single-select': {
+		basic: SingleSelectBasic,
+	},
+};

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

@@ -13,18 +13,18 @@ export const SkipNavBasic: FC = () => (
 		</SampleDescription>
 
 		<KolSkipNav
-			_label="Versteckte Navigation"
+			_label="Hidden navigation"
 			_links={[
 				{
-					_label: 'Zum Anfang',
+					_label: 'To the top',
 					_href: '#/back-page',
 				},
 				{
-					_label: 'Zum Formular',
+					_label: 'To the form',
 					_href: '#/back-page',
 				},
 				{
-					_label: 'Zum Ende',
+					_label: 'To the end',
 					_href: '#/back-page',
 				},
 			]}

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

@@ -26,10 +26,10 @@ export const SplitButtonBasic: FC = () => {
 			</SampleDescription>
 
 			<div className="flex gap-4">
-				<KolSplitButton _label="Nur der Pfeil öffnet" _on={{ onClick: handleButtonClick }}>
+				<KolSplitButton _label="Only the arrow opens" _on={{ onClick: handleButtonClick }}>
 					Dropdown-Inhalt
 				</KolSplitButton>
-				<KolSplitButton _label="Schalter ohne sichtbares Label" _hideLabel _icons="codicon codicon-git-pull-request">
+				<KolSplitButton _label="Button without visible label" _hideLabel _icons="codicon codicon-git-pull-request">
 					Dropdown-Inhalt
 				</KolSplitButton>
 			</div>

package/src/components/split-button/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { SplitButtonBasic } from './basic';
+import { SplitButtonWithContext } from './with-context';
 
 export const SPLIT_BUTTON_ROUTES: Routes = {
 	'split-button': {
 		basic: SplitButtonBasic,
+		'with-context': SplitButtonWithContext,
 	},
 };

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

@@ -0,0 +1,37 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import * as React from 'react';
+
+import { KolButton, KolInputText, KolSplitButton } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+
+import type { FC } from 'react';
+
+export const SplitButtonWithContext: FC = () => {
+	const splitButtonRef = React.useRef<HTMLKolSplitButtonElement & { closePopup: any }>();
+
+	const handleCloseClick = () => {
+		splitButtonRef.current?.closePopup();
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>SplitButton renders a button with an additional context-menu, that can be opened by clicking the arrow icon.</p>
+			</SampleDescription>
+
+			<div className="flex gap-4">
+				<KolSplitButton ref={splitButtonRef as any} _label="Only the arrow opens">
+					<div style={{ width: 300, padding: 16, border: '1px solid #ccc' }} onClick={(e) => e.stopPropagation()}>
+						<p>SplitButton renders a button with an additional context-menu, that can be opened by clicking the arrow icon.</p>
+						<div style={{ gap: 16, display: 'flex', flexDirection: 'column' }}>
+							<KolInputText _label="User" />
+							<KolInputText _label="Role" />
+							<KolButton _label="Close" _on={{ onClick: handleCloseClick }} />
+						</div>
+					</div>
+				</KolSplitButton>
+			</div>
+		</>
+	);
+};

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

@@ -0,0 +1,105 @@
+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';
+
+const getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeaderCell => {
+	const capitalizedVariant = variant.charAt(0).toUpperCase() + variant.slice(1);
+	return {
+		label: capitalizedVariant,
+		key: variant,
+		textAlign: 'left',
+		render: (element: HTMLElement, cell: KoliBriTableCell) => {
+			const commonProps = {
+				_label: capitalizedVariant,
+				_variant: variant,
+				_icons: { right: 'codicon codicon-squirrel' },
+			};
+			getRoot(createReactRenderElement(element)).render(
+				cell.label === 'button' ? <KolButton {...commonProps} /> : <KolLinkButton _href="#/back-page" {...commonProps} />,
+			);
+		},
+	};
+};
+
+export const InteractiveChildElements: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows a KolTableStateless with different interactive child elements. It can be used to assure themes show these child elements correctly.
+			</p>
+		</SampleDescription>
+
+		<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"
+		/>
+
+		<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"
+		/>
+	</>
+);

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

@@ -89,7 +89,7 @@ const HEADERS: KoliBriTableHeaders = {
 							}}
 						>
 							<KolInputText _label="Input" />
-							<KolButton _label={'Save'} />
+							<KolButton _label="Save" _icons={{ left: 'codicon codicon-save' }} />
 						</div>,
 					);
 				},

package/src/components/table/routes.ts

@@ -8,8 +8,11 @@ import { TableSortData } from './sort-data';
 import { TableStateless } from './stateless';
 import { TableWithFooter } from './with-footer';
 import { TableStatefulWithSelection } from './stateful-with-selection';
+import { TableStatefulWithSingleSelection } from './stateful-with-single-selection';
 import { TableStatelessWithSelection } from './stateless-with-selection';
+import { TableStatelessWithSingleSelection } from './stateless-with-single-selection';
 import { TableWithPagination } from './with-pagination';
+import { InteractiveChildElements } from './interactive-child-elements';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
@@ -21,8 +24,11 @@ export const TABLE_ROUTES: Routes = {
 		'sort-data': TableSortData,
 		'with-footer': TableWithFooter,
 		'stateful-with-selection': TableStatefulWithSelection,
+		'stateful-with-single-selection': TableStatefulWithSingleSelection,
 		'stateless-with-selection': TableStatelessWithSelection,
+		'stateless-with-single-selection': TableStatelessWithSingleSelection,
 		'with-pagination': TableWithPagination,
+		'interactive-child-elements': InteractiveChildElements,
 		stateless: TableStateless,
 	},
 };

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

@@ -5,18 +5,18 @@ import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 
 const DATA = [
-	{ id: '1001', name: 'Foo Bar' },
-	{ id: '1002', name: 'Foo Baz' },
+	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
+	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
 ];
 type Data = (typeof DATA)[0];
 
 export const TableStatefulWithSelection: FC = () => {
-	const [selectedValue, setSelectedValue] = useState<Data[]>();
+	const [selectedValue, setSelectedValue] = useState<Data[] | null>();
 
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
-		selectedKeys: selectedValue ? selectedValue.map((element) => element.id) : [],
-		keyPropertyName: 'id',
+		selectedKeys: selectedValue ? selectedValue.map((element) => element.internalIdentifier) : [],
+		keyPropertyName: 'internalIdentifier',
 	};
 
 	const kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);
@@ -24,13 +24,13 @@ export const TableStatefulWithSelection: FC = () => {
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[]) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | null) => {
 		console.log('Selection change via callback', selection);
 	};
 
 	const handleButtonClick = async () => {
 		const selection = await kolTableStatefulRef.current?.getSelection();
-		setSelectedValue(selection as Data[]);
+		setSelectedValue(selection as Data[] | null);
 	};
 
 	useEffect(() => {

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

@@ -0,0 +1,84 @@
+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 { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
+
+const DATA = [
+	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
+	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
+];
+
+type Data = (typeof DATA)[0];
+
+export const TableStatefulWithSingleSelection: FC = () => {
+	const [selectedValue, setSelectedValue] = useState<Data | null>();
+
+	const selection: KoliBriTableSelection = {
+		label: (row) => `Selection for ${(row as Data).name}`,
+		multiple: false,
+		selectedKeys: selectedValue ? [selectedValue.internalIdentifier] : [],
+		keyPropertyName: 'internalIdentifier',
+	};
+
+	const kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);
+
+	const handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {
+		console.log('Selection change via event', selection);
+	};
+	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | string | null) => {
+		console.log('Selection change via callback', selection);
+	};
+
+	const handleButtonClick = async () => {
+		const selection = await kolTableStatefulRef.current?.getSelection();
+		setSelectedValue(selection as Data | null);
+	};
+
+	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]);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows KolTableStateful with radio buttons for selection enabled.</p>
+			</SampleDescription>
+
+			<KolTableStateful
+				_label="Table with selection radio"
+				_headers={{
+					horizontal: [
+						[
+							{ key: 'id', label: '#ID', textAlign: 'left' },
+							{ key: 'name', label: 'Name', textAlign: 'left' },
+						],
+					],
+				}}
+				_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>
+		</>
+	);
+};

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

@@ -1,20 +1,22 @@
 import type { FC } from 'react';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { KolTableStateless } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableSelection } from '@public-ui/components';
 
 const DATA = [
-	{ id: '1001', name: 'Foo Bar' },
-	{ id: '1002', name: 'Foo Baz' },
+	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
+	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
 ];
 type Data = (typeof DATA)[0];
 
 export const TableStatelessWithSelection: FC = () => {
+	const [selectedKeys, setSelectedKeys] = useState(['AAA1002']);
+
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
-		selectedKeys: ['1002'],
-		keyPropertyName: 'id',
+		selectedKeys,
+		keyPropertyName: 'internalIdentifier',
 	};
 
 	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);
@@ -22,8 +24,9 @@ export const TableStatelessWithSelection: FC = () => {
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event: Event, selection: string[]) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: string[] | string) => {
 		console.log('Selection change via callback', selection);
+		setSelectedKeys(typeof selection === 'string' ? [selection] : selection);
 	};
 
 	useEffect(() => {