@dbcdk/react-components 0.0.191 → 0.0.193

package/dist/client.cjs

@@ -22,6 +22,7 @@ var useColorScheme = require('./hooks/useColorScheme');
 var useGetActiveTheme = require('./hooks/useGetActiveTheme');
 var useTheme = require('./hooks/useTheme');
 var usePersistentState = require('./hooks/usePersistentState');
+var useTreeViewSettings = require('./hooks/useTreeViewSettings');
 var Chip = require('./components/chip/Chip');
 var Panel = require('./components/panel/Panel');
 var Card = require('./components/card/Card');
@@ -231,6 +232,12 @@ Object.keys(usePersistentState).forEach(function (k) {
 		get: function () { return usePersistentState[k]; }
 	});
 });
+Object.keys(useTreeViewSettings).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return useTreeViewSettings[k]; }
+	});
+});
 Object.keys(Chip).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/client.d.ts

@@ -19,6 +19,7 @@ export * from './hooks/useColorScheme';
 export * from './hooks/useGetActiveTheme';
 export * from './hooks/useTheme';
 export * from './hooks/usePersistentState';
+export * from './hooks/useTreeViewSettings';
 export * from './components/chip/Chip';
 export * from './components/panel/Panel';
 export * from './components/card/Card';

package/dist/client.js

@@ -20,6 +20,7 @@ export * from './hooks/useColorScheme';
 export * from './hooks/useGetActiveTheme';
 export * from './hooks/useTheme';
 export * from './hooks/usePersistentState';
+export * from './hooks/useTreeViewSettings';
 export * from './components/chip/Chip';
 export * from './components/panel/Panel';
 export * from './components/card/Card';

package/dist/components/forms/input/Input.module.css

@@ -41,7 +41,12 @@
   flex: 1 1 auto;
   min-inline-size: 0;
   inline-size: 100%;
+  /* Size classes also apply to the field; keep the input inside its border. */
+  max-block-size: 100%;
   box-sizing: border-box;
+  /* Matches `.field`'s radius so the autofill box-shadow below (which paints
+     within this element's own box) doesn't show sharp corners under it. */
+  border-radius: inherit;
   text-overflow: ellipsis;
   color: var(--color-fg-default);
   background: transparent;
@@ -59,6 +64,94 @@
   color: var(--color-fg-subtle) !important;
 }
 
+/* Match the design system's selection color instead of the browser default. */
+.input::selection {
+  background-color: var(--color-bg-selected);
+  color: var(--color-fg-default);
+}
+
+.input::-moz-selection {
+  background-color: var(--color-bg-selected);
+  color: var(--color-fg-default);
+}
+
+/* Neutralize the browser's native autofill tint (Chrome's light-blue fill,
+   applied via this pseudo-class) so a filled field keeps the field's normal
+   background instead of the browser's own color - this also fires for
+   Chrome's "previous values typed in this field" history dropdown, which
+   uses the same autofill styling even though it's not real autofill data.
+   The huge transition delay is the standard trick to stop Chrome animating
+   its own background/text color in on top of this.
+
+   The field overlay below keeps the focus ring above this opaque fill. */
+.input:-webkit-autofill,
+.input:-webkit-autofill:hover {
+  -webkit-text-fill-color: var(--color-fg-default);
+  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-surface) inset;
+  box-shadow: 0 0 0 1000px var(--color-bg-surface) inset;
+  transition:
+    background-color 600000s 0s,
+    color 600000s 0s;
+}
+
+.subtle .input:-webkit-autofill,
+.subtle .input:-webkit-autofill:hover {
+  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-toolbar) inset;
+  box-shadow: 0 0 0 1000px var(--color-bg-toolbar) inset;
+}
+
+.embedded .input:-webkit-autofill,
+.embedded .input:-webkit-autofill:hover,
+.embedded .input:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px transparent inset;
+  box-shadow: 0 0 0 1000px transparent inset;
+}
+
+.header .input:-webkit-autofill,
+.header .input:-webkit-autofill:hover {
+  -webkit-box-shadow: 0 0 0 1000px transparent inset;
+  box-shadow: 0 0 0 1000px transparent inset;
+}
+
+.header .input:-webkit-autofill {
+  -webkit-text-fill-color: var(--color-navbar-fg);
+}
+
+/* Paint over the autofill fill using the whole field's geometry, including
+   adornments. A ring on the input itself creates an extra inner rectangle.
+   Keep this overlay non-interactive so clear buttons remain clickable. */
+.field:has(.input:-webkit-autofill)::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: inset 0 0 0 var(--border-width-thin)
+    var(--input-autofill-ring, var(--color-field-focus));
+  opacity: 0;
+  transition: opacity var(--transition-fast) var(--ease-standard);
+}
+
+.field:has(.input:-webkit-autofill):focus-within:not([aria-disabled='true'])::after {
+  opacity: 1;
+}
+
+.header {
+  --input-autofill-ring: var(--color-navbar-fg);
+}
+
+.modified {
+  --input-autofill-ring: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 55%,
+    var(--color-border-default)
+  );
+}
+
+.embedded:has(.input:-webkit-autofill)::after {
+  content: none;
+}
+
 .input:disabled {
   background-color: transparent;
   color: var(--color-disabled-fg);

package/dist/components/json-viewer/JsonViewer.cjs

@@ -12,6 +12,7 @@ var styles = require('./JsonViewer.module.css');
 var useClipboardStatus = require('./useClipboardStatus');
 var utils = require('./utils');
 var Button = require('../button/Button');
+var Icon = require('../icon/Icon');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -22,6 +23,7 @@ function JsonViewer({
   value,
   defaultExpandedDepth = 2,
   expandAll = false,
+  defaultViewMode = "tree",
   searchDebounceMs = 800,
   helperText,
   searchPlaceholder = "S\xF8g i n\xF8gler, stier og v\xE6rdier",
@@ -43,7 +45,7 @@ function JsonViewer({
     validate: (stored) => stored === "dark" || stored === "light"
   });
   const { value: viewMode, setValue: setViewMode } = usePersistentState.usePersistentState({
-    initialValue: "tree",
+    initialValue: defaultViewMode,
     storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
     validate: (stored) => stored === "tree" || stored === "raw"
   });
@@ -151,7 +153,7 @@ function JsonViewer({
                         "aria-haspopup": "menu",
                         "aria-expanded": isOpen ? true : false,
                         onClick: toggle,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { "aria-hidden": "true" })
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { "aria-hidden": "true" }) })
                       }
                     ),
                     children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [

package/dist/components/json-viewer/JsonViewer.d.ts

@@ -1,4 +1,4 @@
 import type { JSX } from 'react';
 import type { JsonViewerProps } from './types';
-export type { JsonViewerProps } from './types';
-export declare function JsonViewer({ value, defaultExpandedDepth, expandAll, searchDebounceMs, helperText, searchPlaceholder, emptySearchText, className, maxHeight, appearance, storageKey, borderless, }: JsonViewerProps): JSX.Element;
+export type { JsonViewerProps, JsonViewerViewMode } from './types';
+export declare function JsonViewer({ value, defaultExpandedDepth, expandAll, defaultViewMode, searchDebounceMs, helperText, searchPlaceholder, emptySearchText, className, maxHeight, appearance, storageKey, borderless, }: JsonViewerProps): JSX.Element;

package/dist/components/json-viewer/JsonViewer.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Search, X, ArrowDown, ArrowUp, ListTree, Braces, Sun, Moon, ClipboardCopy, MoreVertical } from 'lucide-react';
+import { Search, X, ArrowDown, ArrowUp, ListTree, Braces, Sun, Moon, ClipboardCopy, Settings2 } from 'lucide-react';
 import { useState, useId, useEffect, useMemo } from 'react';
 import { Menu } from '../../components/menu/Menu';
 import { Popover } from '../../components/popover/Popover';
@@ -10,12 +10,14 @@ import styles from './JsonViewer.module.css';
 import { useClipboardStatus } from './useClipboardStatus';
 import { normalizeSearch, isJsonValue, collectSearchMatches, collectExpandableNodeIds, collectInitiallyExpandedNodeIds } from './utils';
 import { Button } from '../button/Button';
+import { Icon } from '../icon/Icon';
 
 const COPY_ALL_ID = "__json-viewer-copy-all__";
 function JsonViewer({
   value,
   defaultExpandedDepth = 2,
   expandAll = false,
+  defaultViewMode = "tree",
   searchDebounceMs = 800,
   helperText,
   searchPlaceholder = "S\xF8g i n\xF8gler, stier og v\xE6rdier",
@@ -37,7 +39,7 @@ function JsonViewer({
     validate: (stored) => stored === "dark" || stored === "light"
   });
   const { value: viewMode, setValue: setViewMode } = usePersistentState({
-    initialValue: "tree",
+    initialValue: defaultViewMode,
     storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
     validate: (stored) => stored === "tree" || stored === "raw"
   });
@@ -145,7 +147,7 @@ function JsonViewer({
                         "aria-haspopup": "menu",
                         "aria-expanded": isOpen ? true : false,
                         onClick: toggle,
-                        children: /* @__PURE__ */ jsx(MoreVertical, { "aria-hidden": "true" })
+                        children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true" }) })
                       }
                     ),
                     children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [

package/dist/components/json-viewer/types.d.ts

@@ -8,10 +8,12 @@ export type SearchMatch = {
     descendant: boolean;
 };
 export type JsonViewerAppearance = 'dark' | 'light';
+export type JsonViewerViewMode = 'tree' | 'raw';
 export interface JsonViewerProps {
     value: unknown;
     defaultExpandedDepth?: number;
     expandAll?: boolean;
+    defaultViewMode?: JsonViewerViewMode;
     searchDebounceMs?: number;
     helperText?: string;
     searchPlaceholder?: string;

package/dist/components/line-viewer/LineViewer.cjs

@@ -10,6 +10,7 @@ var usePersistentState = require('../../hooks/usePersistentState');
 var styles = require('./LineViewer.module.css');
 var tokenizeLineFormat = require('./tokenizeLineFormat');
 var Button = require('../button/Button');
+var Icon = require('../icon/Icon');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -29,6 +30,8 @@ function LineViewer({
   lines,
   size = "md",
   appearance = "dark",
+  defaultViewMode = "highlighted",
+  deleted = false,
   storageKey,
   borderless = false
 }) {
@@ -40,7 +43,7 @@ function LineViewer({
     validate: (stored) => stored === "dark" || stored === "light"
   });
   const { value: viewMode, setValue: setViewMode } = usePersistentState.usePersistentState({
-    initialValue: "highlighted",
+    initialValue: defaultViewMode,
     storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
     validate: (stored) => stored === "highlighted" || stored === "raw"
   });
@@ -87,7 +90,7 @@ function LineViewer({
                     "aria-haspopup": "menu",
                     "aria-expanded": isOpen ? true : false,
                     onClick: toggle,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { "aria-hidden": "true" })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { "aria-hidden": "true" }) })
                   }
                 ),
                 children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [
@@ -157,7 +160,12 @@ function LineViewer({
         /* @__PURE__ */ jsxRuntime.jsx(
           "pre",
           {
-            className: [styles__default.default.codePane, styles__default.default[size], wrap ? styles__default.default.wrap : styles__default.default.noWrap].join(" "),
+            className: [
+              styles__default.default.codePane,
+              styles__default.default[size],
+              wrap ? styles__default.default.wrap : styles__default.default.noWrap,
+              deleted ? styles__default.default.deleted : ""
+            ].filter(Boolean).join(" "),
             tabIndex: 0,
             onDoubleClick: handleDoubleClick,
             children: /* @__PURE__ */ jsxRuntime.jsx("code", { ref: codeRef, children: viewMode === "raw" ? lines : tokens.map((token, index) => {

package/dist/components/line-viewer/LineViewer.d.ts

@@ -1,10 +1,15 @@
 import type { JSX } from 'react';
 export type LineViewerAppearance = 'dark' | 'light';
+export type LineViewerViewMode = 'highlighted' | 'raw';
 export interface LineViewerProps {
     lines: string;
     size?: 'xs' | 'sm' | 'md' | 'lg';
     /** Initial appearance. The user can toggle it via the kebab menu; defaults to 'dark'. */
     appearance?: LineViewerAppearance;
+    /** Initial view mode. The user can toggle it via the kebab menu; defaults to 'highlighted'. */
+    defaultViewMode?: LineViewerViewMode;
+    /** Displays all line text in the theme's error color, for deleted or invalid content. */
+    deleted?: boolean;
     /**
      * When set, the user's appearance/view-mode/wrap choices are persisted to
      * localStorage under `${storageKey}:appearance` etc.
@@ -17,4 +22,4 @@ export interface LineViewerProps {
      */
     borderless?: boolean;
 }
-export declare function LineViewer({ lines, size, appearance, storageKey, borderless, }: LineViewerProps): JSX.Element;
+export declare function LineViewer({ lines, size, appearance, defaultViewMode, deleted, storageKey, borderless, }: LineViewerProps): JSX.Element;

package/dist/components/line-viewer/LineViewer.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { TextWrap, ListTree, Code2, Sun, Moon, ClipboardCopy, MoreVertical } from 'lucide-react';
+import { TextWrap, ListTree, Code2, Sun, Moon, ClipboardCopy, Settings2 } from 'lucide-react';
 import { useMemo, useRef } from 'react';
 import { Menu } from '../../components/menu/Menu';
 import { Popover } from '../../components/popover/Popover';
@@ -8,6 +8,7 @@ import { usePersistentState } from '../../hooks/usePersistentState';
 import styles from './LineViewer.module.css';
 import { tokenizeLineFormat } from './tokenizeLineFormat';
 import { Button } from '../button/Button';
+import { Icon } from '../icon/Icon';
 
 const TOKEN_CLASS = {
   tag: styles.tag,
@@ -23,6 +24,8 @@ function LineViewer({
   lines,
   size = "md",
   appearance = "dark",
+  defaultViewMode = "highlighted",
+  deleted = false,
   storageKey,
   borderless = false
 }) {
@@ -34,7 +37,7 @@ function LineViewer({
     validate: (stored) => stored === "dark" || stored === "light"
   });
   const { value: viewMode, setValue: setViewMode } = usePersistentState({
-    initialValue: "highlighted",
+    initialValue: defaultViewMode,
     storageKey: storageKey ? `${storageKey}:viewMode` : void 0,
     validate: (stored) => stored === "highlighted" || stored === "raw"
   });
@@ -81,7 +84,7 @@ function LineViewer({
                     "aria-haspopup": "menu",
                     "aria-expanded": isOpen ? true : false,
                     onClick: toggle,
-                    children: /* @__PURE__ */ jsx(MoreVertical, { "aria-hidden": "true" })
+                    children: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true" }) })
                   }
                 ),
                 children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [
@@ -151,7 +154,12 @@ function LineViewer({
         /* @__PURE__ */ jsx(
           "pre",
           {
-            className: [styles.codePane, styles[size], wrap ? styles.wrap : styles.noWrap].join(" "),
+            className: [
+              styles.codePane,
+              styles[size],
+              wrap ? styles.wrap : styles.noWrap,
+              deleted ? styles.deleted : ""
+            ].filter(Boolean).join(" "),
             tabIndex: 0,
             onDoubleClick: handleDoubleClick,
             children: /* @__PURE__ */ jsx("code", { ref: codeRef, children: viewMode === "raw" ? lines : tokens.map((token, index) => {

package/dist/components/line-viewer/LineViewer.module.css

@@ -5,9 +5,17 @@
 
   --line-tag: color-mix(in oklab, var(--color-fg-inverse) 66%, var(--color-syntax-accent) 34%);
   --line-indicator: color-mix(in oklab, var(--color-fg-inverse) 46%, transparent);
-  --line-subfield-code: color-mix(in oklab, var(--color-fg-inverse) 30%, var(--color-syntax-number) 70%);
+  --line-subfield-code: color-mix(
+    in oklab,
+    var(--color-fg-inverse) 30%,
+    var(--color-syntax-number) 70%
+  );
   --line-value: color-mix(in oklab, var(--color-fg-inverse) 20%, var(--color-syntax-string) 80%);
-  --line-terminator: color-mix(in oklab, var(--color-fg-inverse) 30%, var(--color-syntax-boolean) 70%);
+  --line-terminator: color-mix(
+    in oklab,
+    var(--color-fg-inverse) 30%,
+    var(--color-syntax-boolean) 70%
+  );
   --line-punctuation: color-mix(in oklab, var(--color-fg-inverse) 60%, transparent);
   --line-continuation: color-mix(in oklab, var(--color-fg-inverse) 46%, transparent);
 
@@ -57,6 +65,11 @@
   line-height: 1.35;
 }
 
+.deleted code,
+.deleted code * {
+  color: var(--color-status-error);
+}
+
 .wrap {
   white-space: pre-wrap;
   overflow-wrap: break-word;

package/dist/components/popover/Popover.cjs

@@ -145,7 +145,7 @@ const Popover = React.forwardRef(function Popover2({
   React.useImperativeHandle(
     ref,
     () => ({
-      close: () => closePopover("api"),
+      close: (opts) => closePopover((opts == null ? void 0 : opts.returnFocus) === false ? "dismiss" : "api"),
       open: openPopover,
       isOpen: () => isOpen
     }),
@@ -265,6 +265,7 @@ const Popover = React.forwardRef(function Popover2({
     if (isOpen) return;
     if (!returnFocus) return;
     if (lastCloseReasonRef.current === "outside") return;
+    if (lastCloseReasonRef.current === "dismiss") return;
     (_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   }, [isOpen, returnFocus]);
   const chevronClassName = variant === "header" ? styles__default.default.chevronHeader : void 0;

package/dist/components/popover/Popover.d.ts

@@ -22,7 +22,14 @@ export interface PopoverProps {
     variant?: 'default' | 'header';
 }
 export interface PopoverHandle {
-    close: () => void;
+    /**
+     * Pass `{ returnFocus: false }` to close without focus returning to the
+     * trigger afterward - e.g. when the caller is about to navigate away or
+     * move focus itself, so the trigger shouldn't reclaim it back.
+     */
+    close: (opts?: {
+        returnFocus?: boolean;
+    }) => void;
     open: () => void;
     isOpen: () => boolean;
 }

package/dist/components/popover/Popover.js

@@ -121,7 +121,7 @@ const Popover = forwardRef(function Popover2({
   useImperativeHandle(
     ref,
     () => ({
-      close: () => closePopover("api"),
+      close: (opts) => closePopover((opts == null ? void 0 : opts.returnFocus) === false ? "dismiss" : "api"),
       open: openPopover,
       isOpen: () => isOpen
     }),
@@ -241,6 +241,7 @@ const Popover = forwardRef(function Popover2({
     if (isOpen) return;
     if (!returnFocus) return;
     if (lastCloseReasonRef.current === "outside") return;
+    if (lastCloseReasonRef.current === "dismiss") return;
     (_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
   }, [isOpen, returnFocus]);
   const chevronClassName = variant === "header" ? styles.chevronHeader : void 0;

package/dist/components/search-box/SearchBox.cjs

@@ -27,6 +27,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   resultKeys,
   resultTemplate,
   initialTemplate,
+  initialTemplateOnly = false,
   popoverMinWidth = "500px",
   noResultText = "Ingen resultater",
   loading,
@@ -99,34 +100,36 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   }, [enableHotkey]);
   const hasInitialTemplate = initialTemplate !== void 0 && initialTemplate !== null;
   const hasQuery = draft.trim().length > 0;
-  const canShowPopover = hasQuery || hasInitialTemplate;
+  const canShowPopover = initialTemplateOnly ? !hasQuery && hasInitialTemplate : hasQuery || hasInitialTemplate;
   const handleChange = react.useCallback(
     (e) => {
       var _a2, _b, _c;
       const nextDraft = e.target.value;
       const nextHasQuery = nextDraft.trim().length > 0;
       setDraft(nextDraft);
-      if (nextHasQuery || hasInitialTemplate) {
+      const nextCanShow = initialTemplateOnly ? !nextHasQuery && hasInitialTemplate : nextHasQuery || hasInitialTemplate;
+      if (nextCanShow) {
         if (!((_a2 = popoverRef.current) == null ? void 0 : _a2.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
       } else {
         (_c = popoverRef.current) == null ? void 0 : _c.close();
       }
       onChange == null ? void 0 : onChange(e);
     },
-    [hasInitialTemplate, onChange]
+    [hasInitialTemplate, initialTemplateOnly, onChange]
   );
   const handleSelect = react.useCallback(
     (item) => {
       onSelect == null ? void 0 : onSelect(item);
-      reset();
+      reset({ returnFocus: false });
+      onSearch == null ? void 0 : onSearch("");
     },
-    [onSelect]
+    [onSelect, onSearch]
   );
-  function reset() {
+  function reset(opts) {
     var _a2;
     setDraft("");
     setActiveIndex(null);
-    (_a2 = popoverRef.current) == null ? void 0 : _a2.close();
+    (_a2 = popoverRef.current) == null ? void 0 : _a2.close(opts);
   }
   const handleClear = react.useCallback(() => {
     var _a2;

package/dist/components/search-box/SearchBox.d.ts

@@ -15,6 +15,13 @@ export type SearchBoxProps<T extends Record<string, unknown>> = Omit<InputProps,
     onSelect?: (item: T) => void;
     displayPopover?: boolean;
     initialTemplate?: React.ReactNode;
+    /**
+     * When true, the popover only ever shows `initialTemplate` (on an empty
+     * field) and never opens once there's a query - for a box with no live
+     * results/resultTemplate of its own (e.g. one that just navigates via a
+     * URL param), so it doesn't pop open an empty dropdown while typing.
+     */
+    initialTemplateOnly?: boolean;
     noResultText?: string;
     popoverMinWidth?: string;
     loading?: boolean;

package/dist/components/search-box/SearchBox.js

@@ -21,6 +21,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
   resultKeys,
   resultTemplate,
   initialTemplate,
+  initialTemplateOnly = false,
   popoverMinWidth = "500px",
   noResultText = "Ingen resultater",
   loading,
@@ -93,34 +94,36 @@ const SearchBox = forwardRef(function SearchBoxInner({
   }, [enableHotkey]);
   const hasInitialTemplate = initialTemplate !== void 0 && initialTemplate !== null;
   const hasQuery = draft.trim().length > 0;
-  const canShowPopover = hasQuery || hasInitialTemplate;
+  const canShowPopover = initialTemplateOnly ? !hasQuery && hasInitialTemplate : hasQuery || hasInitialTemplate;
   const handleChange = useCallback(
     (e) => {
       var _a2, _b, _c;
       const nextDraft = e.target.value;
       const nextHasQuery = nextDraft.trim().length > 0;
       setDraft(nextDraft);
-      if (nextHasQuery || hasInitialTemplate) {
+      const nextCanShow = initialTemplateOnly ? !nextHasQuery && hasInitialTemplate : nextHasQuery || hasInitialTemplate;
+      if (nextCanShow) {
         if (!((_a2 = popoverRef.current) == null ? void 0 : _a2.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
       } else {
         (_c = popoverRef.current) == null ? void 0 : _c.close();
       }
       onChange == null ? void 0 : onChange(e);
     },
-    [hasInitialTemplate, onChange]
+    [hasInitialTemplate, initialTemplateOnly, onChange]
   );
   const handleSelect = useCallback(
     (item) => {
       onSelect == null ? void 0 : onSelect(item);
-      reset();
+      reset({ returnFocus: false });
+      onSearch == null ? void 0 : onSearch("");
     },
-    [onSelect]
+    [onSelect, onSearch]
   );
-  function reset() {
+  function reset(opts) {
     var _a2;
     setDraft("");
     setActiveIndex(null);
-    (_a2 = popoverRef.current) == null ? void 0 : _a2.close();
+    (_a2 = popoverRef.current) == null ? void 0 : _a2.close(opts);
   }
   const handleClear = useCallback(() => {
     var _a2;

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.cjs

@@ -4,6 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var React = require('react');
+var Icon = require('../../../../components/icon/Icon');
 var Button = require('../../../button/Button');
 var Menu = require('../../../menu/Menu');
 var Popover = require('../../../popover/Popover');
@@ -73,7 +74,7 @@ const SidenavFiltering = ({
             variant: "outlined",
             "aria-label": "\xC5bn indstillinger for sidemenu",
             onClick: toggle,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, {})
+            icon: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { "aria-hidden": "true" }) })
           }
         ),
         children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: wrapItemText, children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/sidebar/components/sidenav-filteirng/SidenavFiltering.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Search, Settings2 } from 'lucide-react';
 import React from 'react';
+import { Icon } from '../../../../components/icon/Icon';
 import { Button } from '../../../button/Button';
 import { Menu } from '../../../menu/Menu';
 import { Popover } from '../../../popover/Popover';
@@ -67,7 +68,7 @@ const SidenavFiltering = ({
             variant: "outlined",
             "aria-label": "\xC5bn indstillinger for sidemenu",
             onClick: toggle,
-            icon: /* @__PURE__ */ jsx(Settings2, {})
+            icon: /* @__PURE__ */ jsx(Icon, { customIcon: /* @__PURE__ */ jsx(Settings2, { "aria-hidden": "true" }) })
           }
         ),
         children: (close) => /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx(Menu.Item, { active: wrapItemText, children: /* @__PURE__ */ jsx(