@dbcdk/react-components 0.0.168 → 0.0.169

package/dist/components/popover/Popover.js

@@ -1,307 +0,0 @@
-'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

@@ -1,52 +0,0 @@
-.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

@@ -1,297 +0,0 @@
-'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

@@ -1,30 +0,0 @@
-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 {};