@public-ui/sample-react 4.3.0-rc.5 → 4.3.0-rc.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "4.3.0-rc.5",
+  "version": "4.3.0-rc.6",
   "description": "This app contains samples for the KoliBri/Public UI",
   "type": "module",
   "license": "EUPL-1.2",
@@ -9,34 +9,34 @@
     "url": "https://github.com/public-ui/kolibri"
   },
   "dependencies": {
-    "@hookform/resolvers": "5.4.0",
+    "@hookform/resolvers": "5.5.7",
     "@stencil/core": "4.38.3",
-    "@types/node": "25.9.3",
+    "@types/node": "25.9.5",
     "@types/papaparse": "5.5.2",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "adopted-style-sheets": "1.1.9-rc.22",
-    "papaparse": "5.5.3",
-    "react": "19.2.7",
-    "react-dom": "19.2.7",
-    "react-hook-form": "7.79.0",
+    "adopted-style-sheets": "1.1.9-rc.25",
+    "papaparse": "5.5.4",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-hook-form": "7.83.0",
     "react-number-format": "5.4.5",
-    "react-router": "7.17.0",
-    "react-router-dom": "7.17.0",
+    "react-router": "7.18.2",
+    "react-router-dom": "7.18.2",
     "tslib": "2.8.1",
     "typescript": "5.9.3",
     "world_countries_lists": "3.3.0",
     "zod": "4.4.3",
-    "@public-ui/components": "4.3.0-rc.5",
-    "@public-ui/react-hook-form-adapter": "4.3.0-rc.5",
-    "@public-ui/react-v19": "4.3.0-rc.5"
+    "@public-ui/react-v19": "4.3.0-rc.6",
+    "@public-ui/components": "4.3.0-rc.6",
+    "@public-ui/react-hook-form-adapter": "4.3.0-rc.6"
   },
   "devDependencies": {
-    "eslint": "9.39.4",
-    "knip": "6.16.1",
-    "prettier": "3.8.4",
+    "eslint": "9.39.5",
+    "knip": "6.29.0",
+    "prettier": "3.9.6",
     "prettier-plugin-organize-imports": "4.3.0",
-    "stylelint": "17.13.0"
+    "stylelint": "17.14.1"
   },
   "files": [
     "assets",

package/src/components/Navigation.tsx

@@ -1,38 +1,87 @@
-import { KolAccordion, KolTree, KolTreeItem } from '@public-ui/react-v19';
+import { KolInputText, KolTree, KolTreeItem } from '@public-ui/react-v19';
 import * as React from 'react';
+import { useState } from 'react';
 import { useHref, useMatch, useResolvedPath } from 'react-router-dom';
-import { useMobile } from '../hooks/useMobile';
 import type { Route, Routes } from '../shares/types';
 
 type NavigationProps = {
 	routes: Routes;
 };
 
-function ComponentNavContainer({ children }: { children?: React.ReactNode }): React.ReactNode {
-	const isMobile = useMobile();
+function isRoutes(x: Route): x is Routes {
+	return typeof x === 'object' && x !== null;
+}
 
-	return isMobile ? (
-		<KolAccordion _label="All components" class="mt">
-			{children}
-		</KolAccordion>
-	) : (
-		<div className="mt scrollable-container">{children}</div>
-	);
+function cloneSubtree(route: Route): Route {
+	if (!isRoutes(route)) return route; // FC einfach durchreichen
+	const out: Routes = {};
+	for (const [k, v] of Object.entries(route)) out[k] = cloneSubtree(v);
+	return out;
+}
+
+function tokenize(query: string): string[] {
+	return query.trim().toLowerCase().split(/\s+/).filter(Boolean);
 }
 
-function TreeItem({ label, to, children }: any) {
+function pathMatchesTokens(pathSegments: string[], tokens: string[]): boolean {
+	const segs = pathSegments.map((s) => s.toLowerCase());
+	const fullPath = segs.join('/');
+
+	return tokens.every((t) => segs.some((seg) => seg.includes(t)) || fullPath.includes(t));
+}
+
+function walkPath(current: Routes, tokens: string[], path: string[]): Routes {
+	const out: Routes = {};
+
+	for (const [key, value] of Object.entries(current)) {
+		const nextPath = [...path, key];
+
+		const matchesHere = pathMatchesTokens(nextPath, tokens);
+
+		if (matchesHere) {
+			// ganzer Subtree ab hier (weil Pfad bis hier alle Tokens erfüllt)
+			out[key] = cloneSubtree(value);
+			continue;
+		}
+
+		if (isRoutes(value)) {
+			const filteredChildren = walkPath(value, tokens, nextPath);
+			if (Object.keys(filteredChildren).length > 0) {
+				out[key] = filteredChildren; // Pfad zu Treffern behalten
+			}
+		}
+	}
+
+	return out;
+}
+
+function filterRoutes(routes: Routes, query: string): Routes {
+	const tokens = tokenize(query);
+	if (tokens.length === 0) return cloneSubtree(routes) as Routes;
+
+	return walkPath(routes, tokens, []);
+}
+
+function ComponentNavContainer({ children }: { children?: React.ReactNode }): React.ReactNode {
+	return <div className="mt scrollable-container">{children}</div>;
+}
+
+function TreeItem({ label, to, children, open }: any) {
 	const href = useHref(to);
 	const resolved = useResolvedPath(to);
 	const match = useMatch({ path: resolved.pathname, end: true });
 
 	return (
-		<KolTreeItem _label={label} _href={href} _active={!!match}>
+		<KolTreeItem _label={label} _href={href} _active={!!match} _open={open}>
 			{children}
 		</KolTreeItem>
 	);
 }
 
 function Navigation({ routes }: NavigationProps): React.ReactNode {
+	const [query, setQuery] = useState<string>('');
+	let filteredRoutes = filterRoutes(routes, query);
+
 	const buildSubTree = (parentName: string, children: Route) => {
 		return Object.keys(children).map((childName) => {
 			const isTreeExample = parentName === 'tree' && childName === 'basic/:subPage';
@@ -43,15 +92,25 @@ function Navigation({ routes }: NavigationProps): React.ReactNode {
 		});
 	};
 
-	const parentTreeElements = Object.entries(routes).map(([parentName, children]) => (
-		<TreeItem key={parentName} label={parentName} to={parentName}>
+	const parentTreeElements = Object.entries(filteredRoutes).map(([parentName, children]) => (
+		<TreeItem key={parentName} label={parentName} to={parentName} open={!!query}>
 			{buildSubTree(parentName, children)}
 		</TreeItem>
 	));
 
 	return (
 		<ComponentNavContainer>
-			<nav>
+			<KolInputText
+				_label="Suche"
+				_on={{
+					onInput: (event: Event) => {
+						const input = event.target as HTMLInputElement;
+						setQuery(input.value);
+						filteredRoutes = filterRoutes(routes, query);
+					},
+				}}
+			/>
+			<nav className="main-nav">
 				<KolTree _label="Navigation" class="block">
 					{parentTreeElements}
 				</KolTree>

package/src/components/Sidebar.tsx

@@ -1,9 +1,11 @@
 import type { FC } from 'react';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 
-import { KolButton, KolHeading, KolSelect, KolVersion } from '@public-ui/react-v19';
+import { KolButton, KolDrawer, KolHeading, KolSelect, KolVersion } from '@public-ui/react-v19';
+import { useMobile } from '../hooks/useMobile';
 
 import type { SelectOption } from '@public-ui/components';
+import { useLocation } from 'react-router';
 import type { Theme } from '../shares/theme';
 import type { Routes } from '../shares/types';
 import Navigation from './Navigation';
@@ -81,6 +83,14 @@ export const Sidebar: FC<Props> = ({ version, themes, theme, routes, routeList,
 		[themes],
 	);
 
+	const isMobile = useMobile();
+	const locationWatch = useLocation();
+
+	useEffect(() => {
+		drawerElement.current?.close();
+	}, [locationWatch]);
+	const drawerElement = useRef<HTMLKolDrawerElement>(null);
+
 	return (
 		<aside className="app-sidebar p-4">
 			<div className="scrollable-container-wrapper">
@@ -89,16 +99,35 @@ export const Sidebar: FC<Props> = ({ version, themes, theme, routes, routeList,
 					<KolVersion _label={version}></KolVersion>
 				</div>
 				<BuildInformation buildDate={buildDate} commitHash={commitHash} />
-				<KolSelect _label="Theme" _options={themeOption} _on={{ onChange: handleThemeSelectChange }} _value={theme} class="mt"></KolSelect>
-				<KolHeading _label="Components" _level={2} className="block mt"></KolHeading>
+				{!isMobile ? <KolSelect _label="Theme" _options={themeOption} _on={{ onChange: handleThemeSelectChange }} _value={theme} class="mt"></KolSelect> : ''}
+				{!isMobile ? <KolHeading _label="Components" _level={2} className="block mt"></KolHeading> : ''}
 				<div className="flex flex-justify-between flex-items-center mt">
 					<KolButton _icons="kolicon-chevron-left" _hideLabel _label="Previous component" _on={{ onClick: handlePreviousClick }} />
-					<span className="text-base text-center">
-						{formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
-					</span>
+
+					{isMobile ? (
+						<div className="flex gap-4 flex-items-center">
+							<span className="text-base text-center">
+								{formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
+							</span>
+							<KolButton _label="Navigation" _hideLabel _icons={{ right: 'kolicon-settings' }} _on={{ onClick: () => drawerElement.current?.showModal() }} />
+						</div>
+					) : (
+						<span className="text-base text-center">
+							{formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
+						</span>
+					)}
+
 					<KolButton _icons="kolicon-chevron-right" _hideLabel _label="Next component" _on={{ onClick: handleNextClick }} />
 				</div>
-				<Navigation routes={routes} />
+				{isMobile ? (
+					<KolDrawer _align="top" _label="Navigation" _hasCloser={true} ref={drawerElement}>
+						<KolSelect _label="Theme" _options={themeOption} _on={{ onChange: handleThemeSelectChange }} _value={theme} class="mt"></KolSelect>
+						<KolHeading _label="Components" _level={2} className="block mt"></KolHeading>
+						<Navigation routes={routes} />
+					</KolDrawer>
+				) : (
+					<Navigation routes={routes} />
+				)}
 			</div>
 		</aside>
 	);

package/src/components/avatar/routes.ts

@@ -1,8 +1,10 @@
 import type { Routes } from '../../shares/types';
 import { AvatarBasic } from './basic';
+import { AvatarSize } from './size';
 
 export const AVATAR_ROUTES: Routes = {
 	avatar: {
 		basic: AvatarBasic,
+		size: AvatarSize,
 	},
 };

package/src/components/avatar/size.tsx

@@ -0,0 +1,26 @@
+import { KolAvatar } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const AvatarSize: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				KolAvatar is <code>6.25rem</code> (100px at the default 16px root font-size) wide/tall by default and simply fills its host element, so it can be
+				resized proportionally with plain CSS <code>width</code> and/or <code>height</code> (set through the <code>style</code> prop). Setting only{' '}
+				<code>width</code> is the reliable way to size it below the default. If <code>width</code> and <code>height</code> are set to different values, the
+				avatar stays square by using the larger of the two - it is centered on its host and may visually extend beyond it on the smaller axis. The
+				initials&apos; font size always scales with the resulting size automatically.
+			</p>
+		</SampleDescription>
+
+		<div className="flex flex-wrap items-center gap-4">
+			<KolAvatar style={{ width: '30px' }} _label="Elke Mustermann" />
+			<KolAvatar style={{ width: '30px', height: '45px' }} _label="Marianne" />
+			<KolAvatar style={{ width: '60px', height: '30px' }} _color="#0000FF" _label="Christian" />
+			<KolAvatar _src="assets/img_avatar.jpg" _label="Elke Mustermann" />
+			<KolAvatar style={{ width: '150px' }} _src="assets/img_avatar.jpg" _label="Elke Mustermann" />
+		</div>
+	</>
+);

package/src/components/select/multiple-dropdown.tsx

@@ -0,0 +1,36 @@
+import { KolSelect } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { InputEventValueDemo } from '../InputEventValueDemo';
+import { SampleDescription } from '../SampleDescription';
+
+export const SelectMultipleDropdown: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Shows KolSelect with multiple=true and rows=1 - a select with multiselection in a dropdown.</p>
+		</SampleDescription>
+
+		<InputEventValueDemo
+			label="KolSelect"
+			renderInput={(handlers) => (
+				<KolSelect
+					_label="Select options"
+					_options={[
+						{ label: 'One', value: 'one' },
+						{ label: 'Two', value: 'two' },
+						{ label: 'Three', value: 'three' },
+						{ label: 'Four', value: 'four' },
+						{ label: 'Five', value: 'five' },
+						{ label: 'Six', value: 'six' },
+						{ label: 'Seven', value: 'seven' },
+						{ label: 'Eight', value: 'eight' },
+						{ label: 'Nine', value: 'nine' },
+					]}
+					_multiple={true}
+					_rows={1}
+					_on={handlers}
+				/>
+			)}
+		/>
+	</>
+);

package/src/components/select/routes.ts

@@ -1,10 +1,12 @@
 import type { Routes } from '../../shares/types';
 import { SelectBasic } from './basic';
 import { SelectOnInputOnChange } from './get-value';
+import { SelectMultipleDropdown } from './multiple-dropdown';
 
 export const SELECT_ROUTES: Routes = {
 	select: {
 		basic: SelectBasic,
 		'get-value': SelectOnInputOnChange,
+		'multiple-dropdown': SelectMultipleDropdown,
 	},
 };

package/tsconfig.json

@@ -7,7 +7,7 @@
 		"preserveConstEnums": true,
 		"sourceMap": true,
 		"preserveSymlinks": true,
-		"moduleResolution": "node",
+		"moduleResolution": "bundler",
 		"lib": ["es2017", "dom"],
 		"typeRoots": ["node_modules/@types"],
 		"noUnusedLocals": true,

package/src/components/input-checkbox/aria-details.tsx

@@ -1,53 +0,0 @@
-import { KolInputCheckbox } from '@public-ui/react-v19';
-import type { FC } from 'react';
-import React from 'react';
-import { SampleDescription } from '../SampleDescription';
-
-export const InputCheckboxAriaDetails: FC = () => (
-	<>
-		<SampleDescription>
-			<p>
-				Demonstrates how to use <code>_ariaDetails</code> to reference an external element that provides detailed information about form inputs. The{' '}
-				<code>_ariaDetails</code> prop uses <code>ElementInternals.ariaDetailsElements</code> to cross the Shadow DOM boundary, making it accessible to screen
-				readers.
-			</p>
-		</SampleDescription>
-
-		<div className="grid gap-8">
-			{/* Checkbox with independent details */}
-			<div className="grid gap-4 p-4 border border-gray-300 rounded">
-				<h2 className="text-lg font-semibold">Checkbox with Aria Details</h2>
-
-				<KolInputCheckbox _label="Accept terms of service" _ariaDetails="checkbox-details" />
-
-				<div id="checkbox-details" className="p-4 bg-blue-50 border-l-4 border-blue-400 rounded" role="complementary">
-					<h3 className="font-semibold text-blue-900 mb-2">Terms and Conditions</h3>
-					<p className="text-sm text-blue-800">
-						By checking this box, you agree to our terms of service and privacy policy. Please read them carefully before proceeding.
-					</p>
-				</div>
-			</div>
-
-			{/* Multiple checkboxes with different details */}
-			<div className="grid gap-4 p-4 border border-gray-300 rounded">
-				<h2 className="text-lg font-semibold">Multiple Checkboxes with Individual Details</h2>
-
-				<KolInputCheckbox _label="Enable notifications" _ariaDetails="notification-details" />
-
-				<KolInputCheckbox _label="Share usage data" _ariaDetails="usage-details" />
-
-				<div id="notification-details" className="p-4 bg-green-50 border-l-4 border-green-400 rounded" role="complementary">
-					<h3 className="font-semibold text-green-900 mb-2">About Notifications</h3>
-					<p className="text-sm text-green-800">We will send you important updates and alerts about your account activity.</p>
-				</div>
-
-				<div id="usage-details" className="p-4 bg-orange-50 border-l-4 border-orange-400 rounded" role="complementary">
-					<h3 className="font-semibold text-orange-900 mb-2">About Usage Data</h3>
-					<p className="text-sm text-orange-800">
-						Sharing usage data helps us improve our service and provide better experiences. Your data is encrypted and never shared with third parties.
-					</p>
-				</div>
-			</div>
-		</div>
-	</>
-);

package/src/components/single-select/aria-details.tsx

@@ -1,93 +0,0 @@
-import { KolSingleSelect } from '@public-ui/react-v19';
-import type { FC } from 'react';
-import React from 'react';
-import { SampleDescription } from '../SampleDescription';
-
-export const SingleSelectAriaDetails: FC = () => (
-	<>
-		<SampleDescription>
-			<p>
-				Demonstrates how to use <code>_ariaDetails</code> to reference external elements that provide detailed information about select options. The{' '}
-				<code>_ariaDetails</code> prop uses <code>ElementInternals.ariaDetailsElements</code> to cross the Shadow DOM boundary, making it accessible to screen
-				readers.
-			</p>
-		</SampleDescription>
-
-		<div className="grid gap-8">
-			{/* Single Select with independent details */}
-			<div className="grid gap-4 p-4 border border-gray-300 rounded">
-				<h2 className="text-lg font-semibold">Single Select with Aria Details</h2>
-
-				<KolSingleSelect
-					_label="Select your country"
-					_ariaDetails="country-details"
-					_options={[
-						{ label: 'Germany', value: 'de' },
-						{ label: 'Austria', value: 'at' },
-						{ label: 'Switzerland', value: 'ch' },
-						{ label: 'Netherlands', value: 'nl' },
-					]}
-				/>
-
-				<div id="country-details" className="p-4 bg-blue-50 border-l-4 border-blue-400 rounded" role="complementary">
-					<h3 className="font-semibold text-blue-900 mb-2">Country Selection</h3>
-					<p className="text-sm text-blue-800">
-						Select your country of residence. This helps us provide localized content, shipping information, and applicable tax rates for your region.
-					</p>
-				</div>
-			</div>
-
-			{/* Multiple Single Selects with different details */}
-			<div className="grid gap-4 p-4 border border-gray-300 rounded">
-				<h2 className="text-lg font-semibold">Multiple Selects with Individual Details</h2>
-
-				<KolSingleSelect
-					_label="Experience Level"
-					_ariaDetails="experience-details"
-					_options={[
-						{ label: 'Beginner', value: 'beginner' },
-						{ label: 'Intermediate', value: 'intermediate' },
-						{ label: 'Advanced', value: 'advanced' },
-						{ label: 'Expert', value: 'expert' },
-					]}
-				/>
-
-				<KolSingleSelect
-					_label="Support Plan"
-					_ariaDetails="support-details"
-					_options={[
-						{ label: 'Community (Free)', value: 'community' },
-						{ label: 'Standard', value: 'standard' },
-						{ label: 'Professional', value: 'professional' },
-						{ label: 'Enterprise', value: 'enterprise' },
-					]}
-				/>
-
-				<div id="experience-details" className="p-4 bg-green-50 border-l-4 border-green-400 rounded" role="complementary">
-					<h3 className="font-semibold text-green-900 mb-2">About Experience Level</h3>
-					<p className="text-sm text-green-800">
-						Your experience level helps us provide appropriate documentation, tutorials, and support. It also affects which features are recommended to you.
-					</p>
-				</div>
-
-				<div id="support-details" className="p-4 bg-orange-50 border-l-4 border-orange-400 rounded" role="complementary">
-					<h3 className="font-semibold text-orange-900 mb-2">Support Plans</h3>
-					<ul className="text-sm text-orange-800 space-y-1">
-						<li>
-							<strong>Community:</strong> Community forums only
-						</li>
-						<li>
-							<strong>Standard:</strong> Email support, 24-hour response
-						</li>
-						<li>
-							<strong>Professional:</strong> Priority email + phone, 4-hour response
-						</li>
-						<li>
-							<strong>Enterprise:</strong> Dedicated support, 1-hour response + SLA
-						</li>
-					</ul>
-				</div>
-			</div>
-		</div>
-	</>
-);