@public-ui/sample-react 2.2.6-rc.0 → 2.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.2.6-rc.0",
+  "version": "2.2.6",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -36,9 +36,9 @@
     "typescript": "5.7.3",
     "world_countries_lists": "2.9.0",
     "yup": "1.6.1",
-    "@public-ui/components": "2.2.6-rc.0",
-    "@public-ui/themes": "2.2.6-rc.0",
-    "@public-ui/react": "2.2.6-rc.0"
+    "@public-ui/components": "2.2.6",
+    "@public-ui/react": "2.2.6",
+    "@public-ui/themes": "2.2.6"
   },
   "files": [
     ".eslintignore",

package/src/components/form/error-list.tsx

@@ -1,10 +1,22 @@
 import { KolButton, KolForm, KolInputText } from '@public-ui/react';
 import type { FC } from 'react';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const FormErrorList: FC = () => {
 	const formRef = useRef<HTMLKolFormElement | null>(null);
+
+	const scrollTo = () => {
+		formRef.current?.focusErrorList();
+	};
+
+	/**
+	 * Simulate the form submission
+	 */
+	useEffect(() => {
+		formRef.current?.focusErrorList();
+	}, []);
+
 	return (
 		<>
 			<SampleDescription>
@@ -14,26 +26,42 @@ export const FormErrorList: FC = () => {
 			<KolForm
 				className="w-full"
 				ref={formRef}
+				_on={{
+					onSubmit: scrollTo,
+				}}
 				_errorList={[
 					{
 						message: 'Error in Input 2',
 						selector: '#input2',
 					},
+					{
+						message: 'Error in Input 3',
+						selector: () => alert('Error in Input 3'),
+					},
 				]}
 			>
 				<div className="grid gap-2">
 					<KolInputText id="input1" _label="Input 1" />
-					<KolInputText id="input2" _label="Input 2" _touched _msg={{ _description: 'Input error', _type: 'error' }} />
-					<KolInputText id="input3" _label="Input 3" />
+					<KolInputText
+						id="input2"
+						_label="Input 2"
+						_touched
+						_msg={{
+							_description: 'Input error',
+							_type: 'error',
+						}}
+					/>
+					<KolInputText
+						id="input3"
+						_label="Input 3"
+						_touched
+						_msg={{
+							_description: 'Input error',
+							_type: 'error',
+						}}
+					/>
 					<div>
-						<KolButton
-							_label="ScrollTo"
-							_on={{
-								onClick: () => {
-									formRef.current?.focusErrorList();
-								},
-							}}
-						/>
+						<KolButton _label="ScrollTo" _type="submit" />
 					</div>
 				</div>
 			</KolForm>

package/src/react.main.tsx

@@ -5,7 +5,7 @@ import { setTagNameTransformer } from '@public-ui/react';
 
 import { bootstrap, isInitialized, KoliBriDevHelper } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
-import { DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
+import { BWSt, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
 
 import { App } from './App';
 
@@ -35,7 +35,7 @@ const getThemes = async () => {
 	}
 
 	/* List of regular sample app themes */
-	return [DEFAULT, ECL_EC, ECL_EU, ITZBund] as Theme[];
+	return [DEFAULT, ECL_EC, ECL_EU, ITZBund, BWSt] as Theme[];
 };
 
 void (async () => {

package/src/shares/theme.ts

@@ -1,6 +1,6 @@
 import { SelectOption } from '@public-ui/components';
 
-export const THEMES = ['default', 'ecl-ec', 'ecl-eu', 'itzbund', 'unstyled'] as const;
+export const THEMES = ['default', 'ecl-ec', 'ecl-eu', 'itzbund', 'bwst', 'unstyled'] as const;
 export type Theme = (typeof THEMES)[number];
 export type ThemeAndUnstyled = Theme | 'unstyled';
 
@@ -26,6 +26,10 @@ export const THEME_OPTIONS: SelectOption<ThemeAndUnstyled>[] = [
 		label: 'Default (Tested)',
 		value: 'default',
 	},
+	{
+		label: 'BWSt (Tested)',
+		value: 'bwst',
+	},
 	{
 		label: 'European Commission (Draft)',
 		value: 'ecl-ec',