@dsn-starter-kit/components-react 3.4.0 → 4.0.0

package/dist/utils/focusTrap.mjs

@@ -0,0 +1,99 @@
+import React from "react";
+//#region src/utils/focusTrap.ts
+/**
+* Focus-trap hulpfuncties voor dialoogachtige componenten.
+*
+* Gebaseerd op de techniek van Hidde de Vries:
+* https://hidde.blog/using-javascript-to-trap-focus-in-an-element/
+*
+* Het native `<dialog>` element trapt de focus zelf zodra het via `.showModal()`
+* geopend wordt. Die native trap is echter niet overal betrouwbaar: zodra het
+* dialoogvenster in een `<iframe>` staat (Storybook, embeds, previews) laat
+* Safari de focus alsnog over de iframe-grens ontsnappen naar de pagina
+* eromheen. Deze expliciete trap staat daarbovenop en maakt het gedrag
+* browseronafhankelijk.
+*/
+/**
+* Selector voor elementen die standaard in de tabvolgorde staan.
+* Uitgeschakelde controls en `tabindex="-1"` vallen er bewust buiten.
+*/
+const FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"area[href]",
+	"button:not(:disabled)",
+	"input:not(:disabled):not([type=\"hidden\"])",
+	"select:not(:disabled)",
+	"textarea:not(:disabled)",
+	"details > summary:first-of-type",
+	"iframe",
+	"audio[controls]",
+	"video[controls]",
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"[tabindex]:not([tabindex^=\"-\"])"
+].join(", ");
+/**
+* Elementen die de focus niet kunnen krijgen omdat ze (of een voorouder)
+* verborgen of inert zijn. `[hidden]` en `[inert]` halen een element uit de
+* tabvolgorde, `[aria-hidden="true"]` hoort geen focusbare inhoud te bevatten.
+*/
+function isReachable(element) {
+	return !element.closest("[hidden], [inert], [aria-hidden=\"true\"]");
+}
+/**
+* Alle bereikbare focusbare elementen binnen een container, in DOM-volgorde.
+*
+* De trap staat of valt met die volgorde: het eerste en het laatste element
+* bepalen waar Tab en Shift+Tab omslaan. Daarom lopen we alle elementen langs
+* en toetsen we ze met `matches`, in plaats van `querySelectorAll` met de hele
+* selectorlijst. Browsers geven daar documentvolgorde bij terug, maar jsdom
+* groepeert het resultaat per losse selector, en dan zou de trap in tests
+* ander gedrag vertonen dan in het echt.
+*/
+function getFocusableElements(container) {
+	return Array.from(container.querySelectorAll("*")).filter((element) => element.matches(FOCUSABLE_SELECTOR) && isReachable(element));
+}
+/**
+* Houdt de toetsenbordfocus binnen `containerRef` zolang `active` waar is.
+*
+* De listener hangt aan de container zelf, niet aan het document: hij grijpt
+* alleen in wanneer de focus al binnen de container zit, en laat de rest van de
+* pagina met rust.
+*
+* Elementen met `tabindex="-1"` (zoals de heading die bij openen focus krijgt)
+* staan niet in de tabvolgorde. Vanaf zo'n element wrapt Shift+Tab naar het
+* laatste focusbare element, zodat de focus ook daar niet naar buiten valt.
+*/
+function useFocusTrap(containerRef, active) {
+	React.useEffect(() => {
+		if (!active) return;
+		const container = containerRef.current;
+		if (!container) return;
+		const handleKeyDown = (event) => {
+			if (event.key !== "Tab") return;
+			const focusable = getFocusableElements(container);
+			if (focusable.length === 0) {
+				event.preventDefault();
+				return;
+			}
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			const current = document.activeElement;
+			const isInTabOrder = current ? focusable.includes(current) : false;
+			if (event.shiftKey) {
+				if (current === first || !isInTabOrder) {
+					event.preventDefault();
+					last.focus();
+				}
+			} else if (current === last) {
+				event.preventDefault();
+				first.focus();
+			}
+		};
+		container.addEventListener("keydown", handleKeyDown);
+		return () => container.removeEventListener("keydown", handleKeyDown);
+	}, [active, containerRef]);
+}
+//#endregion
+export { FOCUSABLE_SELECTOR, getFocusableElements, useFocusTrap };
+
+//# sourceMappingURL=focusTrap.mjs.map

package/dist/utils/focusTrap.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusTrap.mjs","names":[],"sources":["../../src/utils/focusTrap.ts"],"sourcesContent":["import React from 'react';\n\n/**\n * Focus-trap hulpfuncties voor dialoogachtige componenten.\n *\n * Gebaseerd op de techniek van Hidde de Vries:\n * https://hidde.blog/using-javascript-to-trap-focus-in-an-element/\n *\n * Het native `<dialog>` element trapt de focus zelf zodra het via `.showModal()`\n * geopend wordt. Die native trap is echter niet overal betrouwbaar: zodra het\n * dialoogvenster in een `<iframe>` staat (Storybook, embeds, previews) laat\n * Safari de focus alsnog over de iframe-grens ontsnappen naar de pagina\n * eromheen. Deze expliciete trap staat daarbovenop en maakt het gedrag\n * browseronafhankelijk.\n */\n\n/**\n * Selector voor elementen die standaard in de tabvolgorde staan.\n * Uitgeschakelde controls en `tabindex=\"-1\"` vallen er bewust buiten.\n */\nexport const FOCUSABLE_SELECTOR = [\n  'a[href]',\n  'area[href]',\n  'button:not(:disabled)',\n  'input:not(:disabled):not([type=\"hidden\"])',\n  'select:not(:disabled)',\n  'textarea:not(:disabled)',\n  'details > summary:first-of-type',\n  'iframe',\n  'audio[controls]',\n  'video[controls]',\n  '[contenteditable]:not([contenteditable=\"false\"])',\n  '[tabindex]:not([tabindex^=\"-\"])',\n].join(', ');\n\n/**\n * Elementen die de focus niet kunnen krijgen omdat ze (of een voorouder)\n * verborgen of inert zijn. `[hidden]` en `[inert]` halen een element uit de\n * tabvolgorde, `[aria-hidden=\"true\"]` hoort geen focusbare inhoud te bevatten.\n */\nfunction isReachable(element: HTMLElement): boolean {\n  return !element.closest('[hidden], [inert], [aria-hidden=\"true\"]');\n}\n\n/**\n * Alle bereikbare focusbare elementen binnen een container, in DOM-volgorde.\n *\n * De trap staat of valt met die volgorde: het eerste en het laatste element\n * bepalen waar Tab en Shift+Tab omslaan. Daarom lopen we alle elementen langs\n * en toetsen we ze met `matches`, in plaats van `querySelectorAll` met de hele\n * selectorlijst. Browsers geven daar documentvolgorde bij terug, maar jsdom\n * groepeert het resultaat per losse selector, en dan zou de trap in tests\n * ander gedrag vertonen dan in het echt.\n */\nexport function getFocusableElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(container.querySelectorAll<HTMLElement>('*')).filter(\n    (element) => element.matches(FOCUSABLE_SELECTOR) && isReachable(element)\n  );\n}\n\n/**\n * Houdt de toetsenbordfocus binnen `containerRef` zolang `active` waar is.\n *\n * De listener hangt aan de container zelf, niet aan het document: hij grijpt\n * alleen in wanneer de focus al binnen de container zit, en laat de rest van de\n * pagina met rust.\n *\n * Elementen met `tabindex=\"-1\"` (zoals de heading die bij openen focus krijgt)\n * staan niet in de tabvolgorde. Vanaf zo'n element wrapt Shift+Tab naar het\n * laatste focusbare element, zodat de focus ook daar niet naar buiten valt.\n */\nexport function useFocusTrap(\n  containerRef: React.RefObject<HTMLElement | null>,\n  active: boolean\n): void {\n  React.useEffect(() => {\n    if (!active) return;\n    const container = containerRef.current;\n    if (!container) return;\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Tab') return;\n\n      const focusable = getFocusableElements(container);\n\n      // Geen focusbare inhoud: houd de focus waar hij is\n      if (focusable.length === 0) {\n        event.preventDefault();\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const current = document.activeElement as HTMLElement | null;\n      const isInTabOrder = current ? focusable.includes(current) : false;\n\n      if (event.shiftKey) {\n        // Terug vanaf het eerste element, of vanaf een element buiten de\n        // tabvolgorde zoals de heading, wrapt naar het laatste element\n        if (current === first || !isInTabOrder) {\n          event.preventDefault();\n          last.focus();\n        }\n      } else if (current === last) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n\n    container.addEventListener('keydown', handleKeyDown);\n    return () => container.removeEventListener('keydown', handleKeyDown);\n  }, [active, containerRef]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,MAAa,qBAAqB;CAChC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,IAAI;;;;;;AAOX,SAAS,YAAY,SAA+B;CAClD,OAAO,CAAC,QAAQ,QAAQ,2CAAyC;AACnE;;;;;;;;;;;AAYA,SAAgB,qBAAqB,WAAuC;CAC1E,OAAO,MAAM,KAAK,UAAU,iBAA8B,GAAG,CAAC,CAAC,CAAC,QAC7D,YAAY,QAAQ,QAAQ,kBAAkB,KAAK,YAAY,OAAO,CACzE;AACF;;;;;;;;;;;;AAaA,SAAgB,aACd,cACA,QACM;CACN,MAAM,gBAAgB;EACpB,IAAI,CAAC,QAAQ;EACb,MAAM,YAAY,aAAa;EAC/B,IAAI,CAAC,WAAW;EAEhB,MAAM,iBAAiB,UAAyB;GAC9C,IAAI,MAAM,QAAQ,OAAO;GAEzB,MAAM,YAAY,qBAAqB,SAAS;GAGhD,IAAI,UAAU,WAAW,GAAG;IAC1B,MAAM,eAAe;IACrB;GACF;GAEA,MAAM,QAAQ,UAAU;GACxB,MAAM,OAAO,UAAU,UAAU,SAAS;GAC1C,MAAM,UAAU,SAAS;GACzB,MAAM,eAAe,UAAU,UAAU,SAAS,OAAO,IAAI;GAE7D,IAAI,MAAM,UAGJ;QAAA,YAAY,SAAS,CAAC,cAAc;KACtC,MAAM,eAAe;KACrB,KAAK,MAAM;IACb;UACK,IAAI,YAAY,MAAM;IAC3B,MAAM,eAAe;IACrB,MAAM,MAAM;GACd;EACF;EAEA,UAAU,iBAAiB,WAAW,aAAa;EACnD,aAAa,UAAU,oBAAoB,WAAW,aAAa;CACrE,GAAG,CAAC,QAAQ,YAAY,CAAC;AAC3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsn-starter-kit/components-react",
-  "version": "3.4.0",
+  "version": "4.0.0",
   "description": "React components for the design system",
   "type": "module",
   "main": "dist/index.cjs",
@@ -41,8 +41,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@dsn-starter-kit/core": "3.4.0",
-    "@dsn-starter-kit/design-tokens": "3.4.0"
+    "@dsn-starter-kit/design-tokens": "4.0.0",
+    "@dsn-starter-kit/core": "4.0.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",