@public-ui/sample-react 4.3.0 → 4.3.1-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "4.3.0",
+  "version": "4.3.1-rc.1",
   "description": "This app contains samples for the KoliBri/Public UI",
   "type": "module",
   "license": "EUPL-1.2",
@@ -9,26 +9,26 @@
     "url": "https://github.com/public-ui/kolibri"
   },
   "dependencies": {
-    "@hookform/resolvers": "5.5.7",
+    "@hookform/resolvers": "5.7.1",
     "@stencil/core": "4.38.3",
-    "@types/node": "26.1.2",
+    "@types/node": "26.2.0",
     "@types/papaparse": "5.5.2",
     "papaparse": "5.5.4",
-    "react-hook-form": "7.83.0",
+    "react-hook-form": "7.85.0",
     "react-number-format": "5.4.5",
     "tslib": "2.8.1",
     "typescript": "5.9.3",
     "world_countries_lists": "3.3.0",
     "zod": "4.4.3",
-    "@public-ui/react-hook-form-adapter": "4.3.0",
-    "@public-ui/react-v19": "4.3.0"
+    "@public-ui/react-hook-form-adapter": "4.3.1-rc.1",
+    "@public-ui/react-v19": "4.3.1-rc.1"
   },
   "devDependencies": {
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",
     "adopted-style-sheets": "1.1.9-rc.25",
     "eslint": "9.39.5",
-    "knip": "6.29.0",
+    "knip": "6.32.1",
     "prettier": "3.9.6",
     "prettier-plugin-organize-imports": "4.3.0",
     "stylelint": "17.14.1"
@@ -37,7 +37,7 @@
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "react-router": "8.3.0",
-    "@public-ui/components": "4.3.0"
+    "@public-ui/components": "4.3.1-rc.1"
   },
   "files": [
     "assets",

package/src/App.tsx

@@ -40,15 +40,17 @@ export const App: FC<Props> = ({ customThemes }) => {
 
 	useEffect(() => {
 		let isActive = true;
-		if (sampleAppDataService.isInitialized(themes)) {
-			setIsSampleAppDataInitialized(true);
+		const isInit = sampleAppDataService.isInitialized(themes);
+		const updateState = (value: boolean) => {
+			if (isActive) setIsSampleAppDataInitialized(value);
+		};
+		if (isInit) {
+			setTimeout(() => updateState(true), 0);
 			return;
 		}
-		setIsSampleAppDataInitialized(false);
+		updateState(false);
 		void sampleAppDataService.initialize(themes).then(() => {
-			if (isActive) {
-				setIsSampleAppDataInitialized(true);
-			}
+			updateState(true);
 		});
 		return () => {
 			isActive = false;
@@ -122,8 +124,8 @@ export const App: FC<Props> = ({ customThemes }) => {
 		return tree;
 	};
 
-	const ROUTE_LIST = useMemo(() => getRouteList(ROUTES), [customThemes]);
-	const ROUTE_TREE = useMemo(() => getRouteTree(ROUTES), [customThemes]);
+	const ROUTE_LIST = useMemo(() => getRouteList(ROUTES), []);
+	const ROUTE_TREE = useMemo(() => getRouteTree(ROUTES), []);
 
 	const componentList: Map<string, Option<string>> = new Map();
 	ROUTE_LIST.forEach((route) => {
@@ -139,9 +141,11 @@ export const App: FC<Props> = ({ customThemes }) => {
 	setTheme(theme); // set for `getTheme` usages within the application
 	useSetCurrentLocation();
 
-	document.title = `KoliBri-Handout - ${getThemeName(getTheme())} | v${PackageJson.version}`;
-	document.body.setAttribute('class', theme);
-	document.body.dataset.theme = theme;
+	useEffect(() => {
+		document.title = `KoliBri-Handout - ${getThemeName(getTheme())} | v${PackageJson.version}`;
+		document.body.setAttribute('class', theme);
+		document.body.dataset.theme = theme;
+	}, [theme]);
 
 	const handleThemeChange = (theme: unknown) => {
 		setSearchParams({ theme: theme as string });

package/src/components/Navigation.tsx

@@ -1,6 +1,6 @@
 import { KolInputText, KolTree, KolTreeItem } from '@public-ui/react-v19';
 import * as React from 'react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useHref, useMatch, useResolvedPath } from 'react-router';
 import type { Route, Routes } from '../shares/types';
 
@@ -80,7 +80,7 @@ function TreeItem({ label, to, children, open }: any) {
 
 function Navigation({ routes }: NavigationProps): React.ReactNode {
 	const [query, setQuery] = useState<string>('');
-	let filteredRoutes = filterRoutes(routes, query);
+	const filteredRoutes = useMemo(() => filterRoutes(routes, query), [routes, query]);
 
 	const buildSubTree = (parentName: string, children: Route) => {
 		return Object.keys(children).map((childName) => {
@@ -106,7 +106,6 @@ function Navigation({ routes }: NavigationProps): React.ReactNode {
 					onInput: (event: Event) => {
 						const input = event.target as HTMLInputElement;
 						setQuery(input.value);
-						filteredRoutes = filterRoutes(routes, query);
 					},
 				}}
 			/>

package/src/components/SampleDescription.tsx

@@ -17,13 +17,13 @@ export const SampleDescription: FC<PropsWithChildren> = (props) => {
 		return paths[0] === 'scenarios'
 			? null // Scenarios are not a component and hence have no documentation.
 			: `${PUBLIC_DOC_COMPONENT_URL}/${paths[0]}`;
-	}, [location.hash]);
+	}, [paths]);
 
 	const codeLink = useMemo(() => {
 		return paths[0] === 'scenarios'
 			? null // Scenarios are not a component and hence have no documentation.
 			: `${PUBLIC_CODE_COMPONENT_URL}/${paths[0]}/${paths[1]}.tsx`;
-	}, [location.hash]);
+	}, [paths]);
 
 	return (
 		<>

package/src/components/card/linked.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { KolCard } from '@public-ui/react-v19';
+
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const CardLinked: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows KolCards with links. The headline is wrapped with an a-tag. The whole card is clickable.</p>
+			</SampleDescription>
+
+			<div className="w-full grid grid-cols-2 gap-4">
+				<KolCard _label="Card with title and content" _href="#/back-page">
+					<p>This card has a link.</p>
+				</KolCard>
+
+				<KolCard _label="Card with title and content" _href="#/back-page" _target="_blank">
+					<p>This card has a link and a target.</p>
+				</KolCard>
+			</div>
+		</>
+	);
+};

package/src/components/card/routes.ts

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

package/src/components/dialog/basic.tsx

@@ -28,7 +28,7 @@ export const DialogBasic: FC = () => {
 			blankRef.current?.openModal();
 			cardRef.current?.openModal();
 		}
-	}, []);
+	}, [showDialog]);
 
 	return (
 		<>

package/src/components/input-text/basic.tsx

@@ -7,7 +7,7 @@ import { SampleDescription } from '../SampleDescription';
 export const InputTextBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This story showcases the most important InputText variants: default, required, validation error, disabled, read-only, and with icons.</p>
+			<p>This story showcases the most important InputText variants: default, required, validation error, disabled, read-only and with icons.</p>
 		</SampleDescription>
 
 		<div className="grid gap-4">
@@ -32,7 +32,18 @@ export const InputTextBasic: FC = () => (
 			<KolInputText _label="Name" _required _msg={{ _type: 'error', _description: 'Please enter your name' }} _touched />
 			<KolInputText _label="Name" _required _hint="Enter your surname" />
 			<KolInputText _label="Name" _value="Anderson-Clark" _disabled />
-			<KolInputText _label="Name" _readOnly _value="Anderson-Clark" />
+			<KolInputText
+				_label="Name"
+				_required
+				_value="Anderson-Clark"
+				_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}
+			/>
+			<KolInputText
+				_label="Name"
+				_readOnly
+				_value="Anderson-Clark"
+				_infoPopover={{ _label: 'hint', _content: 'Ich bin ein Hinweis.', _icons: 'kolicon-alert-info' }}
+			/>
 			<KolInputText _label="Name" _icons="kolicon-house" _value="Anderson-Clark" />
 		</div>
 	</>

package/src/components/table/big-table.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import type { KoliBriTableHeaderCellWithLogic, KoliBriTableHeaders, KoliBriTableSelection } from '@public-ui/components';
 import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
@@ -30,7 +30,7 @@ export const TableBig: FC = () => {
 	const [searchParams, setSearchParams] = useSearchParams();
 	const [rows, setRows] = useState<number>(50);
 	const [fixedCols, setFixedCols] = useState<[number, number]>([0, 0]);
-	var loaded = false;
+	const loaded = useRef(false);
 
 	const [headers, setHeaders] = useState<KoliBriTableHeaderCellWithLogic[]>(defaultHeaders);
 
@@ -39,7 +39,7 @@ export const TableBig: FC = () => {
 	};
 
 	function defineTable() {
-		if (loaded) {
+		if (loaded.current) {
 			return;
 		}
 
@@ -82,7 +82,7 @@ export const TableBig: FC = () => {
 			});
 		}
 
-		loaded = true;
+		loaded.current = true;
 	}
 
 	useEffect(() => defineTable(), [searchParams]);

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

@@ -1,7 +1,7 @@
 import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys } from '@public-ui/components';
 import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
@@ -42,13 +42,13 @@ export const TableStatelessWithSingleSelection: FC = () => {
 
 	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);
 
-	const handleSelectionChangeEvent = ({ detail: selection }: CustomEvent<SelectionValue[]>) => {
+	const handleSelectionChangeEvent = useCallback(({ detail: selection }: CustomEvent<SelectionValue[]>) => {
 		console.log('Selection change via event', selection);
-	};
-	const handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[]) => {
+	}, []);
+	const handleSelectionChangeCallback = useCallback((_event: Event, selection: SelectionValue[]) => {
 		console.log('Selection change via callback', selection);
 		setSelectedKeys(selection);
-	};
+	}, []);
 
 	useEffect(() => {
 		const tableElement = kolTableStatelessRef.current as unknown as KolTableStatelessElement | null;
@@ -58,13 +58,13 @@ export const TableStatelessWithSingleSelection: FC = () => {
 		return () => {
 			tableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);
 		};
-	}, [kolTableStatelessRef]);
+	}, [kolTableStatelessRef, handleSelectionChangeEvent]);
 
-	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
+	const renderButton = useCallback((element: HTMLElement, cell: KoliBriTableCell) => {
 		const data = (cell as { data?: Data }).data;
 		const id = data?.id;
 		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${id}`} />);
-	};
+	}, []);
 
 	return (
 		<>

package/src/hooks/useMobile.ts

@@ -4,12 +4,10 @@ export function useMobile(): boolean {
 	const mediaQuery = matchMedia('(max-width: 1023px)');
 	const [matches, setMatches] = useState<boolean>(mediaQuery.matches);
 
-	const handleChange = () => {
-		setMatches(mediaQuery.matches);
-	};
-
 	useEffect(() => {
-		handleChange(); // handle initial value
+		const handleChange = (e: MediaQueryListEvent) => {
+			setMatches(e.matches);
+		};
 		mediaQuery.addEventListener('change', handleChange);
 
 		return () => {

package/src/scenarios/focus-elements.tsx

@@ -5,6 +5,7 @@ import {
 	KolBadge,
 	KolButton,
 	KolButtonLink,
+	KolCard,
 	KolCombobox,
 	KolDetails,
 	KolHeading,
@@ -52,6 +53,7 @@ const getFocusElements = () => {
 	));
 	focusElements.set('button', (_, ref) => <KolButton _label="Button here" ref={ref} />);
 	focusElements.set('buttonLink', (_, ref) => <KolButtonLink _label="ButtonLink here" ref={ref} />);
+	focusElements.set('card', (_, ref) => <KolCard className="w-full" _label="Card with link here" _href="#" ref={ref} />);
 	focusElements.set('combobox', (_, ref) => <KolCombobox className="w-full" _label="KolCombobox here" _suggestions={[]} ref={ref} />);
 	focusElements.set('details', (_, ref) => (
 		<KolDetails className="w-full" _label="Details here" ref={ref}>

package/src/scenarios/inputs-get-value.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 import {
 	KolButton,
@@ -44,10 +44,10 @@ const Scenario = (props: Props) => {
 	const eventTarget = useContext(EventTargetContext);
 	const eventLoggerActive = useContext(EventLoggerActiveContext);
 
-	const handleButtonClick = async () => {
+	const handleButtonClick = useCallback(async () => {
 		const value = await ref.current?.getValue();
 		setDisplayValue(value);
-	};
+	}, []);
 
 	useEffect(() => {
 		const handleRunAll = () => {
@@ -58,7 +58,7 @@ const Scenario = (props: Props) => {
 		return () => {
 			eventTarget?.removeEventListener('runAll', handleRunAll);
 		};
-	}, [eventTarget]);
+	}, [eventTarget, handleButtonClick]);
 
 	const eventListeners = Object.fromEntries(
 		['onInput', 'onChange', 'onBlur', 'onClick', 'onFocus', 'onMouseDown'].map((eventName) => [

package/src/scenarios/routes.ts

@@ -12,6 +12,7 @@ import { InputsGetValue } from './inputs-get-value';
 import { PerformanceTest } from './performance-test';
 import { RHFBasic } from './react-hook-form/basic';
 import { RHFDisabled } from './react-hook-form/disabled';
+import { SameHeightOfAllFormElements } from './same-height-of-all-form-elements-with-label';
 import { SameHeightOfAllInteractiveElements } from './same-height-of-all-interactive-elements';
 import { SampleFormWithValidation } from './sample-form-with-validation';
 import { Skeleton } from './skeleton';
@@ -33,6 +34,7 @@ export const SCENARIO_ROUTES: Routes = {
 		'react-hook-form-adapter': RHFBasic,
 		'react-hook-form-adapter-disabled': RHFDisabled,
 		'same-height-of-all-interactive-elements': SameHeightOfAllInteractiveElements,
+		'same-height-of-all-form-elements-with-label': SameHeightOfAllFormElements,
 		'static-form': StaticForm,
 		'sample-form-with-validation': SampleFormWithValidation,
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,

package/src/scenarios/same-height-of-all-form-elements-with-label.tsx

@@ -0,0 +1,46 @@
+import {
+	KolCombobox,
+	KolInputColor,
+	KolInputDate,
+	KolInputEmail,
+	KolInputFile,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRange,
+	KolInputText,
+	KolSelect,
+	KolSingleSelect,
+	KolTextarea,
+} from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+
+export const SameHeightOfAllFormElements: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>All form elements with labels, should have the same height and gaps to ensure a consistent and visually balanced user interface.</p>
+			</SampleDescription>
+			<div className="w-full flex flex-wrap gap-4">
+				<KolCombobox _icons="kolicon-house" _label="Combobox" _suggestions={[]} />
+				<KolInputColor
+					_icons={{
+						left: 'kolicon-house',
+					}}
+					_label="Input-Color"
+				/>
+				<KolInputFile _icons="kolicon-house" _label="Input-File" />
+				<KolInputDate _icons="kolicon-house" _label="Input-Date" />
+				<KolInputEmail _icons="kolicon-house" _label="Input-Email" />
+				<KolInputNumber _icons="kolicon-house" _label="Input-Number" />
+				<KolInputPassword _icons="kolicon-house" _label="Input-Password" />
+				<KolInputRange _icons="kolicon-house" _label="Input-Range" />
+				<KolInputText _icons="kolicon-house" _label="Input-Text" />
+				<KolSelect _icons="kolicon-house" _label="Select" _options={[]} />
+				<KolSingleSelect _icons="kolicon-house" _label="Single Select" _options={[]} />
+				<KolTextarea _icons="kolicon-house" _label="Textarea" />
+			</div>
+		</>
+	);
+};

package/src/scenarios/toolbar-item-order.tsx

@@ -1,34 +1,25 @@
 import type { ToolbarItemsPropType } from '@public-ui/components';
 import { KolHeading, KolToolbar } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 export const ToolbarItemOrder: FC = () => {
 	const [isSubmitting, setIsSubmitting] = useState(false);
 	const [isSubmitting2, setIsSubmitting2] = useState(false);
 
-	useEffect(() => {
-		let timer: ReturnType<typeof setTimeout>;
-		if (isSubmitting) {
-			timer = setTimeout(() => {
-				setIsSubmitting(false);
-			}, 2000);
-		}
-		return () => clearTimeout(timer);
-	}, [isSubmitting]);
-
-	useEffect(() => {
-		let timer: ReturnType<typeof setTimeout>;
-		if (isSubmitting2) {
-			timer = setTimeout(() => {
-				setIsSubmitting2(false);
-			}, 2000);
-		}
-		return () => clearTimeout(timer);
-	}, [isSubmitting2]);
-
-	const handleSubmit = () => setIsSubmitting(true);
-	const handleSubmit2 = () => setIsSubmitting2(true);
+	const handleSubmit = () => {
+		setIsSubmitting(true);
+		setTimeout(() => {
+			setIsSubmitting(false);
+		}, 2000);
+	};
+
+	const handleSubmit2 = () => {
+		setIsSubmitting2(true);
+		setTimeout(() => {
+			setIsSubmitting2(false);
+		}, 2000);
+	};
 
 	const toolbarItems = useMemo(() => {
 		const items: ToolbarItemsPropType = Array.from({ length: 5 }, (_item, index) => ({