@public-ui/sample-react 2.1.4-alpha.1 → 2.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.1.4-alpha.1",
+  "version": "2.1.4",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
@@ -29,9 +29,9 @@
     "typescript": "5.5.2",
     "world_countries_lists": "2.9.0",
     "yup": "1.4.0",
-    "@public-ui/react": "2.1.4-alpha.1",
-    "@public-ui/components": "2.1.4-alpha.1",
-    "@public-ui/themes": "2.1.4-alpha.1"
+    "@public-ui/components": "2.1.4",
+    "@public-ui/react": "2.1.4",
+    "@public-ui/themes": "2.1.4"
   },
   "files": [
     ".eslintignore",

package/src/scenarios/focus-elements.tsx

@@ -23,6 +23,7 @@ import type { FC, ForwardRefRenderFunction } from 'react';
 import { useMemo } from 'react';
 import React, { forwardRef, useLayoutEffect, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import type { FocusableElement } from '@public-ui/components';
 
 const getFocusElements = () => {
 	const focusElements = new Map<string, ForwardRefRenderFunction<any, any>>();
@@ -115,14 +116,15 @@ const Fallback = (props: FallbackProps) => {
 };
 
 export const FocusElements: FC = () => {
-	const ref = useRef(null);
+	const ref = useRef<FocusableElement>(null);
 	const focusElements = useMemo(() => getFocusElements(), []);
 	const [searchParams] = useSearchParams();
 	const componentName = searchParams.get('component');
 
 	useLayoutEffect(() => {
 		setTimeout(() => {
-			(ref.current as unknown as HTMLElement)?.focus();
+			// Timeout not strictly necessary but prevents a layout glitch in snapshots with Playwright.
+			void ref.current?.kolFocus();
 		}, 500);
 	}, [ref]);
 

package/dist/1771.js

@@ -1,2 +0,0 @@
-/*! For license information please see 1771.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[1771],{9543:(e,t,n)=>{n.d(t,{i:()=>s,n:()=>c,r:()=>a});var i=n(404),o=n(1330),r=n(3713);const l=()=>{let e=(0,r.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,r.d)(),"KoliBri",{value:e,writable:!1})),e},s=()=>{(()=>{const e=(0,r.g)().querySelector('meta[name="kolibri"]');if(e&&e.hasAttribute("content")){const t=e.getAttribute("content");"string"==typeof t&&((0,r.s)(t.includes("dev-mode=true")),(0,r.b)(t.includes("experimental-mode=true")),(0,r.c)(t.includes("color-contrast-analysis=true")))}})(),r.L.debug(`\n,--. ,--.         ,--. ,--. ,-----.           ,--.\n|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'\n|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.\n|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |\n\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'\n🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${i.E.kolibriVersion}\n\t`,{forceLog:!0})},a=()=>{!0!==l().adviceShown&&(Object.defineProperty(l(),"adviceShown",{get:function(){return!0}}),r.L.debug("\nYou are using the KoliBri component library. If you have any suggestions for improvement or find a problem, please contact us:\n\nTicket: https://github.com/public-ui/kolibri/issues/new/choose (for privacy reasons, please use email)\nEmail: kolibri@itzbund.de\n"))};let c=()=>Math.floor(16777215*Math.random()).toString(16);"test"===o.p&&(c=()=>"nonce")},1771:(e,t,n)=>{n.r(t),n.d(t,{initialize:()=>a});var i=n(9543),o=n(3713),r=n(7238);function l(e,t){try{Object.defineProperty((()=>{let e=(0,o.d)().KoliBri;return void 0===e&&(e={},Object.defineProperty((0,o.d)(),"KoliBri",{value:e,writable:!1})),e})(),e,{get:function(){return t}})}catch(t){o.L.debug(`KoliBri property ${e} is already bind.`)}}const s=(e,t)=>o.L.debug(`${e} ${t?"":"not "}activated`),a=()=>{if((0,i.i)(),(0,o.e)()){(0,i.r)(),l("a11yColorContrast",r.A),l("querySelector",r.v),l("querySelectorAll",r.B),l("querySelectorColors",r.C),l("utils",(function(){return r.z})),l("parseJson",r.p),l("stringifyJson",r.D);const e=(0,o.g)().body,t=(0,o.g)().createElement("svg");if(t.setAttribute("aria-label","KoliBri-DevTools"),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t.setAttribute("role","toolbar"),t.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),t.innerHTML='<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="50"\n  height="50"\n  viewBox="0 0 600 600"\n>\n  <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n  <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',(0,o.g)().body.appendChild(t),s("Development mode",(0,o.e)()),s("Experimental mode",(0,o.a)()),s("Color contrast analysis",(0,o.f)()),(0,o.f)()){const t=setTimeout((()=>{clearTimeout(t),setInterval((()=>{r.z.queryHtmlElementColors((0,o.g)().createElement("div"),(0,r.A)(e),!1,!1)}),1e4)}),2500)}}}},1330:(e,t,n)=>{n.d(t,{S:()=>l,a:()=>s,b:()=>r,c:()=>i,h:()=>c,i:()=>o,p:()=>a,s:()=>u});const i=e=>"object"==typeof e&&null!==e,o=(e,t=0)=>"string"==typeof e&&e.length>=t,r=e=>{if("object"!=typeof e||null===e)return o(e,1);for(const t in e)if(!1===o(t,1))return!1;return!0},l=new Event("StateChange"),s=(e,t)=>{i(e)&&e&&(e.focus=e=>null==t?void 0:t.focus(e))};let a="development";try{a="production"}catch(e){a="production"}const c=(e,t,n)=>{if(e&&t&&"string"==typeof n){const i=e.querySelector(`[slot="${n}"]`);i&&t.appendChild(i)}},u=e=>""===e}}]);