@public-ui/sample-react 3.0.7 → 3.0.8-rc.1

package/public/assets/material-symbols/package.json

@@ -1,41 +1,41 @@
 {
-  "name": "material-symbols",
-  "version": "0.5.5",
-  "description": "Latest variable icon fonts and CSS for Material Symbols.",
-  "main": "index.css",
-  "sass": "index.scss",
-  "types": "index.d.ts",
-  "files": [
-    "index.d.ts",
-    "*.{css,scss,woff2}"
-  ],
-  "scripts": {
-    "build": "sass --no-source-map --no-error-css ."
-  },
-  "devDependencies": {
-    "sass": "1.56.1"
-  },
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/marella/material-symbols.git",
-    "directory": "material-symbols"
-  },
-  "bugs": {
-    "url": "https://github.com/marella/material-symbols/issues"
-  },
-  "homepage": "https://marella.github.io/material-symbols/demo/",
-  "keywords": [
-    "material-symbols",
-    "material-icons",
-    "material-design-icons",
-    "material-design",
-    "material",
-    "symbols",
-    "icons",
-    "font"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
+	"name": "material-symbols",
+	"version": "0.5.5",
+	"description": "Latest variable icon fonts and CSS for Material Symbols.",
+	"main": "index.css",
+	"sass": "index.scss",
+	"types": "index.d.ts",
+	"files": [
+		"index.d.ts",
+		"*.{css,scss,woff2}"
+	],
+	"scripts": {
+		"build": "sass --no-source-map --no-error-css ."
+	},
+	"devDependencies": {
+		"sass": "1.56.1"
+	},
+	"license": "Apache-2.0",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/marella/material-symbols.git",
+		"directory": "material-symbols"
+	},
+	"bugs": {
+		"url": "https://github.com/marella/material-symbols/issues"
+	},
+	"homepage": "https://marella.github.io/material-symbols/demo/",
+	"keywords": [
+		"material-symbols",
+		"material-icons",
+		"material-design-icons",
+		"material-design",
+		"material",
+		"symbols",
+		"icons",
+		"font"
+	],
+	"publishConfig": {
+		"access": "public"
+	}
 }

package/src/components/avatar/basic.tsx

@@ -6,7 +6,10 @@ import { SampleDescription } from '../SampleDescription';
 export const AvatarBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>KolAlert shows a user&apos;s avatar. It can be used with or without an image. If no image is defined, the name&apos;s initials are shown instead.</p>
+			<p>
+				KolAvatar shows a user&apos;s avatar with customizable colors. It can be used with or without an image. If no image is defined, the name&apos;s initials
+				are shown instead with a configurable background color.
+			</p>
 		</SampleDescription>
 
 		<div className="flex flex-wrap gap-4">
@@ -15,6 +18,7 @@ export const AvatarBasic: FC = () => (
 			{/* intentional trailing space    👇 - it's supposed to be trimmed */}
 			<KolAvatar _label="Elke Mustermann " />
 			<KolAvatar _label="Marianne" />
+			<KolAvatar _color="#0000FF" _label="Christian" />
 		</div>
 	</>
 );

package/src/components/button/icons.tsx

@@ -37,6 +37,7 @@ export const ButtonIcons: FC = () => {
 					}}
 					_label="Label"
 					_on={dummyEventHandler}
+					className="w-10rem"
 				/>
 			</div>
 		</>

package/src/components/card/headlines.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { KolCard } from '@public-ui/react-v19';
+
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const CardHeadlines: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows cards with all headline levels as title.</p>
+			</SampleDescription>
+
+			<div className="w-full grid grid-cols-2 gap-4">
+				<KolCard _label="Card with headline level 0" _level={0}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 1" _level={1}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 2" _level={2}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 3" _level={3}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 4" _level={4}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 5" _level={5}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 6" _level={6}>
+					<div>Card contents.</div>
+				</KolCard>
+			</div>
+		</>
+	);
+};

package/src/components/card/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { CardBasic } from './basic';
+import { CardHeadlines } from './headlines';
 
 export const CARD_ROUTES: Routes = {
 	card: {
 		basic: CardBasic,
+		headlines: CardHeadlines,
 	},
 };

package/src/components/combobox/html.tsx

@@ -0,0 +1,16 @@
+import { KolCombobox } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const ComboboxHtml: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>A HTML only KolCombobox.</p>
+			</SampleDescription>
+
+			<KolCombobox _label="With string array in html" _suggestions="['Herr','Frau','Firma']" _value="Herr" />
+		</>
+	);
+};

package/src/components/combobox/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { ComboboxBasic } from './basic';
+import { ComboboxHtml } from './html';
 
 export const COMBOBOX_ROUTES: Routes = {
 	combobox: {
 		basic: ComboboxBasic,
+		html: ComboboxHtml,
 	},
 };

package/src/components/icon/basic.tsx

@@ -8,11 +8,15 @@ import { SampleDescription } from '../SampleDescription';
 export const IconBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>KolIcon renders an icon. This sample shows one regular icon and one with a custom style-property, changing the icon color.</p>
+			<p>KolIcon renders codicon icons. This sample shows regular icons and one with a custom style-property, changing the icon color.</p>
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolIcon className="block w-[1em] h-[1em]" _label="" _icons="codicon codicon-home" />
+			<KolIcon className="block" _label="" _icons="codicon codicon-home" />
+			<KolIcon className="block" _label="" _icons="codicon codicon-compass-active" />
+			<KolIcon className="block" _label="" _icons="codicon codicon-debug" />
+			<KolIcon className="block" _label="" _icons="codicon codicon-squirrel" />
+
 			<KolIcon
 				className="block w-[1em] h-[1em]"
 				style={{

package/src/components/icon/font-awesome.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { KolIcon, KolInputText } from '@public-ui/react-v19';
+
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const IconFontAwesome: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolIcon renders Font Awesome icons, if you have added this font to your theme. We are showing Font Awesome Free 6.1.1.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolIcon className="block" _label="" _icons="fa-solid fa-house"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-solid fa-circle-user"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-solid fa-truck"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-solid fa-city"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-regular fa-heart"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-regular fa-thumbs-up"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-brands fa-github"></KolIcon>
+
+			<KolInputText
+				_label={'With Font Awesome icons'}
+				_icons={{
+					left: {
+						icon: 'fa-solid fa-phone',
+					},
+					right: {
+						icon: 'fa-solid fa-arrow-right',
+					},
+				}}
+			/>
+		</div>
+	</>
+);

package/src/components/icon/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { IconBasic } from './basic';
+import { IconFontAwesome } from './font-awesome';
 
 export const ICON_ROUTES: Routes = {
 	icon: {
 		basic: IconBasic,
+		'font-awesome': IconFontAwesome,
 	},
 };

package/src/components/input-number/number-formatter.tsx

@@ -0,0 +1,66 @@
+import { KolForm, KolInputNumber } from '@public-ui/react-v19';
+import * as React from 'react';
+
+import { SampleDescription } from '../SampleDescription';
+
+class NumberFormatter {
+	public parse(value: unknown): string {
+		if (value === undefined || value === null || value === '') {
+			return '';
+		}
+
+		const stringValue = String(value);
+		return stringValue.replace(/[eE.,]/g, '').replace(/\d[+-]/g, '');
+	}
+}
+
+const disallowedCharactersPattern = /[.,+eE]/;
+
+const preventInvalidKeyDown = (event: KeyboardEvent) => {
+	if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && disallowedCharactersPattern.test(event.key)) {
+		event.preventDefault();
+	}
+};
+
+export function InputNumberNumberFormatter() {
+	const formatter = new NumberFormatter();
+	const [displayValue, setDisplayValue] = React.useState<number | undefined>(undefined);
+	const [value, setValue] = React.useState<number | undefined>(-128);
+	const [touched, setTouched] = React.useState(false);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This example demonstrates formatting number input to whole numbers. Decimal separators (. and ,) and scientific notation (e) are automatically removed
+					on input.
+				</p>
+			</SampleDescription>
+			<section className="w-full">
+				<div className="p-2">
+					<KolForm>
+						<KolInputNumber
+							_label="Whole number"
+							_step={1}
+							_value={displayValue ?? value}
+							_on={{
+								onKeyDown: preventInvalidKeyDown,
+								onBlur: () => {
+									setTouched(true);
+								},
+								onInput: (_event: Event, inputValue: unknown) => {
+									const cleaned = formatter.parse(inputValue);
+									const numValue = cleaned === '' ? undefined : Number(cleaned);
+
+									setDisplayValue(numValue);
+									setValue(numValue);
+								},
+							}}
+						/>
+					</KolForm>
+					<pre className="text-base">{JSON.stringify({ value, touched }, null, 2)}</pre>
+				</div>
+			</section>
+		</>
+	);
+}

package/src/components/input-number/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { InputNumberBasic } from './basic';
+import { InputNumberNumberFormatter } from './number-formatter';
 
 export const INPUT_NUMBER_ROUTES: Routes = {
 	'input-number': {
 		basic: InputNumberBasic,
+		'number-formatter': InputNumberNumberFormatter,
 	},
 };

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

@@ -1,11 +1,12 @@
 import { KolHeading, KolPopoverButton, KolToolbar } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
 import { SampleDescription } from '../SampleDescription';
 
 export const PopoverButtonBasic: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
+	const buttonRef = React.useRef<HTMLKolPopoverButtonElement>(null);
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,
@@ -29,6 +30,14 @@ export const PopoverButtonBasic: FC = () => {
 		},
 	];
 
+	useEffect(() => {
+		// Ensure the popover is closed on initial render
+		if (buttonRef.current) {
+			buttonRef.current.showPopover();
+			buttonRef.current.kolFocus();
+		}
+	}, []);
+
 	return (
 		<>
 			<SampleDescription>
@@ -37,19 +46,13 @@ export const PopoverButtonBasic: FC = () => {
 					right, bottom, left) using the <code>_popoverAlign</code> prop.
 				</p>
 			</SampleDescription>
-
 			<div className="flex flex-col gap-4">
-				<KolHeading _label="Vertical toolbar with action buttons" _level={2}></KolHeading>
-
-				<KolPopoverButton _label={'Actions'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }}>
+				<KolPopoverButton _label={'Actions'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }} ref={buttonRef}>
 					<KolToolbar _label="Action toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
 				</KolPopoverButton>
-
-				<KolHeading _label="Info icon with help text" _level={2}></KolHeading>
-
 				<KolPopoverButton _label="Help" _icons="codicon codicon-info" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
 					<div className="w-sm p-2 border border-solid border-gray">
-						<KolHeading _label="Help Information" _level={3}></KolHeading>
+						<KolHeading _label="Help Information" _level={0}></KolHeading>
 						<p>
 							<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
 							Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.

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-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/table/direction-aware-sort.tsx

@@ -0,0 +1,65 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import { KolTableStateful } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
+
+type TemperatureRow = {
+	city: string;
+	temperature: number;
+};
+
+const COMFORTABLE_TEMPERATURE = 22;
+
+const TEMPERATURE_DATA: TemperatureRow[] = [
+	{ city: 'Reykjavík', temperature: 6 },
+	{ city: 'Berlin', temperature: 21 },
+	{ city: 'Palma de Mallorca', temperature: 29 },
+	{ city: 'Cairo', temperature: 35 },
+	{ city: 'Helsinki', temperature: 14 },
+];
+
+const HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'City', key: 'city' },
+			{
+				label: 'Temperature (°C)',
+				key: 'temperature',
+				textAlign: 'right',
+				compareFn: (rowA, rowB, direction = 'ASC') => {
+					const temperatureA = (rowA as TemperatureRow).temperature;
+					const temperatureB = (rowB as TemperatureRow).temperature;
+					const differenceA = Math.abs(temperatureA - COMFORTABLE_TEMPERATURE);
+					const differenceB = Math.abs(temperatureB - COMFORTABLE_TEMPERATURE);
+
+					if (differenceA !== differenceB) {
+						return direction === 'DESC' ? differenceB - differenceA : differenceA - differenceB;
+					}
+
+					return direction === 'DESC' ? temperatureB - temperatureA : temperatureA - temperatureB;
+				},
+				render: (_element, _cell, row) => {
+					const difference = Math.abs((row as TemperatureRow).temperature - COMFORTABLE_TEMPERATURE);
+					return `${(row as TemperatureRow).temperature} °C (Δ ${difference} °C)`;
+				},
+			},
+		],
+	],
+};
+
+export const TableDirectionAwareSort: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample demonstrates how <code>compareFn</code> receives the current <code>sortDirection</code>. Ascending sorts show cities that are closest to
+				22&nbsp;°C first, descending sorts highlight the most extreme temperatures.
+			</p>
+		</SampleDescription>
+
+		<section className="w-full">
+			<KolTableStateful _minWidth="100%" _label="Direction aware compare function" _data={TEMPERATURE_DATA} _headers={HEADERS} className="block" />
+		</section>
+	</>
+);