@dbcdk/react-components 0.0.208 → 0.0.210

package/dist/components/forms/markdown-editor/markdown.utils.js

@@ -0,0 +1,310 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import MarkdownIt from 'markdown-it';
+import React from 'react';
+
+const ESCAPE_PATTERN = /\\[!-/:-@[-`{-~]/;
+const LINK_PATTERN = /\[((?:\\[^\n]|[^\]\\\n])+)\]\(((?:[^()\s]|\([^()\s]*\))+)\)/;
+const escapeRegExp = (text) => text.replace(/[.*+?^$()|[\]\\{}]/g, "\\$&");
+const linkPattern = (urlPlaceholder) => new RegExp(LINK_PATTERN.source.replace(/\)\\\)$/, `|${escapeRegExp(urlPlaceholder)})\\)`));
+const LINK_PLACEHOLDER_TEXT = "linktekst";
+const LINK_PLACEHOLDER_URL = "inds\xE6t url";
+const parser = new MarkdownIt();
+parser.validateLink = (url) => getSafeHref(url) !== void 0;
+function getSafeHref(url) {
+  if ([...url].some((character) => character < " " || character === "\x7F")) return void 0;
+  const hasScheme = /^[a-z][a-z0-9+.-]*:/i.test(url);
+  return !hasScheme || /^(https?|mailto|tel):/i.test(url) ? url : void 0;
+}
+function findLinkAt(value, selectionStart, selectionEnd, urlPlaceholder = LINK_PLACEHOLDER_URL) {
+  const pattern = new RegExp(`${ESCAPE_PATTERN.source}|${linkPattern(urlPlaceholder).source}`, "g");
+  let match;
+  while ((match = pattern.exec(value)) !== null) {
+    if (match.index > selectionStart) return void 0;
+    const end = match.index + match[0].length;
+    if (match[1] !== void 0 && selectionEnd <= end) {
+      return { start: match.index, end, text: match[1] };
+    }
+  }
+  return void 0;
+}
+function escapeMarkdown(value) {
+  return value.replace(/[!-/:-@[-`{-~]/g, "\\$&");
+}
+function unescapeMarkdown(value) {
+  return value.replace(/\\([!-/:-@[-`{-~])/g, "$1");
+}
+const INLINE_SYNTAX = /\\(?=[!-/:-@[-`{-~]|$)|[`*_[<~|]|&(?=#?[a-z0-9]+;)/gi;
+const BLOCK_SYNTAX = /^(\s*)(#{1,6}(?=\s|$)|>|[-+=](?=\s|$)|[-=]+\s*$)|^(\s*\d+)([.)])(?=\s|$)/;
+const INDENT_ENTITIES = { " ": "&nbsp;", "	": "&#9;" };
+const ENCODED_INDENT = /^(?:&nbsp;|&#9;)+/gm;
+function escapePlainLine(line) {
+  if (!line.trim()) return line;
+  const indent = /^[ \t]*/.exec(line)[0];
+  const escaped = line.slice(indent.length).replace(INLINE_SYNTAX, "\\$&");
+  if (indent) return `${indent.replace(/[ \t]/g, (space) => INDENT_ENTITIES[space])}${escaped}`;
+  return escaped.replace(
+    BLOCK_SYNTAX,
+    (_, indent2, marker, number, delimiter) => marker === void 0 ? `${number}\\${delimiter}` : `${indent2}\\${marker}`
+  );
+}
+function plainTextToMarkdown(text) {
+  const lines = text.split("\n");
+  return lines.map((line, index) => {
+    const escaped = escapePlainLine(line);
+    return index < lines.length - 1 && line.trim() && lines[index + 1].trim() ? `${escaped}\\` : escaped;
+  }).join("\n");
+}
+function limitPlainText(previous, next, maxLength) {
+  if (maxLength === void 0 || next.length < previous.length || plainTextToMarkdown(next).length <= maxLength) {
+    return { text: next, caret: -1 };
+  }
+  let start = 0;
+  while (start < previous.length && start < next.length && previous[start] === next[start]) start++;
+  let end = 0;
+  while (end < previous.length - start && end < next.length - start && previous[previous.length - 1 - end] === next[next.length - 1 - end]) {
+    end++;
+  }
+  const inserted = next.slice(start, next.length - end);
+  const withInserted = (length) => `${next.slice(0, start)}${inserted.slice(0, length)}${next.slice(next.length - end)}`;
+  let low = 0;
+  let high = inserted.length;
+  while (low < high) {
+    const middle = Math.ceil((low + high) / 2);
+    if (plainTextToMarkdown(withInserted(middle)).length <= maxLength) low = middle;
+    else high = middle - 1;
+  }
+  const text = withInserted(low);
+  return text === previous ? void 0 : { text, caret: start + low };
+}
+function markdownToPlainText(markdown) {
+  return markdown.replace(ENCODED_INDENT, (indent) => indent.replace(/&nbsp;/g, " ").replace(/&#9;/g, "	")).replace(/\\([!-/:-@[-`{-~\n])/g, "$1");
+}
+function isPlainMarkdown(markdown) {
+  const normalize = (html) => html.replace(/<br>\n/g, "\n").replace(/(^|>|\n)[\u00a0\t]+/g, "$1");
+  return normalize(parser.render(markdown)) === normalize(parser.render(plainTextToMarkdown(markdownToPlainText(markdown))));
+}
+const SELECTION_SYNTAX = /\\[!-/:-@[-`{-~]|[`*_[<~|]|&(?=#?[a-z0-9]+;)/gi;
+function escapeSyntax(text, startsLine) {
+  return text.split("\n").map((line, index) => {
+    const escaped = line.replace(
+      SELECTION_SYNTAX,
+      (part) => part.length === 2 ? part : `\\${part}`
+    );
+    if (index === 0 && !startsLine) return escaped;
+    return escaped.replace(
+      BLOCK_SYNTAX,
+      (_, indent, marker, number, delimiter) => marker === void 0 ? `${number}\\${delimiter}` : `${indent}\\${marker}`
+    );
+  }).join("\n");
+}
+function isSelectionEscaped(value, selectionStart, selectionEnd) {
+  const selectedText = value.slice(selectionStart, selectionEnd);
+  const startsLine = selectionStart === 0 || value[selectionStart - 1] === "\n";
+  return ESCAPE_PATTERN.test(selectedText) && escapeSyntax(selectedText, startsLine) === selectedText;
+}
+function isEscaped(value, index) {
+  let backslashes = 0;
+  while (index > 0 && value[--index] === "\\") backslashes++;
+  return backslashes % 2 === 1;
+}
+function formatMarkdownSelection(value, selectionStart, selectionEnd, format) {
+  var _a, _b;
+  if (format.type === "link") {
+    const textPlaceholder = (_a = format.textPlaceholder) != null ? _a : LINK_PLACEHOLDER_TEXT;
+    const urlPlaceholder = (_b = format.urlPlaceholder) != null ? _b : LINK_PLACEHOLDER_URL;
+    const link = findLinkAt(value, selectionStart, selectionEnd, urlPlaceholder);
+    if (link) {
+      return {
+        value: `${value.slice(0, link.start)}${link.text}${value.slice(link.end)}`,
+        selectionStart: link.start,
+        selectionEnd: link.start + link.text.length
+      };
+    }
+    const selectedText = value.slice(selectionStart, selectionEnd);
+    const textStart = selectionStart + 1;
+    if (/^(https?:\/\/|mailto:)\S+$/i.test(selectedText)) {
+      return {
+        value: `${value.slice(0, selectionStart)}[${textPlaceholder}](${selectedText})${value.slice(selectionEnd)}`,
+        selectionStart: textStart,
+        selectionEnd: textStart + textPlaceholder.length
+      };
+    }
+    const text = selectedText || textPlaceholder;
+    const urlStart = textStart + text.length + 2;
+    return {
+      value: `${value.slice(0, selectionStart)}[${text}](${urlPlaceholder})${value.slice(selectionEnd)}`,
+      selectionStart: selectedText ? urlStart : textStart,
+      selectionEnd: selectedText ? urlStart + urlPlaceholder.length : textStart + text.length
+    };
+  }
+  if (format.type === "escape") {
+    const selectedText = value.slice(selectionStart, selectionEnd);
+    const startsLine = selectionStart === 0 || value[selectionStart - 1] === "\n";
+    const replacement2 = isSelectionEscaped(value, selectionStart, selectionEnd) ? unescapeMarkdown(selectedText) : escapeSyntax(selectedText, startsLine);
+    return {
+      value: `${value.slice(0, selectionStart)}${replacement2}${value.slice(selectionEnd)}`,
+      selectionStart,
+      selectionEnd: selectionStart + replacement2.length
+    };
+  }
+  if (format.type === "wrap") {
+    const selectedText = value.slice(selectionStart, selectionEnd);
+    const markerStart = selectionStart - format.marker.length;
+    const isAlreadyWrapped = isMarkdownFormatActive(value, selectionStart, selectionEnd, format);
+    if (isAlreadyWrapped) {
+      return {
+        value: `${value.slice(0, markerStart)}${selectedText}${value.slice(selectionEnd + format.marker.length)}`,
+        selectionStart: markerStart,
+        selectionEnd: markerStart + selectedText.length
+      };
+    }
+    const replacement2 = `${format.marker}${selectedText}${format.marker}`;
+    const innerStart = selectionStart + format.marker.length;
+    return {
+      value: `${value.slice(0, selectionStart)}${replacement2}${value.slice(selectionEnd)}`,
+      selectionStart: innerStart,
+      selectionEnd: innerStart + selectedText.length
+    };
+  }
+  const previousNewline = selectionStart > 0 ? value.lastIndexOf("\n", selectionStart - 1) : -1;
+  const lineStart = previousNewline + 1;
+  const selectedEnd = selectionEnd > selectionStart && value[selectionEnd - 1] === "\n" ? selectionEnd - 1 : selectionEnd;
+  const lineEndIndex = value.indexOf("\n", selectedEnd);
+  const lineEnd = lineEndIndex === -1 ? value.length : lineEndIndex;
+  const selectedLines = value.slice(lineStart, lineEnd).split("\n");
+  const removePrefix = format.toggle && isMarkdownFormatActive(value, selectionStart, selectionEnd, format);
+  const formattedLines = selectedLines.map((line) => {
+    if (removePrefix) return line.slice(format.prefix.length);
+    if (format.prefix.startsWith("#")) return `${format.prefix}${line.replace(/^#{1,6}\s+/, "")}`;
+    return `${format.prefix}${line}`;
+  });
+  const replacement = formattedLines.join("\n");
+  return {
+    value: `${value.slice(0, lineStart)}${replacement}${value.slice(lineEnd)}`,
+    selectionStart: lineStart,
+    selectionEnd: lineStart + replacement.length
+  };
+}
+function isMarkdownFormatActive(value, selectionStart, selectionEnd, format) {
+  if (format.type === "link") {
+    return findLinkAt(value, selectionStart, selectionEnd, format.urlPlaceholder) !== void 0;
+  }
+  if (format.type === "escape") return isSelectionEscaped(value, selectionStart, selectionEnd);
+  if (format.type === "wrap") {
+    const character = format.marker[0];
+    let start = selectionStart;
+    let end = selectionEnd;
+    while (start > 0 && value[start - 1] === character && !isEscaped(value, start - 1)) start--;
+    while (end < value.length && value[end] === character && !isEscaped(value, end)) end++;
+    const markerCount = Math.min(selectionStart - start, end - selectionEnd);
+    return format.marker.length === 1 ? markerCount % 2 === 1 : markerCount >= 2;
+  }
+  const previousNewline = selectionStart > 0 ? value.lastIndexOf("\n", selectionStart - 1) : -1;
+  const lineStart = previousNewline + 1;
+  const selectedEnd = selectionEnd > selectionStart && value[selectionEnd - 1] === "\n" ? selectionEnd - 1 : selectionEnd;
+  const lineEndIndex = value.indexOf("\n", selectedEnd);
+  const lineEnd = lineEndIndex === -1 ? value.length : lineEndIndex;
+  const lines = value.slice(lineStart, lineEnd).split("\n");
+  if (format.prefix.startsWith("#")) {
+    return lines.every((line) => {
+      var _a;
+      return ((_a = /^(#{1,6}\s+)/.exec(line)) == null ? void 0 : _a[0]) === format.prefix;
+    });
+  }
+  return lines.every((line) => line.startsWith(format.prefix));
+}
+function getAttr(token, name) {
+  const value = token.attrGet(name);
+  return value === null ? void 0 : String(value);
+}
+function toStyle(style) {
+  var _a;
+  const align = style && ((_a = /^text-align:\s*(left|right|center)$/.exec(style)) == null ? void 0 : _a[1]);
+  return align ? { textAlign: align } : void 0;
+}
+function renderLeaf(token, key, options) {
+  var _a, _b;
+  switch (token.type) {
+    case "text":
+      return token.content;
+    case "softbreak":
+      return "\n";
+    case "hardbreak":
+      return /* @__PURE__ */ jsx("br", {}, key);
+    case "code_inline":
+      return /* @__PURE__ */ jsx("code", { children: token.content }, key);
+    case "code_block":
+      return /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: token.content }) }, key);
+    case "fence": {
+      const language = token.info.trim().split(/\s+/)[0];
+      return /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { className: language ? `language-${language}` : void 0, children: token.content }) }, key);
+    }
+    case "hr":
+      return /* @__PURE__ */ jsx("hr", {}, key);
+    case "image":
+      return parser.renderer.renderInlineAsText((_a = token.children) != null ? _a : [], parser.options, {});
+    case "inline":
+      return renderTokens((_b = token.children) != null ? _b : [], options);
+    default:
+      return token.content || null;
+  }
+}
+function renderElement(open, children, key, options) {
+  var _a;
+  if (open.hidden) return /* @__PURE__ */ jsx(React.Fragment, { children }, key);
+  if (/^h[1-6]$/.test(open.tag)) {
+    const level = Math.min(6, Math.max(1, Number(open.tag[1]) + ((_a = options.headingOffset) != null ? _a : 0)));
+    return React.createElement(`h${level}`, { key }, children);
+  }
+  if (open.tag === "a") {
+    const href = getAttr(open, "href");
+    const newTab = options.openLinksInNewTab && !/^(mailto|tel):/i.test(href != null ? href : "");
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href,
+        title: getAttr(open, "title"),
+        target: newTab ? "_blank" : void 0,
+        rel: newTab ? "noopener noreferrer" : void 0,
+        children: [
+          children,
+          newTab && options.newTabHint
+        ]
+      },
+      key
+    );
+  }
+  if (open.tag === "ol") {
+    const start = getAttr(open, "start");
+    return /* @__PURE__ */ jsx("ol", { start: start ? Number(start) : void 0, children }, key);
+  }
+  if (open.tag === "th" || open.tag === "td") {
+    return React.createElement(open.tag, { key, style: toStyle(getAttr(open, "style")) }, children);
+  }
+  return React.createElement(open.tag, { key }, children);
+}
+function renderTokens(tokens, options) {
+  const root = [];
+  const stack = [];
+  tokens.forEach((token, index) => {
+    const siblings = stack.length ? stack[stack.length - 1].children : root;
+    if (token.nesting === 1) {
+      stack.push({ open: token, children: [] });
+    } else if (token.nesting === -1) {
+      const element = stack.pop();
+      if (!element) return;
+      const parent = stack.length ? stack[stack.length - 1].children : root;
+      parent.push(renderElement(element.open, element.children, index, options));
+    } else {
+      const leaf = renderLeaf(token, index, options);
+      if (Array.isArray(leaf)) siblings.push(/* @__PURE__ */ jsx(React.Fragment, { children: leaf }, index));
+      else if (leaf !== null) siblings.push(leaf);
+    }
+  });
+  return root;
+}
+function renderMarkdown(value, options = {}) {
+  return renderTokens(parser.parse(value, {}), options);
+}
+
+export { escapeMarkdown, formatMarkdownSelection, getSafeHref, isMarkdownFormatActive, isPlainMarkdown, limitPlainText, markdownToPlainText, plainTextToMarkdown, renderMarkdown };

package/dist/components/listbox/Listbox.cjs

@@ -111,9 +111,9 @@ function Listbox({
                   ].filter(Boolean).join(" "),
                   disabled: option.disabled,
                   onFocus: () => setActiveValue(option.value),
-                  onClick: () => {
+                  onClick: (event) => {
                     setActiveValue(option.value);
-                    onOptionSelect(option.value);
+                    onOptionSelect(option.value, event);
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.optionContent, children: [
                     option.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, "aria-hidden": "true", children: option.icon }) : null,

package/dist/components/listbox/Listbox.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
+import { type HTMLAttributes, type MouseEvent, type ReactNode } from 'react';
 export type ListboxOption<T extends string | number = string> = {
     value: T;
     label: ReactNode;
@@ -15,7 +15,7 @@ export type ListboxProps<T extends string | number = string> = Omit<HTMLAttribut
     selectedValues: readonly T[];
     selectionMode?: 'single' | 'multiple';
     autoFocusValue?: T;
-    onOptionSelect: (value: T) => void;
+    onOptionSelect: (value: T, event: MouseEvent<HTMLButtonElement>) => void;
     onActiveChange?: (value: T) => void;
     renderAction?: (option: ListboxOption<T>, selected: boolean) => ReactNode;
 };

package/dist/components/listbox/Listbox.js

@@ -104,9 +104,9 @@ function Listbox({
                   ].filter(Boolean).join(" "),
                   disabled: option.disabled,
                   onFocus: () => setActiveValue(option.value),
-                  onClick: () => {
+                  onClick: (event) => {
                     setActiveValue(option.value);
-                    onOptionSelect(option.value);
+                    onOptionSelect(option.value, event);
                   },
                   children: /* @__PURE__ */ jsxs("span", { className: styles.optionContent, children: [
                     option.icon ? /* @__PURE__ */ jsx("span", { className: styles.icon, "aria-hidden": "true", children: option.icon }) : null,

package/dist/components/meta-bar/MetaBar.cjs

@@ -8,12 +8,12 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-function MetaBar({ items, separator = "\u2022" }) {
+function MetaBar({ items, separator = "\u2022", size = "sm" }) {
   const visibleItems = items.filter(
     (item) => item.value !== null && item.value !== void 0 && item.value !== ""
   );
   if (visibleItems.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.meta, children: visibleItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.meta} ${styles__default.default[size]}`, children: visibleItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: item.muted === false ? styles__default.default.itemDefault : styles__default.default.itemMuted, children: [
       item.label && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
         item.label,

package/dist/components/meta-bar/MetaBar.d.ts

@@ -6,7 +6,8 @@ export interface MetaItem {
 }
 interface MetaBarProps {
     items: MetaItem[];
+    size?: 'sm' | 'md';
     separator?: ReactNode;
 }
-export declare function MetaBar({ items, separator }: MetaBarProps): JSX.Element | null;
+export declare function MetaBar({ items, separator, size }: MetaBarProps): JSX.Element | null;
 export {};

package/dist/components/meta-bar/MetaBar.js

@@ -2,12 +2,12 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Fragment } from 'react';
 import styles from './MetaBar.module.css';
 
-function MetaBar({ items, separator = "\u2022" }) {
+function MetaBar({ items, separator = "\u2022", size = "sm" }) {
   const visibleItems = items.filter(
     (item) => item.value !== null && item.value !== void 0 && item.value !== ""
   );
   if (visibleItems.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: styles.meta, children: visibleItems.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx("div", { className: `${styles.meta} ${styles[size]}`, children: visibleItems.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("span", { className: item.muted === false ? styles.itemDefault : styles.itemMuted, children: [
       item.label && /* @__PURE__ */ jsxs("span", { children: [
         item.label,

package/dist/components/meta-bar/MetaBar.module.css

@@ -3,9 +3,16 @@
   flex-wrap: wrap;
   align-items: center;
   gap: var(--spacing-xs);
+}
+
+.sm {
   font-size: var(--font-size-xs);
 }
 
+.md {
+  font-size: var(--font-size-sm);
+}
+
 .itemMuted,
 .itemDefault {
   display: inline-flex;

package/dist/components/overlay/side-panel/SidePanel.cjs

@@ -13,6 +13,36 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+function getFocusable(container) {
+  var _a, _b;
+  const selector = [
+    'a[href]:not([aria-disabled="true"])',
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])'
+  ].join(",");
+  const focusables = [];
+  const addFocusableContent = (root) => {
+    const candidates = root.querySelectorAll(selector);
+    for (const element of candidates) {
+      if (element.hasAttribute("hidden") || element.getAttribute("aria-hidden") === "true" || element.getAttribute("aria-disabled") === "true") {
+        continue;
+      }
+      if (!focusables.includes(element)) focusables.push(element);
+    }
+  };
+  addFocusableContent(container);
+  for (const trigger of container.querySelectorAll("[aria-controls]")) {
+    const controlledIds = (_b = (_a = trigger.getAttribute("aria-controls")) == null ? void 0 : _a.split(/\s+/)) != null ? _b : [];
+    for (const controlledId of controlledIds) {
+      const controlledContent = document.getElementById(controlledId);
+      if (controlledContent) addFocusableContent(controlledContent);
+    }
+  }
+  return focusables;
+}
 function SidePanel({
   isOpen,
   onClose,
@@ -36,23 +66,70 @@ function SidePanel({
   const [shouldRender, setShouldRender] = react.useState(isOpen);
   const [isActive, setIsActive] = react.useState(false);
   const panelRef = react.useRef(null);
+  const returnFocusRef = react.useRef(null);
+  const wasOpenRef = react.useRef(false);
   react.useEffect(() => setMounted(true), []);
   react.useEffect(() => {
     if (isOpen) setShouldRender(true);
   }, [isOpen]);
   react.useEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen || !shouldRender || !mounted) return;
+    if (!wasOpenRef.current) {
+      const activeElement = document.activeElement;
+      returnFocusRef.current = activeElement instanceof HTMLElement ? activeElement : null;
+      wasOpenRef.current = true;
+    }
+    const focusInitial = () => {
+      var _a;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const closeButton = panel.querySelector(
+        '[data-cy="side-panel-close-button"]'
+      );
+      const focusables = getFocusable(panel);
+      ((_a = closeButton != null ? closeButton : focusables[0]) != null ? _a : panel).focus();
+    };
+    focusInitial();
+    const frame = requestAnimationFrame(focusInitial);
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         e.stopPropagation();
         onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const focusables = getFocusable(panel);
+      if (focusables.length === 0) {
+        e.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !panel.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !panel.contains(active))) {
+        e.preventDefault();
+        first.focus();
       }
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => {
+      cancelAnimationFrame(frame);
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [isOpen, onClose]);
+  }, [isOpen, mounted, onClose, shouldRender]);
+  react.useEffect(() => {
+    var _a;
+    if (isOpen || !wasOpenRef.current) return;
+    wasOpenRef.current = false;
+    (_a = returnFocusRef.current) == null ? void 0 : _a.focus();
+    returnFocusRef.current = null;
+  }, [isOpen]);
   react.useEffect(() => {
     if (!shouldRender) return;
     if (!isOpen) {
@@ -103,6 +180,7 @@ function SidePanel({
           "data-cy": "details-panel",
           role: "dialog",
           "aria-modal": "true",
+          tabIndex: -1,
           children: [
             hasDetails ? /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: styles__default.default.detailsCol, "data-cy": "details-panel-details", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.detailsHeader, children: [

package/dist/components/overlay/side-panel/SidePanel.js

@@ -7,6 +7,36 @@ import { Headline } from '../../../components/headline/Headline';
 import { MOTION_MS } from '../../../styles/animation';
 import styles from './SidePanel.module.css';
 
+function getFocusable(container) {
+  var _a, _b;
+  const selector = [
+    'a[href]:not([aria-disabled="true"])',
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])'
+  ].join(",");
+  const focusables = [];
+  const addFocusableContent = (root) => {
+    const candidates = root.querySelectorAll(selector);
+    for (const element of candidates) {
+      if (element.hasAttribute("hidden") || element.getAttribute("aria-hidden") === "true" || element.getAttribute("aria-disabled") === "true") {
+        continue;
+      }
+      if (!focusables.includes(element)) focusables.push(element);
+    }
+  };
+  addFocusableContent(container);
+  for (const trigger of container.querySelectorAll("[aria-controls]")) {
+    const controlledIds = (_b = (_a = trigger.getAttribute("aria-controls")) == null ? void 0 : _a.split(/\s+/)) != null ? _b : [];
+    for (const controlledId of controlledIds) {
+      const controlledContent = document.getElementById(controlledId);
+      if (controlledContent) addFocusableContent(controlledContent);
+    }
+  }
+  return focusables;
+}
 function SidePanel({
   isOpen,
   onClose,
@@ -30,23 +60,70 @@ function SidePanel({
   const [shouldRender, setShouldRender] = useState(isOpen);
   const [isActive, setIsActive] = useState(false);
   const panelRef = useRef(null);
+  const returnFocusRef = useRef(null);
+  const wasOpenRef = useRef(false);
   useEffect(() => setMounted(true), []);
   useEffect(() => {
     if (isOpen) setShouldRender(true);
   }, [isOpen]);
   useEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen || !shouldRender || !mounted) return;
+    if (!wasOpenRef.current) {
+      const activeElement = document.activeElement;
+      returnFocusRef.current = activeElement instanceof HTMLElement ? activeElement : null;
+      wasOpenRef.current = true;
+    }
+    const focusInitial = () => {
+      var _a;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const closeButton = panel.querySelector(
+        '[data-cy="side-panel-close-button"]'
+      );
+      const focusables = getFocusable(panel);
+      ((_a = closeButton != null ? closeButton : focusables[0]) != null ? _a : panel).focus();
+    };
+    focusInitial();
+    const frame = requestAnimationFrame(focusInitial);
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         e.stopPropagation();
         onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const focusables = getFocusable(panel);
+      if (focusables.length === 0) {
+        e.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !panel.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !panel.contains(active))) {
+        e.preventDefault();
+        first.focus();
       }
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => {
+      cancelAnimationFrame(frame);
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [isOpen, onClose]);
+  }, [isOpen, mounted, onClose, shouldRender]);
+  useEffect(() => {
+    var _a;
+    if (isOpen || !wasOpenRef.current) return;
+    wasOpenRef.current = false;
+    (_a = returnFocusRef.current) == null ? void 0 : _a.focus();
+    returnFocusRef.current = null;
+  }, [isOpen]);
   useEffect(() => {
     if (!shouldRender) return;
     if (!isOpen) {
@@ -97,6 +174,7 @@ function SidePanel({
           "data-cy": "details-panel",
           role: "dialog",
           "aria-modal": "true",
+          tabIndex: -1,
           children: [
             hasDetails ? /* @__PURE__ */ jsxs("aside", { className: styles.detailsCol, "data-cy": "details-panel-details", children: [
               /* @__PURE__ */ jsxs("div", { className: styles.detailsHeader, children: [