{
+ const {
+ button = 0,
+ isTrusted = true,
+ metaKey = false,
+ ctrlKey = false,
+ } = options;
+ return {
+ target,
+ button,
+ isTrusted,
+ metaKey,
+ ctrlKey,
+ stopImmediatePropagation: vi.fn(),
+ } as unknown as MouseEvent;
+};
+
+describe('handleClickDelegate', () => {
+ let container: HTMLDivElement;
+
+ beforeEach(() => {
+ container = document.createElement('div');
+ document.body.appendChild(container);
+ });
+
+ afterEach(() => {
+ container.remove();
+ });
+
+ it('should delegate click to target element', () => {
+ container.innerHTML = `
+
+ `;
+
+ const link = container.querySelector('a')!;
+ const content = container.querySelector('.content')!;
+ const clickSpy = vi.fn();
+ link.addEventListener('click', clickSpy);
+
+ handleClickDelegate(createMockEvent(content, { button: 0 }));
+
+ expect(clickSpy).toHaveBeenCalled();
+ });
+
+ it('should not delegate click when clicking on interactive elements', () => {
+ container.innerHTML = `
+
+ `;
+
+ const link = container.querySelector('a')!;
+ const button = container.querySelector('button')!;
+ const linkClickSpy = vi.fn();
+ link.addEventListener('click', linkClickSpy);
+
+ handleClickDelegate(createMockEvent(button, { button: 0 }));
+
+ expect(linkClickSpy).not.toHaveBeenCalled();
+ });
+
+ it('should not delegate click when clicking directly on the target', () => {
+ container.innerHTML = `
+
+ `;
+
+ const link = container.querySelector('a')!;
+ const clickSpy = vi.fn();
+ link.addEventListener('click', clickSpy);
+
+ handleClickDelegate(createMockEvent(link, { button: 0 }));
+
+ // Should not trigger an extra click since target contains event.target
+ expect(clickSpy).not.toHaveBeenCalled();
+ });
+
+ it('should not delegate right clicks (button: 2)', () => {
+ container.innerHTML = `
+
+ `;
+
+ const link = container.querySelector('a')!;
+ const content = container.querySelector('.content')!;
+ const clickSpy = vi.fn();
+ link.addEventListener('click', clickSpy);
+
+ handleClickDelegate(createMockEvent(content, { button: 2 }));
+
+ expect(clickSpy).not.toHaveBeenCalled();
+ });
+
+ it('should not delegate click to nested interactive elements', () => {
+ container.innerHTML = `
+
+ `;
+
+ const link = container.querySelector('a')!;
+ const input = container.querySelector('input')!;
+ const clickSpy = vi.fn();
+ link.addEventListener('click', clickSpy);
+
+ handleClickDelegate(createMockEvent(input, { button: 0 }));
+
+ expect(clickSpy).not.toHaveBeenCalled();
+ });
+
+ it('should work with button as target', () => {
+ container.innerHTML = `
+
+ Click Target
+ Click me
+
+ `;
+
+ const button = container.querySelector('button')!;
+ const content = container.querySelector('.content')!;
+ const clickSpy = vi.fn();
+ button.addEventListener('click', clickSpy);
+
+ handleClickDelegate(createMockEvent(content, { button: 0 }));
+
+ expect(clickSpy).toHaveBeenCalled();
+ });
+
+ it('should not delegate when no clicktarget is present', () => {
+ container.innerHTML = `
+
+ `;
+
+ const link = container.querySelector('a')!;
+ const content = container.querySelector('.content')!;
+ const clickSpy = vi.fn();
+ link.addEventListener('click', clickSpy);
+
+ handleClickDelegate(createMockEvent(content, { button: 0 }));
+
+ expect(clickSpy).not.toHaveBeenCalled();
+ });
+
+ it('should call stopImmediatePropagation when delegating', () => {
+ container.innerHTML = `
+
+ `;
+
+ const content = container.querySelector('.content')!;
+ const event = createMockEvent(content, { button: 0 });
+
+ handleClickDelegate(event);
+
+ expect(event.stopImmediatePropagation).toHaveBeenCalled();
+ });
+
+ describe('middle click / new tab behavior', () => {
+ it('should open link in new tab on middle click', () => {
+ const windowOpenSpy = vi
+ .spyOn(window, 'open')
+ .mockImplementation(() => null);
+
+ container.innerHTML = `
+
+ `;
+
+ const content = container.querySelector('.content')!;
+
+ handleClickDelegate(createMockEvent(content, { button: 1 }));
+
+ expect(windowOpenSpy).toHaveBeenCalledWith(
+ 'https://example.com/page',
+ undefined,
+ 'noopener',
+ );
+
+ windowOpenSpy.mockRestore();
+ });
+
+ it('should open link in new tab on ctrl+click', () => {
+ const windowOpenSpy = vi
+ .spyOn(window, 'open')
+ .mockImplementation(() => null);
+
+ container.innerHTML = `
+
+ `;
+
+ const content = container.querySelector('.content')!;
+
+ handleClickDelegate(
+ createMockEvent(content, { button: 0, ctrlKey: true }),
+ );
+
+ expect(windowOpenSpy).toHaveBeenCalledWith(
+ 'https://example.com/page',
+ undefined,
+ 'noopener',
+ );
+
+ windowOpenSpy.mockRestore();
+ });
+
+ it('should open link in new tab on meta+click', () => {
+ const windowOpenSpy = vi
+ .spyOn(window, 'open')
+ .mockImplementation(() => null);
+
+ container.innerHTML = `
+
+ `;
+
+ const content = container.querySelector('.content')!;
+
+ handleClickDelegate(
+ createMockEvent(content, { button: 0, metaKey: true }),
+ );
+
+ expect(windowOpenSpy).toHaveBeenCalledWith(
+ 'https://example.com/page',
+ undefined,
+ 'noopener',
+ );
+
+ windowOpenSpy.mockRestore();
+ });
+ });
+
+ describe('skipped interactive elements', () => {
+ const interactiveElements = [
+ { tag: 'a', attrs: 'href="#"', name: 'anchor' },
+ { tag: 'button', attrs: '', name: 'button' },
+ { tag: 'label', attrs: '', name: 'label' },
+ { tag: 'input', attrs: '', name: 'input' },
+ { tag: 'select', attrs: '', name: 'select' },
+ { tag: 'textarea', attrs: '', name: 'textarea' },
+ { tag: 'dialog', attrs: '', name: 'dialog' },
+ { tag: 'div', attrs: 'role="button"', name: 'role=button' },
+ { tag: 'div', attrs: 'popover', name: 'popover' },
+ { tag: 'div', attrs: 'contenteditable', name: 'contenteditable' },
+ ];
+
+ interactiveElements.forEach(({ tag, attrs, name }) => {
+ it(`should not delegate click from ${name} element`, () => {
+ container.innerHTML = `
+
+ Target
+ <${tag} ${attrs} class="interactive">Interactive
+
+ `;
+
+ const target = container.querySelector('[data-clicktarget]')!;
+ const interactive = container.querySelector('.interactive')!;
+ const clickSpy = vi.fn();
+ target.addEventListener('click', clickSpy);
+
+ handleClickDelegate(createMockEvent(interactive, { button: 0 }));
+
+ expect(clickSpy).not.toHaveBeenCalled();
+ });
+ });
+ });
+});
diff --git a/packages/react/src/utilities/click-delegate.ts b/packages/react/src/utilities/click-delegate.ts
new file mode 100644
index 0000000000..743b40af6f
--- /dev/null
+++ b/packages/react/src/utilities/click-delegate.ts
@@ -0,0 +1,62 @@
+// Adding support for click deletagtion, following
+// https://open-ui.org/components/link-area-delegation-explainer/
+// and https://github.com/openui/open-ui/issues/1104#issuecomment-3151387080
+
+import { useEffect } from 'react';
+import { on, onHotReload } from './dom';
+
+const CLICKDELEGATE = '[data-clickdelegate]';
+const CLICKTARGET = '[data-clicktarget]';
+const SKIP =
+ 'a,button,label,input,select,textarea,dialog,[role="button"],[popover],[contenteditable]';
+
+export const handleClickDelegate = (event: MouseEvent) => {
+ const isNewTab = event.button === 1 || event.metaKey || event.ctrlKey;
+ const isUserLeftOrMiddleClick = event.isTrusted && event.button < 2;
+ const delegateTarget = isUserLeftOrMiddleClick && getDelegateTarget(event);
+
+ if (delegateTarget instanceof HTMLAnchorElement && isNewTab)
+ window.open(delegateTarget.href, undefined, delegateTarget.rel); // If middle click or cmd/ctrl click on link, open in new tab
+ else if (
+ delegateTarget instanceof HTMLElement &&
+ !delegateTarget.contains(event.target as Node) // Only proxy event if delegated target isn't the original target
+ ) {
+ event.stopImmediatePropagation(); // We'll trigger a new click event anyway, so prevent actions on this one
+ delegateTarget.click(); // Forward click to the clickable element
+ }
+};
+
+let HOVER: Element | undefined;
+const handleMouseOver = (event: Event) => {
+ const delegateTarget = getDelegateTarget(event);
+ if (HOVER === delegateTarget) return; // No change
+ if (HOVER) HOVER.classList.remove(':click-delegate-hover');
+ if (delegateTarget) delegateTarget.classList.add(':click-delegate-hover');
+ HOVER = delegateTarget;
+};
+
+const getDelegateTarget = ({ target: el }: Event) => {
+ const scope = el instanceof Element ? el.closest(CLICKDELEGATE) : null;
+ const target = scope?.querySelector(CLICKTARGET);
+ const skip = target && (el as Element).closest(SKIP); // Ignore if interactive
+
+ return ((!skip || skip === target) && target) || undefined;
+};
+
+// Temporary "useClickDelegate" workaround to avoid tree-shaking of click-delegate utility
+// When https://github.com/digdir/designsystemet/issues/4367 is solved, we can add onHotReload directly in this file without calling useClickDelegate from components
+export function useClickDelegate() {
+ useEffect(
+ () =>
+ onHotReload('click-delegate', () => [
+ on(
+ window,
+ 'click auxclick',
+ handleClickDelegate as EventListener,
+ true,
+ ), // Use capture to ensure we run before other click listeners
+ on(document, 'mouseover', handleMouseOver, { passive: true }), // Use passive for better performance
+ ]),
+ [],
+ );
+}
diff --git a/packages/react/src/utilities/dom.ts b/packages/react/src/utilities/dom.ts
new file mode 100644
index 0000000000..c19bfc5045
--- /dev/null
+++ b/packages/react/src/utilities/dom.ts
@@ -0,0 +1,57 @@
+export const isBrowser = () =>
+ typeof window !== 'undefined' && typeof document !== 'undefined';
+
+/**
+ * on
+ * @param el The Element to use as EventTarget
+ * @param types A space separated string of event types
+ * @param listener An event listener function or listener object
+ */
+export const on = (
+ el: Node | Window | ShadowRoot,
+ ...rest: Parameters
+): (() => void) => {
+ const [types, ...options] = rest;
+ for (const type of types.split(' ')) el.addEventListener(type, ...options);
+ return () => off(el, ...rest);
+};
+
+/**
+ * off
+ * @param el The Element to use as EventTarget
+ * @param types A space separated string of event types
+ * @param listener An event listener function or listener object
+ */
+export const off = (
+ el: Node | Window | ShadowRoot,
+ ...rest: Parameters
+): void => {
+ const [types, ...options] = rest;
+ for (const type of types.split(' ')) el.removeEventListener(type, ...options);
+};
+
+// Used to store cleanup functions for hot-reloading
+declare global {
+ interface Window {
+ _dsHotReloadCleanup?: Map void>>;
+ }
+}
+
+/**
+ * onHotReload
+ * @description Runs a callback when window is loaded in browser, and ensures cleanup when hot-reloading
+ * @param key The key to identify setup and corresponding cleanup
+ * @param callback The callback to run when the page is ready
+ */
+export const onHotReload = (key: string, setup: () => Array<() => void>) => {
+ if (!isBrowser()) return; // Skip if not in modern browser environment, but on each call as Vitest might have unloaded jsdom between tests
+ if (!window._dsHotReloadCleanup) window._dsHotReloadCleanup = new Map(); // Hot reload cleanup support supporting all build tools
+
+ const run = () => {
+ window._dsHotReloadCleanup?.get(key)?.map((cleanup) => cleanup()); // Run previous cleanup
+ window._dsHotReloadCleanup?.set(key, setup()); // Store new cleanup
+ };
+
+ if (document.readyState !== 'complete') on(window, 'load', run);
+ else document.fonts?.ready?.then(run) || setTimeout(run, 0); // Prefer fonts ready promise if available, but fallback to setTimeout
+};
diff --git a/packages/react/src/utilities/index.ts b/packages/react/src/utilities/index.ts
index 1a563c4374..4b593622b7 100644
--- a/packages/react/src/utilities/index.ts
+++ b/packages/react/src/utilities/index.ts
@@ -1,3 +1,4 @@
+export { useClickDelegate } from './click-delegate'; // TMP workaround to avoid tree-shaking
export type {
UseCheckboxGroupProps,
UsePaginationProps,