@dbcdk/react-components 0.0.209 → 0.0.211

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/nav-bar/NavBar.d.ts

@@ -18,7 +18,8 @@ export type NavBarLinkItem = NavBarBase & {
     active?: boolean;
     external?: boolean;
 };
-/** Clickable + expandable item (has href AND children) */
+/** Expandable container. In Sidebar, href is a stable expansion key, not a destination.
+ * Legacy component/active/external props are accepted but ignored by Sidebar groups. */
 export type NavBarExpandableItem = NavBarBase & {
     type: 'expandable';
     href: string;

package/dist/components/overlay/tooltip/TooltipProvider.cjs

@@ -64,10 +64,18 @@ function shallowEqualActive(a, b) {
 function TooltipProvider({ children }) {
   const [active, setActive] = react.useState(null);
   const showTimerRef = react.useRef(null);
+  const pendingIdRef = react.useRef(null);
+  react.useEffect(() => {
+    return () => {
+      if (showTimerRef.current) clearTimeout(showTimerRef.current);
+    };
+  }, []);
   const show = react.useCallback((next) => {
     if (showTimerRef.current) clearTimeout(showTimerRef.current);
+    pendingIdRef.current = next.id;
     showTimerRef.current = setTimeout(() => {
       showTimerRef.current = null;
+      pendingIdRef.current = null;
       setActive((curr) => {
         const proposed = { ...next, open: true };
         return shallowEqualActive(curr, proposed) ? curr : proposed;
@@ -75,9 +83,10 @@ function TooltipProvider({ children }) {
     }, SHOW_DELAY_MS);
   }, []);
   const hide = react.useCallback((id) => {
-    if (showTimerRef.current) {
+    if (showTimerRef.current && pendingIdRef.current === id) {
       clearTimeout(showTimerRef.current);
       showTimerRef.current = null;
+      pendingIdRef.current = null;
     }
     setActive((curr) => {
       if (!curr || curr.id !== id) return curr;

package/dist/components/overlay/tooltip/TooltipProvider.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { createContext, useState, useRef, useCallback, useMemo, useContext, useEffect, useLayoutEffect } from 'react';
+import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import styles from './Tooltip.module.css';
 
@@ -58,10 +58,18 @@ function shallowEqualActive(a, b) {
 function TooltipProvider({ children }) {
   const [active, setActive] = useState(null);
   const showTimerRef = useRef(null);
+  const pendingIdRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (showTimerRef.current) clearTimeout(showTimerRef.current);
+    };
+  }, []);
   const show = useCallback((next) => {
     if (showTimerRef.current) clearTimeout(showTimerRef.current);
+    pendingIdRef.current = next.id;
     showTimerRef.current = setTimeout(() => {
       showTimerRef.current = null;
+      pendingIdRef.current = null;
       setActive((curr) => {
         const proposed = { ...next, open: true };
         return shallowEqualActive(curr, proposed) ? curr : proposed;
@@ -69,9 +77,10 @@ function TooltipProvider({ children }) {
     }, SHOW_DELAY_MS);
   }, []);
   const hide = useCallback((id) => {
-    if (showTimerRef.current) {
+    if (showTimerRef.current && pendingIdRef.current === id) {
       clearTimeout(showTimerRef.current);
       showTimerRef.current = null;
+      pendingIdRef.current = null;
     }
     setActive((curr) => {
       if (!curr || curr.id !== id) return curr;

package/dist/components/overlay/tooltip/useTooltipTrigger.cjs

@@ -26,12 +26,19 @@ function useTooltipTrigger(options) {
   const openTimer = react.useRef(null);
   const closeTimer = react.useRef(null);
   const openedByFocusRef = react.useRef(false);
-  const clearTimers = () => {
+  const clearTimers = react.useCallback(() => {
     if (openTimer.current) window.clearTimeout(openTimer.current);
     if (closeTimer.current) window.clearTimeout(closeTimer.current);
     openTimer.current = null;
     closeTimer.current = null;
-  };
+  }, []);
+  const hideTooltip = ctx.hide;
+  react.useEffect(() => {
+    return () => {
+      clearTimers();
+      hideTooltip(id);
+    };
+  }, [clearTimers, hideTooltip, id]);
   const lastSentRef = react.useRef(null);
   const show = react.useCallback(() => {
     if (!content) return;

package/dist/components/overlay/tooltip/useTooltipTrigger.js

@@ -24,12 +24,19 @@ function useTooltipTrigger(options) {
   const openTimer = useRef(null);
   const closeTimer = useRef(null);
   const openedByFocusRef = useRef(false);
-  const clearTimers = () => {
+  const clearTimers = useCallback(() => {
     if (openTimer.current) window.clearTimeout(openTimer.current);
     if (closeTimer.current) window.clearTimeout(closeTimer.current);
     openTimer.current = null;
     closeTimer.current = null;
-  };
+  }, []);
+  const hideTooltip = ctx.hide;
+  useEffect(() => {
+    return () => {
+      clearTimers();
+      hideTooltip(id);
+    };
+  }, [clearTimers, hideTooltip, id]);
   const lastSentRef = useRef(null);
   const show = useCallback(() => {
     if (!content) return;

package/dist/components/sidebar/Sidebar.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -19,7 +20,7 @@ function Sidebar({
   minWidth,
   storageKey
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SidebarProvider.SidebarProvider, { items, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarProvider.SidebarProvider, { items, initialActiveLink: activeLink, children: /* @__PURE__ */ jsxRuntime.jsx(
     SidebarContainer.SidebarContainer,
     {
       productName,

package/dist/components/sidebar/Sidebar.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { SidebarContainer } from './components/sidebar-container/SidebarContainer';
 import { SidebarProvider } from './providers/SidebarProvider';
@@ -17,7 +18,7 @@ function Sidebar({
   minWidth,
   storageKey
 }) {
-  return /* @__PURE__ */ jsx(SidebarProvider, { items, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(SidebarProvider, { items, initialActiveLink: activeLink, children: /* @__PURE__ */ jsx(
     SidebarContainer,
     {
       productName,

package/dist/components/sidebar/components/SidebarItem.cjs

@@ -1,31 +1,52 @@
+'use client';
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./SidebarItem.module.css');
+var SidebarProvider = require('../providers/SidebarProvider');
 var SidebarItemContent = require('./sidebar-item-content/SidebarItemContent');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
 function SidebarItem({
-  component: Component,
+  component: Component = "a",
   label,
   icon,
   badge,
   href,
   iconWidth,
-  truncateLabel
+  truncateLabel,
+  enabled = true,
+  external
 }) {
-  if (!Component) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    SidebarItemContent.SidebarItemContent,
+  const { activeLink, isSidebarCollapsed } = SidebarProvider.useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
     {
-      icon,
-      badge,
-      iconWidth,
-      label,
       href,
-      truncateLabel
+      className: styles__default.default.link,
+      "aria-label": isSidebarCollapsed ? label : void 0,
+      "aria-current": enabled && activeLink === href ? "page" : void 0,
+      "aria-disabled": !enabled || void 0,
+      tabIndex: enabled ? void 0 : -1,
+      onClick: enabled ? void 0 : (event) => event.preventDefault(),
+      ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SidebarItemContent.SidebarItemContent,
+        {
+          icon,
+          badge,
+          iconWidth,
+          label,
+          href,
+          disableActiveStyles: !enabled,
+          truncateLabel
+        }
+      )
     }
-  ) });
+  );
 }
 
 exports.SidebarItem = SidebarItem;

package/dist/components/sidebar/components/SidebarItem.d.ts

@@ -2,11 +2,13 @@ import React from 'react';
 interface SidebarItemProps {
     component?: React.ElementType;
     label: string;
-    icon: React.ReactNode;
+    icon?: React.ReactNode;
     badge?: number | string;
     href?: string;
     iconWidth?: string | number;
+    enabled?: boolean;
+    external?: boolean;
     truncateLabel?: boolean;
 }
-export declare function SidebarItem({ component: Component, label, icon, badge, href, iconWidth, truncateLabel, }: SidebarItemProps): React.ReactNode;
+export declare function SidebarItem({ component: Component, label, icon, badge, href, iconWidth, truncateLabel, enabled, external, }: SidebarItemProps): React.ReactNode;
 export {};