Merge branch 'develop' of github.com:public-ui/kolibri into 7155-depr…

…ecate-themes-v3 * 'develop' of github.com:public-ui/kolibri: Update all snapshots$ $ Refs: #5844 chore: release 3.0.0-rc.3 Fix concurrency group syntax in dod-checker workflow Remove auto file generator workflow remove some prepack scripts Update all snapshots$ $ Refs: #7310 Fix duplicate import of 'h' in shadow.tsx component Fix formRef initialization to handle null value in FormErrorList component Enhance error list functionality: improve scrolling and focus behavior for error links Enhance error list rendering: add smooth scroll and focus behavior for alert component Fix test Update all snapshots$ $ Refs: #5844 set initial focus to slot area Refactor modal and add snapshots tests Update all snapshots$ $ Refs: #5844 Fix lint error Fix imports Add styles, e2e tests and update sample app Add close button for modal
public-ui · Feb 4, 2025 · af9dddd · af9dddd
2 parents 3bae09a + 86710f7
commit af9dddd
Show file tree

Hide file tree

Showing 54 changed files with 292 additions and 176 deletions.
diff --git a/.github/workflows/auto-file-generator.yml b/.github/workflows/auto-file-generator.yml
diff --git a/.github/workflows/dod-checker.yml b/.github/workflows/dod-checker.yml
@@ -4,7 +4,7 @@ on:
     types: [opened, edited, synchronize]
 
 concurrency:
-  group: pr-{{ github.event.pull_request.number }}
+  group: 'pr-${{ github.event.pull_request.number }}'
   cancel-in-progress: true
 
 jobs:

diff --git a/lerna.json b/lerna.json
@@ -19,5 +19,5 @@
 		"packages/tools/visual-tests"
 	],
 	"useNx": true,
-	"version": "3.0.0-rc.2"
+	"version": "3.0.0-rc.3"
 }
diff --git a/packages/adapters/angular/v15/package.json b/packages/adapters/angular/v15/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/angular-v15",
-	"version": "3.0.0-rc.2",
+	"version": "3.0.0-rc.3",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
@@ -54,8 +54,7 @@
 		"build:tsc": "tsc -p .",
 		"build:types": "tsc -d --outDir types && rimraf types/*.js types/*.map types/**/*.js types/**/*.map",
 		"build:umd": "tsc -m umd --outDir umd",
-		"build": "npm run build:clean && npm run build:ngc",
-		"prepack": "npm run build"
+		"build": "npm run build:clean && npm run build:ngc"
 	},
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",

diff --git a/packages/adapters/angular/v16/package.json b/packages/adapters/angular/v16/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/angular-v16",
-	"version": "3.0.0-rc.2",
+	"version": "3.0.0-rc.3",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
@@ -54,8 +54,7 @@
 		"build:tsc": "tsc -p .",
 		"build:types": "tsc -d --outDir types && rimraf types/*.js types/*.map types/**/*.js types/**/*.map",
 		"build:umd": "tsc -m umd --outDir umd",
-		"build": "npm run build:clean && npm run build:ngc",
-		"prepack": "npm run build"
+		"build": "npm run build:clean && npm run build:ngc"
 	},
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",

diff --git a/packages/adapters/angular/v17/package.json b/packages/adapters/angular/v17/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/angular-v17",
-	"version": "3.0.0-rc.2",
+	"version": "3.0.0-rc.3",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
@@ -54,8 +54,7 @@
 		"build:tsc": "tsc -p .",
 		"build:types": "tsc -d --outDir types && rimraf types/*.js types/*.map types/**/*.js types/**/*.map",
 		"build:umd": "tsc -m umd --outDir umd",
-		"build": "npm run build:clean && npm run build:ngc",
-		"prepack": "npm run build"
+		"build": "npm run build:clean && npm run build:ngc"
 	},
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",

diff --git a/packages/adapters/angular/v18/package.json b/packages/adapters/angular/v18/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/angular-v18",
-	"version": "3.0.0-rc.2",
+	"version": "3.0.0-rc.3",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
@@ -54,8 +54,7 @@
 		"build:tsc": "tsc -p .",
 		"build:types": "tsc -d --outDir types && rimraf types/*.js types/*.map types/**/*.js types/**/*.map",
 		"build:umd": "tsc -m umd --outDir umd",
-		"build": "npm run build:clean && npm run build:ngc",
-		"prepack": "npm run build"
+		"build": "npm run build:clean && npm run build:ngc"
 	},
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",

diff --git a/packages/adapters/hydrate/package.json b/packages/adapters/hydrate/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/hydrate",
-	"version": "3.0.0-rc.2",
+	"version": "3.0.0-rc.3",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
@@ -45,8 +45,7 @@
 		"hydrate"
 	],
 	"scripts": {
-		"build": "rimraf dist/package.json",
-		"prepack": "npm run build"
+		"build": "rimraf dist/package.json"
 	},
 	"devDependencies": {
 		"@public-ui/components": "workspace:*",

diff --git a/packages/adapters/preact/package.json b/packages/adapters/preact/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/preact",
-	"version": "3.0.0-rc.2",
+	"version": "3.0.0-rc.3",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
@@ -45,8 +45,7 @@
 		"preact"
 	],
 	"scripts": {
-		"build": "unbuild",
-		"prepack": "unbuild"
+		"build": "unbuild"
 	},
 	"dependencies": {
 		"@public-ui/react": "workspace:*"

diff --git a/packages/adapters/react-standalone/package.json b/packages/adapters/react-standalone/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/react-standalone",
-	"version": "3.0.0-rc.2",
+	"version": "3.0.0-rc.3",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
@@ -45,8 +45,7 @@
 		"react"
 	],
 	"scripts": {
-		"build": "webpack",
-		"prepack": "pnpm build"
+		"build": "webpack"
 	},
 	"devDependencies": {
 		"@public-ui/react": "workspace:*",

diff --git a/packages/adapters/react/package.json b/packages/adapters/react/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/react",
-	"version": "3.0.0-rc.2",
+	"version": "3.0.0-rc.3",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
@@ -45,8 +45,7 @@
 		"react"
 	],
 	"scripts": {
-		"build": "unbuild",
-		"prepack": "unbuild"
+		"build": "unbuild"
 	},
 	"devDependencies": {
 		"@public-ui/components": "workspace:*",

diff --git a/packages/adapters/solid/package.json b/packages/adapters/solid/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/solid",
-	"version": "3.0.0-rc.2",
+	"version": "3.0.0-rc.3",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
@@ -45,8 +45,7 @@
 		"solidjs"
 	],
 	"scripts": {
-		"build": "unbuild",
-		"prepack": "unbuild"
+		"build": "unbuild"
 	},
 	"devDependencies": {
 		"@public-ui/components": "workspace:*",

diff --git a/packages/adapters/vue/package.json b/packages/adapters/vue/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/vue",
-	"version": "3.0.0-rc.2",
+	"version": "3.0.0-rc.3",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {
@@ -45,8 +45,7 @@
 		"vue"
 	],
 	"scripts": {
-		"build": "unbuild",
-		"prepack": "unbuild"
+		"build": "unbuild"
 	},
 	"devDependencies": {
 		"@babel/types": "7.26.7",

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/components",
-	"version": "3.0.0-rc.2",
+	"version": "3.0.0-rc.3",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": {

diff --git a/packages/components/src/components/form/shadow.tsx b/packages/components/src/components/form/shadow.tsx
@@ -1,12 +1,12 @@
 import type { JSX } from '@stencil/core';
+import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { validateErrorList, watchBoolean, watchString } from '../../schema';
-import { Component, Element, h, Host, Prop, State, Watch, Method } from '@stencil/core';
 
 import { translate } from '../../i18n';
 
-import type { ErrorListPropType, FormAPI, FormStates, KoliBriFormCallbacks, Stringified } from '../../schema';
 import { KolLinkWcTag } from '../../core/component-names';
 import KolAlertFc from '../../functional-components/Alert';
+import type { ErrorListPropType, FormAPI, FormStates, KoliBriFormCallbacks, Stringified } from '../../schema';
 import { dispatchDomEvent, KolEvent } from '../../utils/events';
 
 /**
@@ -21,7 +21,8 @@ import { dispatchDomEvent, KolEvent } from '../../utils/events';
 })
 export class KolForm implements FormAPI {
 	@Element() private readonly host?: HTMLKolTextareaElement;
-	errorListElement?: HTMLElement;
+	errorListBlock?: HTMLElement;
+	errorListFirstLink?: HTMLElement;
 
 	/* Hint: This method may not be used at all while events are handled in form/controller#propagateSubmitEventToForm */
 	private readonly onSubmit = (event: Event) => {
@@ -45,33 +46,39 @@ export class KolForm implements FormAPI {
 		}
 	};
 
-	private readonly handleLinkClick = (event: Event) => {
-		const href = (event.target as HTMLAnchorElement | undefined)?.href;
-		if (href) {
-			const hrefUrl = new URL(href);
-
-			const targetElement = document.querySelector<HTMLElement>(hrefUrl.hash);
-			if (targetElement && typeof targetElement.focus === 'function') {
-				targetElement.scrollIntoView({ behavior: 'smooth' });
-				targetElement.focus();
-			}
+	private readonly handleLinkClick = (selector: string) => {
+		const targetElement = document.querySelector<HTMLElement>(selector);
+		if (targetElement && typeof targetElement.focus === 'function') {
+			targetElement.scrollIntoView({ behavior: 'smooth' });
+			targetElement.focus();
 		}
 	};
 
 	private renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {
 		return (
-			<KolAlertFc class="kol-form__alert" type="error" variant="card" label={translate('kol-error-list-message')}>
+			<KolAlertFc
+				class="kol-form__alert"
+				ref={(el) => {
+					this.errorListBlock = el;
+				}}
+				type="error"
+				variant="card"
+				label={translate('kol-error-list-message')}
+			>
 				<nav aria-label={translate('kol-error-list')}>
 					<ul>
 						{errorList?.map((error, index) => (
 							<li key={index}>
 								<KolLinkWcTag
 									class="kol-form__link"
-									_href={error.selector}
+									_href=""
 									_label={error.message}
-									_on={{ onClick: this.handleLinkClick }}
+									_on={{ onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }}
 									ref={(el) => {
-										if (index === 0) this.errorListElement = el;
+										if (index === 0) {
+											this.errorListFirstLink = el;
+											this.scrollToErrorList();
+										}
 									}}
 								/>
 							</li>
@@ -110,11 +117,19 @@ export class KolForm implements FormAPI {
 		);
 	}
 
+	private scrollToErrorList(): void {
+		this.errorListBlock?.scrollIntoView({
+			behavior: 'smooth',
+			block: 'start',
+		});
+		setTimeout(() => {
+			this.errorListFirstLink?.querySelector('a')?.focus();
+		}, 250);
+	}
+
 	@Method()
 	async focusErrorList(): Promise<void> {
-		if (this._errorList && this._errorList.length > 0) {
-			this.errorListElement?.focus();
-		}
+		this.scrollToErrorList();
 		return Promise.resolve();
 	}