@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/popover/Popover.js

@@ -0,0 +1,307 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronUp, ChevronDown } from 'lucide-react';
+import * as React from 'react';
+import { forwardRef, useId, useState, useRef, useEffect, useCallback, useImperativeHandle, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import styles from './Popover.module.css';
+
+function assignRef(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  ref.current = value;
+}
+const LANDMARK_SELECTOR = "main, nav, header, footer, aside";
+function getNearestLandmark(el) {
+  var _a;
+  return (_a = el.closest(LANDMARK_SELECTOR)) != null ? _a : document.body;
+}
+function getFocusable(container) {
+  const els = container.querySelectorAll(
+    [
+      "a[href]",
+      "button:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(",")
+  );
+  return Array.from(els).filter(
+    (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden")
+  );
+}
+function parseMinWidthPx(minWidth, elForEm) {
+  const v = minWidth.trim();
+  if (v.endsWith("px")) {
+    const n = Number.parseFloat(v);
+    return Number.isFinite(n) ? n : 0;
+  }
+  if (typeof window !== "undefined" && v.endsWith("rem")) {
+    const n = Number.parseFloat(v);
+    if (!Number.isFinite(n)) return 0;
+    const rootFont = Number.parseFloat(getComputedStyle(document.documentElement).fontSize || "16");
+    return n * (Number.isFinite(rootFont) ? rootFont : 16);
+  }
+  if (typeof window !== "undefined" && v.endsWith("em")) {
+    const n = Number.parseFloat(v);
+    if (!Number.isFinite(n)) return 0;
+    const font = elForEm ? Number.parseFloat(getComputedStyle(elForEm).fontSize || "16") : 16;
+    return n * (Number.isFinite(font) ? font : 16);
+  }
+  return 0;
+}
+const Popover = forwardRef(function Popover2({
+  trigger: Trigger,
+  children,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  contentId,
+  minWidth = "200px",
+  matchTriggerWidth = true,
+  viewportPadding = 8,
+  contentMaxHeightPx = 400,
+  edgeBuffer = 100,
+  dataCy,
+  fullWidth = false,
+  fillTrigger = false,
+  autoFocusContent = false,
+  returnFocus = true,
+  anchorRef,
+  overlayRef
+}, ref) {
+  const internalId = useId();
+  const resolvedContentId = contentId != null ? contentId : `popover-${internalId}`;
+  const isControlled = open !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isOpen = isControlled ? !!open : uncontrolledOpen;
+  const [pos, setPos] = useState({ top: 0, left: 0 });
+  const [positioned, setPositioned] = useState(false);
+  const [triggerWidth, setTriggerWidth] = useState(null);
+  const containerRef = useRef(null);
+  const contentRef = useRef(null);
+  const triggerElRef = useRef(null);
+  const lastCloseReasonRef = useRef("unknown");
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const [portalTarget, setPortalTarget] = useState(null);
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange == null ? void 0 : onOpenChange(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const openPopover = useCallback(() => {
+    setPositioned(false);
+    setPortalTarget(containerRef.current ? getNearestLandmark(containerRef.current) : document.body);
+    setOpen(true);
+  }, [setOpen]);
+  const closePopover = useCallback(
+    (reason = "api") => {
+      lastCloseReasonRef.current = reason;
+      setOpen(false);
+    },
+    [setOpen]
+  );
+  const togglePopover = useCallback(
+    (e) => {
+      var _a, _b;
+      triggerElRef.current = (_b = (_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : e.currentTarget) != null ? _b : containerRef.current;
+      if (isOpen) closePopover("trigger");
+      else openPopover();
+    },
+    [isOpen, closePopover, openPopover, anchorRef]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      close: () => closePopover("api"),
+      open: openPopover,
+      isOpen: () => isOpen
+    }),
+    [closePopover, openPopover, isOpen]
+  );
+  const computeAndSetPosition = useCallback(() => {
+    var _a, _b;
+    const content = contentRef.current;
+    if (!content) return;
+    const triggerEl = (_b = (_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : triggerElRef.current) != null ? _b : containerRef.current;
+    if (!triggerEl) return;
+    const triggerRect = triggerEl.getBoundingClientRect();
+    const overlayWidthBuffer = 8;
+    let forcedWidthPx = null;
+    if (matchTriggerWidth) {
+      const minWidthPx = parseMinWidthPx(minWidth, triggerEl);
+      forcedWidthPx = Math.max(triggerRect.width + overlayWidthBuffer, minWidthPx || 0);
+      setTriggerWidth(forcedWidthPx);
+    } else {
+      setTriggerWidth(null);
+    }
+    const prevHidden = content.hidden;
+    const prevVis = content.style.visibility;
+    const prevDisp = content.style.display;
+    const prevMinWidth = content.style.minWidth;
+    const prevWidth = content.style.width;
+    const prevTop = content.style.top;
+    const prevLeft = content.style.left;
+    content.hidden = false;
+    content.style.visibility = "hidden";
+    content.style.display = "block";
+    content.style.top = "0px";
+    content.style.left = "0px";
+    content.style.minWidth = minWidth;
+    content.style.width = forcedWidthPx != null ? `${forcedWidthPx}px` : "auto";
+    const contentWidth = content.offsetWidth;
+    const contentHeight = content.offsetHeight;
+    content.hidden = prevHidden;
+    content.style.visibility = prevVis;
+    content.style.display = prevDisp;
+    content.style.minWidth = prevMinWidth;
+    content.style.width = prevWidth;
+    content.style.top = prevTop;
+    content.style.left = prevLeft;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const spaceAbove = Math.max(0, triggerRect.top);
+    const spaceBelow = Math.max(0, vh - triggerRect.bottom);
+    const spaceLeft = Math.max(0, triggerRect.left);
+    const spaceRight = Math.max(0, vw - triggerRect.right);
+    const preferBelow = spaceBelow >= contentHeight + edgeBuffer || spaceBelow >= spaceAbove;
+    const spacing = viewportPadding;
+    const rawTop = preferBelow ? triggerRect.bottom + spacing : triggerRect.top - contentHeight - spacing;
+    const placeRightOfLeftEdge = spaceRight + triggerRect.width >= contentWidth + edgeBuffer;
+    const placeLeftOfRightEdge = spaceLeft + triggerRect.width >= contentWidth + edgeBuffer;
+    let rawLeft;
+    if (placeRightOfLeftEdge) rawLeft = triggerRect.left;
+    else if (placeLeftOfRightEdge) rawLeft = triggerRect.right - contentWidth;
+    else rawLeft = triggerRect.left + (triggerRect.width - contentWidth) / 2;
+    const clampedLeft = Math.max(
+      viewportPadding,
+      Math.min(rawLeft, vw - contentWidth - viewportPadding)
+    );
+    const clampedTop = Math.max(
+      viewportPadding,
+      Math.min(rawTop, vh - contentHeight - viewportPadding)
+    );
+    setPos({ top: clampedTop, left: clampedLeft });
+    setPositioned(true);
+  }, [anchorRef, edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]);
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+    computeAndSetPosition();
+  }, [isOpen, computeAndSetPosition]);
+  useEffect(() => {
+    var _a, _b, _c;
+    if (!isOpen) return;
+    const content = contentRef.current;
+    if (!content) return;
+    const triggerEl = (_b = (_a = anchorRef == null ? void 0 : anchorRef.current) != null ? _a : triggerElRef.current) != null ? _b : containerRef.current;
+    if (autoFocusContent) {
+      const focusables = getFocusable(content);
+      (_c = focusables[0]) == null ? void 0 : _c.focus();
+    }
+    const handlePointerDownCapture = (e) => {
+      const container = containerRef.current;
+      const contentEl = contentRef.current;
+      if (!container || !contentEl) return;
+      const target = e.target;
+      if (!container.contains(target) && !contentEl.contains(target)) {
+        closePopover("outside");
+      }
+    };
+    const handleEscape = (e) => {
+      if (e.key === "Escape") closePopover("escape");
+    };
+    const handleReposition = () => computeAndSetPosition();
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => {
+      handleReposition();
+    }) : null;
+    document.addEventListener("pointerdown", handlePointerDownCapture, true);
+    document.addEventListener("keydown", handleEscape, true);
+    window.addEventListener("resize", handleReposition);
+    window.addEventListener("scroll", handleReposition, true);
+    resizeObserver == null ? void 0 : resizeObserver.observe(content);
+    if (triggerEl) resizeObserver == null ? void 0 : resizeObserver.observe(triggerEl);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDownCapture, true);
+      document.removeEventListener("keydown", handleEscape, true);
+      window.removeEventListener("resize", handleReposition);
+      window.removeEventListener("scroll", handleReposition, true);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+    };
+  }, [isOpen, closePopover, computeAndSetPosition, autoFocusContent, anchorRef]);
+  useEffect(() => {
+    var _a, _b;
+    if (isOpen) return;
+    if (!returnFocus) return;
+    if (lastCloseReasonRef.current === "outside") return;
+    (_b = (_a = triggerElRef.current) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+  }, [isOpen, returnFocus]);
+  const icon = isOpen ? /* @__PURE__ */ jsx(ChevronUp, { className: "dbc-muted-text", size: 20 }) : /* @__PURE__ */ jsx(ChevronDown, { className: "dbc-muted-text", size: 20 });
+  const setOverlayRef = React.useCallback(
+    (node) => {
+      assignRef(overlayRef, node);
+    },
+    [overlayRef]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        styles.container,
+        fullWidth ? styles.fullWidth : "",
+        fillTrigger ? styles.fillTrigger : ""
+      ].filter(Boolean).join(" "),
+      ref: containerRef,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: [
+              styles.triggerSlot,
+              fullWidth ? styles.fullWidth : "",
+              fillTrigger ? styles.fillTrigger : ""
+            ].filter(Boolean).join(" "),
+            children: Trigger(togglePopover, icon, isOpen)
+          }
+        ),
+        mounted && isOpen && createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: resolvedContentId,
+              ref: (node) => {
+                contentRef.current = node;
+                setOverlayRef(node);
+              },
+              className: styles.content,
+              style: {
+                top: pos.top,
+                left: pos.left,
+                minWidth,
+                width: triggerWidth != null ? `${triggerWidth}px` : void 0,
+                maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
+                maxHeight: `clamp(100px, calc(100vh - ${viewportPadding * 2}px), ${contentMaxHeightPx}px)`,
+                visibility: positioned ? void 0 : "hidden"
+              },
+              "data-cy": dataCy != null ? dataCy : "popover-content",
+              children: typeof children === "function" ? (
+                // eslint-disable-next-line react-hooks/refs
+                children(() => closePopover("api"))
+              ) : children
+            }
+          ),
+          portalTarget != null ? portalTarget : document.body
+        )
+      ]
+    }
+  );
+});
+Popover.displayName = "Popover";
+
+export { Popover };

package/dist/components/popover/Popover.module.css

@@ -0,0 +1,52 @@
+.container {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+  min-width: 0;
+  width: auto;
+  flex: 0 0 auto;
+}
+
+.container > * {
+  min-width: 0;
+}
+
+.triggerSlot {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  width: auto;
+  flex: 0 0 auto;
+}
+
+.triggerSlot > * {
+  min-width: 0;
+}
+
+.fullWidth,
+.fillTrigger {
+  width: 100%;
+  flex: 1 1 auto;
+}
+
+.fullWidth > *,
+.fillTrigger > * {
+  width: 100%;
+  min-width: 0;
+}
+
+.content {
+  position: fixed;
+  border: 1px solid var(--color-border-subtle);
+  background-color: var(--color-bg-surface);
+  border-radius: var(--border-radius-lg);
+  padding: var(--spacing-xxs);
+  z-index: var(--z-popover);
+  overflow: auto;
+  box-shadow: var(--shadow-md);
+}
+
+.content[hidden] {
+  display: none;
+}

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

@@ -0,0 +1,297 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var Input = require('../../components/forms/input/Input');
+var Popover = require('../../components/popover/Popover');
+var SkeletonLoaderItem = require('../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+var styles = require('./SearchBox.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const SearchBox = react.forwardRef(function SearchBoxInner({
+  inputWidth,
+  maxWidth,
+  inputSize,
+  variant,
+  result,
+  debounce = true,
+  debounceMs = 800,
+  onSearch,
+  onSelect,
+  displayPopover,
+  resultKeys,
+  resultTemplate,
+  initialTemplate,
+  popoverMinWidth = "500px",
+  noResultText = "Ingen resultater",
+  loading,
+  enableHotkey = true,
+  onButtonClick,
+  buttonLabel,
+  buttonIcon,
+  buttonAriaLabel,
+  fullWidth = false,
+  value,
+  onChange,
+  ...rest
+}, ref) {
+  var _a;
+  const isControlled = value !== void 0;
+  const [draft, setDraft] = react.useState(() => isControlled ? String(value != null ? value : "") : "");
+  const [activeIndex, setActiveIndex] = react.useState(null);
+  const [popoverOpen, setPopoverOpen] = react.useState(false);
+  const listboxId = react.useId();
+  const popoverRef = react.useRef(null);
+  const internalInputRef = react.useRef(null);
+  const onSearchRef = react.useRef(onSearch);
+  react.useEffect(() => {
+    if (typeof ref === "function") {
+      ref(internalInputRef.current);
+    } else if (ref) {
+      ref.current = internalInputRef.current;
+    }
+  }, [ref]);
+  react.useEffect(() => {
+    if (!isControlled) return;
+    const next = String(value != null ? value : "");
+    if (next !== draft) setDraft(next);
+  }, [value]);
+  react.useEffect(() => {
+    onSearchRef.current = onSearch;
+  }, [onSearch]);
+  react.useEffect(() => {
+    if (!onSearchRef.current) return;
+    if (!debounce) {
+      onSearchRef.current(draft);
+      return;
+    }
+    const handler = setTimeout(() => {
+      var _a2;
+      (_a2 = onSearchRef.current) == null ? void 0 : _a2.call(onSearchRef, draft);
+    }, debounceMs);
+    return () => clearTimeout(handler);
+  }, [draft, debounce, debounceMs]);
+  react.useEffect(() => {
+    function handleKeyDown(event) {
+      var _a2;
+      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        (_a2 = internalInputRef.current) == null ? void 0 : _a2.focus();
+      }
+    }
+    if (enableHotkey) {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [enableHotkey]);
+  const hasInitialTemplate = initialTemplate !== void 0 && initialTemplate !== null;
+  const hasQuery = draft.trim().length > 0;
+  const canShowPopover = 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) {
+        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]
+  );
+  const handleSelect = react.useCallback(
+    (item) => {
+      onSelect == null ? void 0 : onSelect(item);
+      reset();
+    },
+    [onSelect]
+  );
+  function reset() {
+    var _a2;
+    setDraft("");
+    setActiveIndex(null);
+    (_a2 = popoverRef.current) == null ? void 0 : _a2.close();
+  }
+  const handleClear = react.useCallback(() => {
+    var _a2;
+    reset();
+    onSearch == null ? void 0 : onSearch("");
+    (_a2 = internalInputRef.current) == null ? void 0 : _a2.focus();
+  }, [onSearch]);
+  react.useEffect(() => {
+    setActiveIndex(null);
+  }, [result]);
+  react.useEffect(() => {
+    var _a2;
+    if (canShowPopover) return;
+    (_a2 = popoverRef.current) == null ? void 0 : _a2.close();
+  }, [canShowPopover]);
+  const showInputIcon = !onButtonClick || !!buttonLabel || !!buttonIcon;
+  const trailingButtonIcon = onButtonClick && !buttonLabel && !buttonIcon ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}) : buttonIcon;
+  const trailingButtonAriaLabel = buttonAriaLabel != null ? buttonAriaLabel : onButtonClick && !buttonLabel ? "S\xF8g" : void 0;
+  const activeOptionId = activeIndex !== null && (result == null ? void 0 : result.length) ? `${listboxId}-option-${activeIndex}` : void 0;
+  const inputProps = {
+    ...rest,
+    value: draft,
+    onChange: handleChange
+  };
+  if (!displayPopover) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          ...fullWidth ? { width: "100%" } : void 0,
+          ...maxWidth !== void 0 ? { maxWidth } : void 0
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input.Input,
+          {
+            ref: internalInputRef,
+            icon: showInputIcon ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}) : void 0,
+            minWidth: fullWidth ? void 0 : inputWidth != null ? inputWidth : "300px",
+            fullWidth,
+            inputSize,
+            variant,
+            onClear: handleClear,
+            onButtonClick,
+            buttonLabel,
+            buttonIcon: trailingButtonIcon,
+            buttonAriaLabel: trailingButtonAriaLabel,
+            ...inputProps,
+            placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
+          }
+        )
+      }
+    );
+  }
+  const dropdownContent = !canShowPopover ? null : !hasQuery && hasInitialTemplate ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.resultContainer, children: initialTemplate }) : resultTemplate ? resultTemplate : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        id: listboxId,
+        role: "listbox",
+        "aria-label": "S\xF8geresultater",
+        "aria-busy": loading ? "true" : void 0,
+        className: styles__default.default.suggestionList,
+        children: loading ? Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles__default.default.suggestionOption, children: resultKeys == null ? void 0 : resultKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: "100%" }, key)) }, index)) : result == null ? void 0 : result.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "li",
+          {
+            id: `${listboxId}-option-${index}`,
+            role: "option",
+            "aria-selected": index === activeIndex,
+            className: `${styles__default.default.suggestionOption}${index === activeIndex ? ` ${styles__default.default.suggestionOptionActive}` : ""}`,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              handleSelect(item);
+            },
+            children: resultKeys == null ? void 0 : resultKeys.map((key) => {
+              const raw = item[key];
+              return raw != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.suggestionCell, children: String(raw) }, key) : null;
+            })
+          },
+          index
+        ))
+      }
+    ),
+    !loading && !(result == null ? void 0 : result.length) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.resultContainer, children: noResultText })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        ...fullWidth ? { width: "100%" } : void 0,
+        ...maxWidth !== void 0 ? { maxWidth } : void 0
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        Popover.Popover,
+        {
+          ref: popoverRef,
+          minWidth: popoverMinWidth,
+          fullWidth,
+          onOpenChange: setPopoverOpen,
+          trigger: (event) => {
+            var _a2;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Input.Input,
+              {
+                ref: internalInputRef,
+                onFocusCapture: (e) => {
+                  if (!canShowPopover) return;
+                  event(e);
+                },
+                onClick: () => {
+                  var _a3, _b;
+                  if (!canShowPopover) return;
+                  if (!((_a3 = popoverRef.current) == null ? void 0 : _a3.isOpen())) (_b = popoverRef.current) == null ? void 0 : _b.open();
+                },
+                role: "combobox",
+                "aria-haspopup": "listbox",
+                "aria-expanded": popoverOpen,
+                "aria-controls": canShowPopover ? listboxId : void 0,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": activeOptionId,
+                clearAriaLabel: "Ryd s\xF8gning",
+                minWidth: fullWidth ? void 0 : inputWidth != null ? inputWidth : "300px",
+                width: fullWidth ? void 0 : inputWidth != null ? inputWidth : "300px",
+                fullWidth,
+                icon: showInputIcon ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}) : void 0,
+                inputSize,
+                variant,
+                autoComplete: "off",
+                onClear: handleClear,
+                onButtonClick,
+                buttonLabel,
+                buttonIcon: trailingButtonIcon,
+                buttonAriaLabel: trailingButtonAriaLabel,
+                ...inputProps,
+                onKeyDown: (e) => {
+                  var _a3;
+                  if (result == null ? void 0 : result.length) {
+                    if (e.key === "ArrowDown") {
+                      e.preventDefault();
+                      setActiveIndex(
+                        (prev) => prev === null || prev === result.length - 1 ? 0 : prev + 1
+                      );
+                    } else if (e.key === "ArrowUp") {
+                      e.preventDefault();
+                      setActiveIndex(
+                        (prev) => prev === null || prev === 0 ? result.length - 1 : prev - 1
+                      );
+                    } else if (e.key === "Home") {
+                      e.preventDefault();
+                      setActiveIndex(0);
+                    } else if (e.key === "End") {
+                      e.preventDefault();
+                      setActiveIndex(result.length - 1);
+                    } else if (e.key === "Enter") {
+                      e.preventDefault();
+                      if (activeIndex !== null) {
+                        handleSelect(result[activeIndex]);
+                      } else if (onButtonClick) {
+                        onButtonClick();
+                      }
+                    }
+                  }
+                  if (e.key === "Escape") reset();
+                  (_a3 = inputProps.onKeyDown) == null ? void 0 : _a3.call(inputProps, e);
+                },
+                placeholder: (_a2 = rest.placeholder) != null ? _a2 : "Indtast s\xF8geord"
+              }
+            );
+          },
+          children: dropdownContent
+        }
+      )
+    }
+  );
+});
+
+exports.SearchBox = SearchBox;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { InputVariant } from '../../components/forms/input/Input';
+import { Size } from '../../types/sizes.types';
+export type SearchBoxProps<T extends Record<string, unknown>> = {
+    inputWidth?: string | number;
+    maxWidth?: string | number;
+    inputSize?: Exclude<Size, 'xl'>;
+    variant?: InputVariant;
+    result?: T[];
+    resultKeys?: Array<Extract<keyof T, string>>;
+    resultTemplate?: React.ReactNode;
+    debounce?: boolean;
+    debounceMs?: number;
+    onSearch?: (query: string) => void;
+    onSelect?: (item: T) => void;
+    displayPopover?: boolean;
+    initialTemplate?: React.ReactNode;
+    noResultText?: string;
+    popoverMinWidth?: string;
+    loading?: boolean;
+    enableHotkey?: boolean;
+    fullWidth?: boolean;
+    onButtonClick?: () => void;
+    buttonLabel?: string;
+    buttonIcon?: React.ReactNode;
+    buttonAriaLabel?: string;
+} & React.InputHTMLAttributes<HTMLInputElement>;
+type SearchBoxComponent = <T extends Record<string, unknown>>(props: SearchBoxProps<T> & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;
+export declare const SearchBox: SearchBoxComponent;
+export {};