@dbcdk/react-components 0.0.3 → 0.0.5

package/dist/components/pagination/Pagination.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo, useCallback } from 'react';
 import styles from './Pagination.module.css';
 import { Button } from '../button/Button';
-import { ArrowLeft, ArrowRight } from 'lucide-react';
+import { ChevronsLeft, ArrowLeft, ArrowRight, ChevronsRight, ChevronDown } from 'lucide-react';
 import { Popover } from '../popover/Popover';
 import { Menu } from '../menu/Menu';
 
@@ -12,97 +12,113 @@ function Pagination({
   skip = 0,
   take = DEFAULT_PAGE_SIZE_OPTIONS[1],
   onPageChange,
-  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS
+  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+  showFirstLast = true,
+  showGoToPage = true
 }) {
-  const totalPages = useMemo(() => {
-    const pages = Math.max(1, Math.ceil(itemsCount / Math.max(1, take)));
-    return pages;
-  }, [itemsCount, take]);
+  const totalPages = useMemo(
+    () => Math.max(1, Math.ceil(itemsCount / Math.max(1, take))),
+    [itemsCount, take]
+  );
   const currentPage = useMemo(() => {
     const p = Math.floor(skip / Math.max(1, take)) + 1;
     return Math.min(Math.max(1, p), totalPages);
   }, [skip, take, totalPages]);
   const emit = useCallback(
-    (page) => {
-      const clampedPage = Math.min(Math.max(1, page), totalPages);
-      const nextSkip = (clampedPage - 1) * take;
+    (page, nextTake = take) => {
+      const nextTotalPages = Math.max(1, Math.ceil(itemsCount / Math.max(1, nextTake)));
+      const clampedPage = Math.min(Math.max(1, page), nextTotalPages);
+      const nextSkip = (clampedPage - 1) * nextTake;
       onPageChange == null ? void 0 : onPageChange({
         page: clampedPage,
-        take,
+        take: nextTake,
         skip: nextSkip,
-        totalPages
+        totalPages: nextTotalPages
       });
     },
-    [onPageChange, take, totalPages]
+    [onPageChange, take, itemsCount]
   );
+  const firstPage = useCallback(() => emit(1), [emit]);
+  const lastPage = useCallback(() => emit(totalPages), [emit, totalPages]);
   const prevPage = useCallback(() => emit(currentPage - 1), [emit, currentPage]);
   const nextPage = useCallback(() => emit(currentPage + 1), [emit, currentPage]);
   const goToPage = useCallback((page) => emit(page), [emit]);
-  const pageList = useMemo(() => {
-    const visiblePages = 3;
-    const pages = Array.from({ length: totalPages }, (_, i) => i + 1);
-    let startIndex = Math.max(currentPage - Math.floor(visiblePages / 2) - 1, 0);
-    let endIndex = startIndex + visiblePages;
-    if (endIndex > totalPages) {
-      endIndex = totalPages;
-      startIndex = Math.max(endIndex - visiblePages, 0);
-    }
-    return {
-      first: startIndex > 0 ? 1 : void 0,
-      items: pages.slice(startIndex, endIndex),
-      last: endIndex < totalPages ? totalPages : void 0
-    };
-  }, [totalPages, currentPage]);
-  const handlePageSizeChange = useCallback(
-    (size) => {
-      onPageChange == null ? void 0 : onPageChange({
-        page: 1,
-        take: size,
-        skip: 0,
-        totalPages: Math.max(1, Math.ceil(itemsCount / Math.max(1, size)))
-      });
-    },
-    [onPageChange, itemsCount]
-  );
+  const canPrev = currentPage > 1;
+  const canNext = currentPage < totalPages;
+  const rangeLabel = useMemo(() => {
+    if (itemsCount <= 0) return "0 af 0";
+    const first = skip + 1;
+    const last = Math.min(skip + take, itemsCount);
+    return `${first.toLocaleString("da-DK")}\u2013${last.toLocaleString("da-DK")} af ${itemsCount.toLocaleString("da-DK")}`;
+  }, [itemsCount, skip, take]);
+  const pages = useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages]);
+  const handlePageSizeChange = useCallback((size) => emit(1, size), [emit]);
   return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-    /* @__PURE__ */ jsx(Button, { disabled: currentPage === 1, icon: /* @__PURE__ */ jsx(ArrowLeft, {}), onClick: prevPage }),
-    pageList.first && /* @__PURE__ */ jsxs("span", { className: styles.ellipsisButton, children: [
-      /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: () => goToPage(1), children: pageList.first }),
-      "\u2026"
-    ] }),
-    pageList.items.map((page) => /* @__PURE__ */ jsx(
+    showFirstLast && /* @__PURE__ */ jsx(
       Button,
       {
-        "aria-current": page === currentPage ? "page" : void 0,
-        variant: "outlined",
-        onClick: () => goToPage(page),
-        active: page === currentPage,
-        children: page
-      },
-      page
-    )),
-    pageList.last !== void 0 && /* @__PURE__ */ jsxs("span", { className: styles.ellipsisButton, children: [
-      "\u2026",
-      /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: () => goToPage(pageList.last), children: pageList.last })
-    ] }),
-    /* @__PURE__ */ jsx(Button, { disabled: currentPage === totalPages, icon: /* @__PURE__ */ jsx(ArrowRight, {}), onClick: nextPage }),
+        size: "sm",
+        icon: /* @__PURE__ */ jsx(ChevronsLeft, {}),
+        disabled: !canPrev,
+        onClick: firstPage,
+        "aria-label": "First page"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsx(ArrowLeft, {}),
+        disabled: !canPrev,
+        onClick: prevPage,
+        "aria-label": "Previous page"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: styles.range, "aria-live": "polite", children: rangeLabel }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsx(ArrowRight, {}),
+        disabled: !canNext,
+        onClick: nextPage,
+        "aria-label": "Next page"
+      }
+    ),
+    showFirstLast && /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        icon: /* @__PURE__ */ jsx(ChevronsRight, {}),
+        disabled: !canNext,
+        onClick: lastPage,
+        "aria-label": "Last page"
+      }
+    ),
+    showGoToPage && /* @__PURE__ */ jsx(
+      Popover,
+      {
+        trigger: (open) => /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: [
+          "Side ",
+          currentPage,
+          "/",
+          totalPages,
+          " ",
+          /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
+        ] }),
+        children: /* @__PURE__ */ jsx(Menu, { children: pages.map((page) => /* @__PURE__ */ jsx(Menu.Item, { active: page === currentPage, children: /* @__PURE__ */ jsx("button", { onClick: () => goToPage(page), children: page }) }, page)) })
+      }
+    ),
     /* @__PURE__ */ jsx(
       Popover,
       {
-        trigger: (event, icon) => /* @__PURE__ */ jsxs(Button, { variant: "outlined", onClick: event, children: [
+        trigger: (open) => /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "outlined", onClick: open, children: [
           "Vis ",
           take,
-          icon
+          " ",
+          /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
         ] }),
-        children: /* @__PURE__ */ jsx(Menu, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(Menu.Item, { active: size === take, children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => {
-              handlePageSizeChange(size);
-            },
-            children: size
-          }
-        ) }, size)) })
+        children: /* @__PURE__ */ jsx(Menu, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(Menu.Item, { active: size === take, children: /* @__PURE__ */ jsx("button", { onClick: () => handlePageSizeChange(size), children: size }) }, size)) })
       }
     )
   ] });

package/dist/components/pagination/Pagination.module.css

@@ -1,17 +1,25 @@
 .container {
   display: flex;
-  gap: 5px;
-  align-items: flex-end;
+  gap: var(--spacing-xxs);
+  align-items: center;
   justify-content: center;
   margin: 0 auto;
+  max-width: 100%;
+  overflow-x: auto;
 }
 
 .ellipsisButton {
   display: none;
 }
 
-@media (min-width: 480px) {
+@media (min-width: var(--bp-xs)) {
   .ellipsisButton {
     display: contents;
   }
 }
+.range {
+  min-width: 110px;
+  text-align: center;
+  font-size: var(--font-size-xs);
+  padding: 0 var(--spacing-xxs);
+}

package/dist/components/panel/Panel.module.css

@@ -1,7 +1,7 @@
 .container {
   border: 1px solid var(--color-border-strong);
   border-radius: var(--border-radius-default);
-  background-color: var(--color-bg);
+  background-color: var(--color-bg-surface);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -11,19 +11,17 @@
   border-bottom: 1px solid var(--color-border-strong);
 }
 
-
 .content {
   padding: var(--spacing-md);
 }
 
-.header
-{
+.header {
   padding: var(--spacing-sm) var(--spacing-md);
 }
 
-
 .container.sm {
-  .header,.content {
+  .header,
+  .content {
     padding: var(--spacing-sm) var(--spacing-md);
   }
-}
+}

package/dist/components/popover/Popover.cjs

@@ -9,8 +9,15 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-const Popover = react.forwardRef(function Popover2({ trigger: Trigger, children, minWidth = "200px", viewportPadding = 8, edgeBuffer = 100 }, ref) {
-  const [pos, setPos] = react.useState({ top: 0, left: 0, visible: false });
+const Popover = react.forwardRef(function Popover2({
+  trigger: Trigger,
+  children,
+  minWidth = "200px",
+  matchTriggerWidth = true,
+  viewportPadding = 8,
+  edgeBuffer = 100
+}, ref) {
+  const [pos, setPos] = react.useState({ top: 0, left: 0, width: 0, visible: false });
   const containerRef = react.useRef(null);
   const contentRef = react.useRef(null);
   const computeAndSetPosition = react.useCallback(
@@ -18,15 +25,25 @@ const Popover = react.forwardRef(function Popover2({ trigger: Trigger, children,
       const container = containerRef.current;
       const content = contentRef.current;
       if (!container || !content) return;
+      const triggerRect = container.getBoundingClientRect();
       const prevVis = content.style.visibility;
       const prevDisp = content.style.display;
+      const prevMinWidth = content.style.minWidth;
+      const prevWidth = content.style.width;
       content.style.visibility = "hidden";
       content.style.display = "block";
-      const triggerRect = container.getBoundingClientRect();
+      content.style.minWidth = minWidth;
+      content.style.width = "auto";
+      const minWidthPx = content.offsetWidth;
+      const desiredWidthPx = Math.max(matchTriggerWidth ? triggerRect.width : 0, minWidthPx);
+      content.style.minWidth = `${desiredWidthPx}px`;
+      content.style.width = `${desiredWidthPx}px`;
       const contentWidth = content.offsetWidth;
       const contentHeight = content.offsetHeight;
       content.style.visibility = prevVis;
       content.style.display = prevDisp;
+      content.style.minWidth = prevMinWidth;
+      content.style.width = prevWidth;
       const vw = window.innerWidth;
       const vh = window.innerHeight;
       const spaceAbove = Math.max(0, triggerRect.top);
@@ -54,9 +71,9 @@ const Popover = react.forwardRef(function Popover2({ trigger: Trigger, children,
         viewportPadding,
         Math.min(rawTop, vh - contentHeight - viewportPadding)
       );
-      setPos({ top: clampedTop, left: clampedLeft, visible: show });
+      setPos({ top: clampedTop, left: clampedLeft, width: desiredWidthPx, visible: show });
     },
-    [edgeBuffer, viewportPadding]
+    [edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]
   );
   const openPopover = react.useCallback(
     (e) => {
@@ -111,18 +128,18 @@ const Popover = react.forwardRef(function Popover2({ trigger: Trigger, children,
         ref: contentRef,
         className: styles__default.default.content,
         style: {
-          position: "fixed",
           top: pos.top,
           left: pos.left,
           visibility: pos.visible ? "visible" : "hidden",
-          minWidth,
+          minWidth: pos.width ? `${pos.width}px` : minWidth,
+          width: pos.width ? `${pos.width}px` : void 0,
           maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
           maxHeight: `calc(100vh - ${viewportPadding * 2}px)`,
           overflow: "auto"
         },
         role: "dialog",
         "aria-hidden": !pos.visible,
-        children
+        children: typeof children === "function" ? children(closePopover) : children
       }
     )
   ] });

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
 interface PopoverProps {
     trigger: (event: (e: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => void, icon: React.ReactNode) => React.ReactNode;
-    children: React.ReactNode;
+    children: ((close?: () => void) => React.ReactNode) | React.ReactNode;
     minWidth?: string;
+    matchTriggerWidth?: boolean;
     viewportPadding?: number;
     edgeBuffer?: number;
 }

package/dist/components/popover/Popover.js

@@ -3,8 +3,15 @@ import { forwardRef, useState, useRef, useCallback, useImperativeHandle, useEffe
 import styles from './Popover.module.css';
 import { ChevronUp, ChevronDown } from 'lucide-react';
 
-const Popover = forwardRef(function Popover2({ trigger: Trigger, children, minWidth = "200px", viewportPadding = 8, edgeBuffer = 100 }, ref) {
-  const [pos, setPos] = useState({ top: 0, left: 0, visible: false });
+const Popover = forwardRef(function Popover2({
+  trigger: Trigger,
+  children,
+  minWidth = "200px",
+  matchTriggerWidth = true,
+  viewportPadding = 8,
+  edgeBuffer = 100
+}, ref) {
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 0, visible: false });
   const containerRef = useRef(null);
   const contentRef = useRef(null);
   const computeAndSetPosition = useCallback(
@@ -12,15 +19,25 @@ const Popover = forwardRef(function Popover2({ trigger: Trigger, children, minWi
       const container = containerRef.current;
       const content = contentRef.current;
       if (!container || !content) return;
+      const triggerRect = container.getBoundingClientRect();
       const prevVis = content.style.visibility;
       const prevDisp = content.style.display;
+      const prevMinWidth = content.style.minWidth;
+      const prevWidth = content.style.width;
       content.style.visibility = "hidden";
       content.style.display = "block";
-      const triggerRect = container.getBoundingClientRect();
+      content.style.minWidth = minWidth;
+      content.style.width = "auto";
+      const minWidthPx = content.offsetWidth;
+      const desiredWidthPx = Math.max(matchTriggerWidth ? triggerRect.width : 0, minWidthPx);
+      content.style.minWidth = `${desiredWidthPx}px`;
+      content.style.width = `${desiredWidthPx}px`;
       const contentWidth = content.offsetWidth;
       const contentHeight = content.offsetHeight;
       content.style.visibility = prevVis;
       content.style.display = prevDisp;
+      content.style.minWidth = prevMinWidth;
+      content.style.width = prevWidth;
       const vw = window.innerWidth;
       const vh = window.innerHeight;
       const spaceAbove = Math.max(0, triggerRect.top);
@@ -48,9 +65,9 @@ const Popover = forwardRef(function Popover2({ trigger: Trigger, children, minWi
         viewportPadding,
         Math.min(rawTop, vh - contentHeight - viewportPadding)
       );
-      setPos({ top: clampedTop, left: clampedLeft, visible: show });
+      setPos({ top: clampedTop, left: clampedLeft, width: desiredWidthPx, visible: show });
     },
-    [edgeBuffer, viewportPadding]
+    [edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]
   );
   const openPopover = useCallback(
     (e) => {
@@ -105,18 +122,18 @@ const Popover = forwardRef(function Popover2({ trigger: Trigger, children, minWi
         ref: contentRef,
         className: styles.content,
         style: {
-          position: "fixed",
           top: pos.top,
           left: pos.left,
           visibility: pos.visible ? "visible" : "hidden",
-          minWidth,
+          minWidth: pos.width ? `${pos.width}px` : minWidth,
+          width: pos.width ? `${pos.width}px` : void 0,
           maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
           maxHeight: `calc(100vh - ${viewportPadding * 2}px)`,
           overflow: "auto"
         },
         role: "dialog",
         "aria-hidden": !pos.visible,
-        children
+        children: typeof children === "function" ? children(closePopover) : children
       }
     )
   ] });

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

@@ -1,22 +1,20 @@
 .container {
   position: relative;
-  display: inline-flex;
 }
 
 .content {
-  position: absolute;
-  border: 1px solid var(--color-border);
+  position: fixed;
   top: 100%;
   left: 0;
-  background-color: var(--color-surface);
+  border: 1px solid var(--color-border-default);
+  background-color: var(--color-bg-surface);
   border-radius: var(--border-radius-default);
   padding: var(--spacing-sm) 0;
   z-index: var(--z-popover);
-  background-color: var(--color-background);
   max-width: 80vw;
   max-height: 80vh;
   overflow: auto;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-md);
 }
 
 .content svg {

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

@@ -3,19 +3,19 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var lucideReact = require('lucide-react');
-var Input = require('../input/Input');
-var Menu = require('../menu/Menu');
-var Popover = require('../popover/Popover');
-var Button = require('../button/Button');
-var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+var Input = require('@/components/input/Input');
+var Menu = require('@/components/menu/Menu');
+var Popover = require('@/components/popover/Popover');
+var Button = require('@/components/button/Button');
+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 SearchBox2({
-  width,
+const SearchBox = react.forwardRef(function SearchBoxInner({
+  inputWidth,
   inputSize,
   variant,
   result,
@@ -32,9 +32,12 @@ const SearchBox = react.forwardRef(function SearchBox2({
   loading,
   enableHotkey = true,
   onButtonClick,
+  value,
+  onChange,
   ...rest
 }, ref) {
-  const [query, setQuery] = react.useState("");
+  const isControlled = value !== void 0;
+  const [draft, setDraft] = react.useState(() => isControlled ? String(value != null ? value : "") : "");
   const [searchQuery, setSearchQuery] = react.useState("");
   const popoverRef = react.useRef(null);
   const internalInputRef = react.useRef(null);
@@ -45,18 +48,24 @@ const SearchBox = react.forwardRef(function SearchBox2({
       ref.current = internalInputRef.current;
     }
   }, [ref]);
+  react.useEffect(() => {
+    if (!isControlled) return;
+    const next = String(value != null ? value : "");
+    if (next !== draft) setDraft(next);
+  }, [value]);
   react.useEffect(() => {
     if (!onSearch) return;
-    if (debounce) {
-      const handler = setTimeout(() => {
-        setSearchQuery(query);
-        onSearch(query);
-      }, debounceMs);
-      return () => clearTimeout(handler);
-    } else {
-      onSearch(query);
+    if (!debounce) {
+      setSearchQuery(draft);
+      onSearch(draft);
+      return;
     }
-  }, [query, onSearch, debounce]);
+    const handler = setTimeout(() => {
+      setSearchQuery(draft);
+      onSearch(draft);
+    }, debounceMs);
+    return () => clearTimeout(handler);
+  }, [draft, onSearch, debounce, debounceMs]);
   react.useEffect(() => {
     function handleKeyDown(event) {
       var _a;
@@ -71,7 +80,8 @@ const SearchBox = react.forwardRef(function SearchBox2({
     }
   }, [enableHotkey]);
   const handleChange = (e) => {
-    setQuery(e.target.value);
+    setDraft(e.target.value);
+    onChange == null ? void 0 : onChange(e);
   };
   function handleSelect(item) {
     onSelect == null ? void 0 : onSelect(item);
@@ -79,12 +89,15 @@ const SearchBox = react.forwardRef(function SearchBox2({
   }
   function reset() {
     var _a;
-    setQuery("");
+    setDraft("");
     setSearchQuery("");
     (_a = popoverRef.current) == null ? void 0 : _a.close();
   }
-  rest.value = query;
-  rest.onChange = handleChange;
+  const inputProps = {
+    ...rest,
+    value: draft,
+    onChange: handleChange
+  };
   const inputField = react.useMemo(() => {
     var _a;
     if (displayPopover) {
@@ -99,30 +112,30 @@ const SearchBox = react.forwardRef(function SearchBox2({
               Input.Input,
               {
                 ref: internalInputRef,
-                onInput: handleChange,
                 onFocusCapture: event,
                 onClick: event,
-                minWidth: width != null ? width : "300px",
+                minWidth: inputWidth != null ? inputWidth : "300px",
+                width: inputWidth != null ? inputWidth : "300px",
                 icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}),
                 inputSize,
-                ...rest,
+                variant,
+                ...inputProps,
                 placeholder: (_a2 = rest.placeholder) != null ? _a2 : "Indtast s\xF8geord"
               }
             );
           },
-          children: (result == null ? void 0 : result.length) ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: /* @__PURE__ */ jsxRuntime.jsx("table", { children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: result.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("tr", { onClick: () => handleSelect(item), role: "button", tabIndex: 0, children: resultKeys == null ? void 0 : resultKeys.map((key) => {
-            const value = item[key] ? String(item[key]) : "";
+          children: resultTemplate ? resultTemplate : (result == null ? void 0 : result.length) ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: /* @__PURE__ */ jsxRuntime.jsx("table", { children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: result.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx("tr", { onClick: () => handleSelect(item), role: "button", tabIndex: 0, children: resultKeys == null ? void 0 : resultKeys.map((key) => {
+            const raw = item[key];
+            const cell = raw != null ? String(raw) : "";
             return /* @__PURE__ */ jsxRuntime.jsx(
               "td",
               {
-                style: {
-                  whiteSpace: String(value.length < 10 ? "nowrap" : "")
-                },
-                children: String(item[key])
+                style: { whiteSpace: cell.length < 10 ? "nowrap" : void 0 },
+                children: cell
               },
-              String(key)
+              key
             );
-          }) }, index)) }) }) }) : !searchQuery && !loading ? initialTemplate || /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.resultContainer, children: "Indtast s\xF8geord" }) : loading ? /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: resultKeys == null ? void 0 : resultKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: "100%" }) }, String(key))) }, index)) }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.resultContainer, children: noResultText })
+          }) }, index)) }) }) }) : !searchQuery && !loading ? initialTemplate || /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.resultContainer, children: "Indtast s\xF8geord" }) : loading ? /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: resultKeys == null ? void 0 : resultKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: "100%" }) }, key)) }, index)) }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.resultContainer, children: noResultText })
         }
       );
     }
@@ -130,12 +143,11 @@ const SearchBox = react.forwardRef(function SearchBox2({
       Input.Input,
       {
         ref: internalInputRef,
-        onInput: handleChange,
         icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}),
-        minWidth: width != null ? width : "300px",
+        minWidth: inputWidth != null ? inputWidth : "300px",
         inputSize,
         variant,
-        ...rest,
+        ...inputProps,
         placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
       }
     );
@@ -148,10 +160,11 @@ const SearchBox = react.forwardRef(function SearchBox2({
     initialTemplate,
     searchQuery,
     loading,
-    width,
+    inputWidth,
     inputSize,
     variant,
-    rest
+    inputProps,
+    rest.placeholder
   ]);
   return onButtonClick ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.withButton, children: [
     inputField,

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

@@ -1,17 +1,17 @@
 import React from 'react';
-import { InputVariant } from '../input/Input';
+import { InputVariant } from '@/components/input/Input';
 import { Size } from '@/types/sizes.types';
-export declare const SearchBox: React.ForwardRefExoticComponent<{
-    width?: string;
+type SearchBoxProps<T extends Record<string, unknown>> = {
+    inputWidth?: string | number;
     inputSize?: Size;
     variant?: InputVariant;
-    result?: unknown[] | undefined;
-    resultKeys?: never[] | undefined;
+    result?: T[];
+    resultKeys?: Array<Extract<keyof T, string>>;
     resultTemplate?: React.ReactNode;
     debounce?: boolean;
     debounceMs?: number;
     onSearch?: (query: string) => void;
-    onSelect?: ((item: unknown) => void) | undefined;
+    onSelect?: (item: T) => void;
     displayPopover?: boolean;
     initialTemplate?: React.ReactNode;
     noResultText?: string;
@@ -19,4 +19,7 @@ export declare const SearchBox: React.ForwardRefExoticComponent<{
     loading?: boolean;
     enableHotkey?: boolean;
     onButtonClick?: () => void;
-} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+} & 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 {};