@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/components/popover/Popover.js

@@ -1,126 +1,118 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 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 containerRef = useRef(null);
-  const contentRef = useRef(null);
-  const computeAndSetPosition = useCallback(
-    (show) => {
-      const container = containerRef.current;
-      const content = contentRef.current;
-      if (!container || !content) return;
-      const prevVis = content.style.visibility;
-      const prevDisp = content.style.display;
-      content.style.visibility = "hidden";
-      content.style.display = "block";
-      const triggerRect = container.getBoundingClientRect();
-      const contentWidth = content.offsetWidth;
-      const contentHeight = content.offsetHeight;
-      content.style.visibility = prevVis;
-      content.style.display = prevDisp;
-      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 >= contentWidth + edgeBuffer;
-      const placeLeftOfRightEdge = spaceLeft >= 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, visible: show });
-    },
-    [edgeBuffer, viewportPadding]
-  );
-  const openPopover = useCallback(
-    (e) => {
-      if (pos.visible) {
-        setPos((p) => ({ ...p, visible: false }));
-        return;
-      }
-      computeAndSetPosition(true);
-      e == null ? void 0 : e.stopPropagation();
-    },
-    [pos.visible, computeAndSetPosition]
-  );
-  const closePopover = useCallback(() => {
-    setPos((p) => ({ ...p, visible: false }));
-  }, []);
-  useImperativeHandle(
-    ref,
-    () => ({
-      close: closePopover,
-      open: () => computeAndSetPosition(true),
-      isOpen: () => !!pos.visible
-    }),
-    [closePopover, computeAndSetPosition, pos.visible]
-  );
-  useEffect(() => {
-    if (!pos.visible) return;
-    const handleClickOutside = (e) => {
-      if (containerRef.current && contentRef.current && !containerRef.current.contains(e.target) && !contentRef.current.contains(e.target)) {
-        closePopover();
-      }
-    };
-    const handleEscape = (e) => {
-      if (e.key === "Escape") closePopover();
-    };
-    const handleReposition = () => computeAndSetPosition(true);
-    document.addEventListener("click", handleClickOutside);
-    document.addEventListener("keydown", handleEscape, true);
-    window.addEventListener("resize", handleReposition);
-    window.addEventListener("scroll", handleReposition, true);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape, true);
-      window.removeEventListener("resize", handleReposition);
-      window.removeEventListener("scroll", handleReposition, true);
-    };
-  }, [pos.visible, closePopover, computeAndSetPosition]);
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, ref: containerRef, children: [
-    Trigger(openPopover, pos.visible ? /* @__PURE__ */ jsx(ChevronUp, { size: 20 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 20 })),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: contentRef,
-        className: styles.content,
-        style: {
-          position: "fixed",
-          top: pos.top,
-          left: pos.left,
-          visibility: pos.visible ? "visible" : "hidden",
-          minWidth,
-          maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
-          maxHeight: `calc(100vh - ${viewportPadding * 2}px)`,
-          overflow: "auto"
-        },
-        role: "dialog",
-        "aria-hidden": !pos.visible,
-        children
-      }
-    )
-  ] });
+export const Popover = forwardRef(function Popover({ trigger: Trigger, children, minWidth = '200px', matchTriggerWidth = true, viewportPadding = 8, edgeBuffer = 100, dataCy, }, ref) {
+    const [pos, setPos] = useState({ top: 0, left: 0, width: 0, visible: false });
+    const containerRef = useRef(null);
+    const contentRef = useRef(null);
+    const computeAndSetPosition = useCallback((show) => {
+        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';
+        content.style.minWidth = minWidth;
+        content.style.width = 'auto';
+        const minWidthPx = content.offsetWidth;
+        const desiredWidthPx = Math.max(matchTriggerWidth ? triggerRect.width : 0, minWidthPx);
+        // Now apply desired width and re-measure final size (height may depend on width).
+        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);
+        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 >= contentWidth + edgeBuffer;
+        const placeLeftOfRightEdge = spaceLeft >= contentWidth + edgeBuffer;
+        let rawLeft;
+        if (placeRightOfLeftEdge) {
+            rawLeft = triggerRect.left; // align left edges
+        }
+        else if (placeLeftOfRightEdge) {
+            rawLeft = triggerRect.right - contentWidth; // align right edges
+        }
+        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, width: desiredWidthPx, visible: show });
+    }, [edgeBuffer, viewportPadding, minWidth, matchTriggerWidth]);
+    const openPopover = useCallback((e) => {
+        if (pos.visible) {
+            setPos(p => ({ ...p, visible: false }));
+            return;
+        }
+        computeAndSetPosition(true);
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+    }, [pos.visible, computeAndSetPosition]);
+    const closePopover = useCallback(() => {
+        setPos(p => ({ ...p, visible: false }));
+    }, []);
+    useImperativeHandle(ref, () => ({
+        close: closePopover,
+        open: () => computeAndSetPosition(true),
+        isOpen: () => !!pos.visible,
+    }), [closePopover, computeAndSetPosition, pos.visible]);
+    useEffect(() => {
+        if (!pos.visible)
+            return;
+        const handleClickOutside = (e) => {
+            if (containerRef.current &&
+                contentRef.current &&
+                !containerRef.current.contains(e.target) &&
+                !contentRef.current.contains(e.target)) {
+                closePopover();
+            }
+        };
+        const handleEscape = (e) => {
+            if (e.key === 'Escape')
+                closePopover();
+        };
+        const handleReposition = () => computeAndSetPosition(true);
+        document.addEventListener('click', handleClickOutside);
+        document.addEventListener('keydown', handleEscape, true);
+        window.addEventListener('resize', handleReposition);
+        window.addEventListener('scroll', handleReposition, true);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+            document.removeEventListener('keydown', handleEscape, true);
+            window.removeEventListener('resize', handleReposition);
+            window.removeEventListener('scroll', handleReposition, true);
+        };
+    }, [pos.visible, closePopover, computeAndSetPosition]);
+    return (_jsxs("div", { className: styles.container, ref: containerRef, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'popover-content', children: [Trigger(openPopover, pos.visible ? _jsx(ChevronUp, { size: 20 }) : _jsx(ChevronDown, { size: 20 })), _jsx("div", { ref: contentRef, className: styles.content, style: {
+                    top: pos.top,
+                    left: pos.left,
+                    visibility: pos.visible ? 'visible' : 'hidden',
+                    minWidth: pos.width ? `${pos.width}px` : minWidth,
+                    width: pos.width ? `${pos.width}px` : undefined,
+                    maxWidth: `calc(100vw - ${viewportPadding * 2}px)`,
+                    maxHeight: `clamp(100px, calc(100vh - ${viewportPadding * 2}px), 400px)`,
+                    overflow: 'auto',
+                }, role: "dialog", "aria-hidden": !pos.visible, children: typeof children === 'function'
+                    ? children(closePopover)
+                    : children })] }));
 });
-Popover.displayName = "Popover";
-
-export { Popover };
+Popover.displayName = 'Popover';

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.d.ts

@@ -1,17 +1,17 @@
 import React from 'react';
-import { InputVariant } from '../input/Input';
-import { Size } from '@/types/sizes.types';
-export declare const SearchBox: React.ForwardRefExoticComponent<{
-    width?: string;
+import { InputVariant } from '../../components/forms/input/Input';
+import { Size } from '../../types/sizes.types';
+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 {};

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

@@ -1,156 +1,119 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useEffect, useMemo } from 'react';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Search } from 'lucide-react';
-import { Input } from '../input/Input';
-import { Menu } from '../menu/Menu';
-import { Popover } from '../popover/Popover';
-import { Button } from '../button/Button';
-import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '../../components/button/Button';
+import { Input } from '../../components/forms/input/Input';
+import { Menu } from '../../components/menu/Menu';
+import { Popover } from '../../components/popover/Popover';
+import { SkeletonLoaderItem } from '../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
 import styles from './SearchBox.module.css';
-
-const SearchBox = forwardRef(function SearchBox2({
-  width,
-  inputSize,
-  variant,
-  result,
-  debounce = true,
-  debounceMs = 800,
-  onSearch,
-  onSelect,
-  displayPopover,
-  resultKeys,
-  resultTemplate,
-  initialTemplate,
-  popoverMinWidth = "500px",
-  noResultText = "Ingen resultater",
-  loading,
-  enableHotkey = true,
-  onButtonClick,
-  ...rest
-}, ref) {
-  const [query, setQuery] = useState("");
-  const [searchQuery, setSearchQuery] = useState("");
-  const popoverRef = useRef(null);
-  const internalInputRef = useRef(null);
-  useEffect(() => {
-    if (typeof ref === "function") {
-      ref(internalInputRef.current);
-    } else if (ref) {
-      ref.current = internalInputRef.current;
-    }
-  }, [ref]);
-  useEffect(() => {
-    if (!onSearch) return;
-    if (debounce) {
-      const handler = setTimeout(() => {
-        setSearchQuery(query);
-        onSearch(query);
-      }, debounceMs);
-      return () => clearTimeout(handler);
-    } else {
-      onSearch(query);
-    }
-  }, [query, onSearch, debounce]);
-  useEffect(() => {
-    function handleKeyDown(event) {
-      var _a;
-      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-        (_a = internalInputRef.current) == null ? void 0 : _a.focus();
-      }
-    }
-    if (enableHotkey) {
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
-    }
-  }, [enableHotkey]);
-  const handleChange = (e) => {
-    setQuery(e.target.value);
-  };
-  function handleSelect(item) {
-    onSelect == null ? void 0 : onSelect(item);
-    reset();
-  }
-  function reset() {
-    var _a;
-    setQuery("");
-    setSearchQuery("");
-    (_a = popoverRef.current) == null ? void 0 : _a.close();
-  }
-  rest.value = query;
-  rest.onChange = handleChange;
-  const inputField = useMemo(() => {
-    var _a;
-    if (displayPopover) {
-      return /* @__PURE__ */ jsx(
-        Popover,
-        {
-          ref: popoverRef,
-          minWidth: popoverMinWidth,
-          trigger: (event) => {
-            var _a2;
-            return /* @__PURE__ */ jsx(
-              Input,
-              {
-                ref: internalInputRef,
-                onInput: handleChange,
-                onFocusCapture: event,
-                onClick: event,
-                minWidth: width != null ? width : "300px",
-                icon: /* @__PURE__ */ jsx(Search, {}),
-                inputSize,
-                ...rest,
-                placeholder: (_a2 = rest.placeholder) != null ? _a2 : "Indtast s\xF8geord"
-              }
-            );
-          },
-          children: (result == null ? void 0 : result.length) ? /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: result.map((item, index) => /* @__PURE__ */ jsx("tr", { onClick: () => handleSelect(item), role: "button", tabIndex: 0, children: resultKeys == null ? void 0 : resultKeys.map((key) => {
-            const value = item[key] ? String(item[key]) : "";
-            return /* @__PURE__ */ jsx(
-              "td",
-              {
-                style: {
-                  whiteSpace: String(value.length < 10 ? "nowrap" : "")
-                },
-                children: String(item[key])
-              },
-              String(key)
-            );
-          }) }, index)) }) }) }) : !searchQuery && !loading ? initialTemplate || /* @__PURE__ */ jsx("div", { className: styles.resultContainer, children: "Indtast s\xF8geord" }) : loading ? /* @__PURE__ */ jsx("table", { style: { width: "100%" }, children: /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsx("tr", { children: resultKeys == null ? void 0 : resultKeys.map((key) => /* @__PURE__ */ jsx("td", { style: { padding: "8px" }, children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }, String(key))) }, index)) }) }) : /* @__PURE__ */ jsx("div", { className: styles.resultContainer, children: noResultText })
+export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, inputSize, variant, result, debounce = true, debounceMs = 800, onSearch, onSelect, displayPopover, resultKeys, resultTemplate, initialTemplate, popoverMinWidth = '500px', noResultText = 'Ingen resultater', loading, enableHotkey = true, onButtonClick, value, onChange, ...rest }, ref) {
+    const isControlled = value !== undefined;
+    // What the user sees immediately in the textbox
+    const [draft, setDraft] = useState(() => (isControlled ? String(value !== null && value !== void 0 ? value : '') : ''));
+    // Used only for UI state ("Indtast søgeord" vs results/no results)
+    const [searchQuery, setSearchQuery] = useState('');
+    const popoverRef = useRef(null);
+    const internalInputRef = useRef(null);
+    // Forward ref to parent
+    useEffect(() => {
+        if (typeof ref === 'function') {
+            ref(internalInputRef.current);
+        }
+        else if (ref) {
+            ;
+            ref.current = internalInputRef.current;
         }
-      );
+    }, [ref]);
+    // If parent changes value (reset/select/navigation), update draft shown in the input
+    useEffect(() => {
+        if (!isControlled)
+            return;
+        const next = String(value !== null && value !== void 0 ? value : '');
+        if (next !== draft)
+            setDraft(next);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    // Debounced search side-effect (never debounce the displayed input)
+    useEffect(() => {
+        if (!onSearch)
+            return;
+        if (!debounce) {
+            setSearchQuery(draft);
+            onSearch(draft);
+            return;
+        }
+        const handler = setTimeout(() => {
+            setSearchQuery(draft);
+            onSearch(draft);
+        }, debounceMs);
+        return () => clearTimeout(handler);
+    }, [draft, onSearch, debounce, debounceMs]);
+    // Keyboard shortcut (Cmd/Ctrl + K)
+    useEffect(() => {
+        function handleKeyDown(event) {
+            var _a;
+            if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                (_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+        if (enableHotkey) {
+            window.addEventListener('keydown', handleKeyDown);
+            return () => window.removeEventListener('keydown', handleKeyDown);
+        }
+    }, [enableHotkey]);
+    const handleChange = React.useCallback((e) => {
+        setDraft(e.target.value); // immediate UI update
+        onChange === null || onChange === void 0 ? void 0 : onChange(e); // allow parent to react if it wants (optional)
+    }, [onChange]);
+    const handleSelect = React.useCallback((item) => {
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
+        reset();
+    }, [onSelect]);
+    function reset() {
+        var _a;
+        setDraft(''); // always clear UI immediately
+        setSearchQuery('');
+        (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
     }
-    return /* @__PURE__ */ jsx(
-      Input,
-      {
-        ref: internalInputRef,
-        onInput: handleChange,
-        icon: /* @__PURE__ */ jsx(Search, {}),
-        minWidth: width != null ? width : "300px",
+    // Props for the input are now created inside useMemo to avoid unnecessary dependency changes
+    const inputField = useMemo(() => {
+        var _a;
+        const inputProps = {
+            ...rest,
+            value: draft,
+            onChange: handleChange,
+        };
+        if (displayPopover) {
+            return (_jsx(Popover, { ref: popoverRef, minWidth: popoverMinWidth, trigger: event => {
+                    var _a;
+                    return (_jsx(Input, { ref: internalInputRef, onFocusCapture: event, onClick: event, minWidth: inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px', width: inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px', icon: _jsx(Search, {}), inputSize: inputSize, variant: variant, ...inputProps, placeholder: (_a = rest.placeholder) !== null && _a !== void 0 ? _a : 'Indtast søgeord' }));
+                }, children: resultTemplate ? (resultTemplate) : (result === null || result === void 0 ? void 0 : result.length) ? (_jsx(Menu, { children: _jsx("table", { children: _jsx("tbody", { children: result.map((item, index) => (_jsx("tr", { onClick: () => handleSelect(item), role: "button", tabIndex: 0, children: resultKeys === null || resultKeys === void 0 ? void 0 : resultKeys.map(key => {
+                                    const raw = item[key];
+                                    const cell = raw != null ? String(raw) : '';
+                                    return (_jsx("td", { style: { whiteSpace: cell.length < 10 ? 'nowrap' : undefined }, children: cell }, key));
+                                }) }, index))) }) }) })) : !searchQuery && !loading ? (initialTemplate || _jsx("div", { className: styles.resultContainer, children: "Indtast s\u00F8geord" })) : loading ? (_jsx("table", { style: { width: '100%' }, children: _jsx("tbody", { children: Array.from({ length: 5 }).map((_, index) => (_jsx("tr", { children: resultKeys === null || resultKeys === void 0 ? void 0 : resultKeys.map(key => (_jsx("td", { style: { padding: '8px' }, children: _jsx(SkeletonLoaderItem, { height: 20, width: "100%" }) }, key))) }, index))) }) })) : (_jsx("div", { className: styles.resultContainer, children: noResultText })) }));
+        }
+        return (_jsx(Input, { ref: internalInputRef, icon: _jsx(Search, {}), minWidth: inputWidth !== null && inputWidth !== void 0 ? inputWidth : '300px', inputSize: inputSize, variant: variant, ...inputProps, placeholder: (_a = rest.placeholder) !== null && _a !== void 0 ? _a : 'Indtast søgeord' }));
+    }, [
+        rest,
+        draft,
+        handleChange,
+        displayPopover,
+        inputWidth,
         inputSize,
         variant,
-        ...rest,
-        placeholder: (_a = rest.placeholder) != null ? _a : "Indtast s\xF8geord"
-      }
-    );
-  }, [
-    displayPopover,
-    popoverMinWidth,
-    result,
-    resultKeys,
-    resultTemplate,
-    initialTemplate,
-    searchQuery,
-    loading,
-    width,
-    inputSize,
-    variant,
-    rest
-  ]);
-  return onButtonClick ? /* @__PURE__ */ jsxs("div", { className: styles.withButton, children: [
-    inputField,
-    /* @__PURE__ */ jsx(Button, { variant: "outlined", icon: /* @__PURE__ */ jsx(Search, {}), onClick: onButtonClick })
-  ] }) : /* @__PURE__ */ jsx("div", { children: inputField });
+        popoverMinWidth,
+        resultTemplate,
+        result,
+        searchQuery,
+        loading,
+        initialTemplate,
+        noResultText,
+        resultKeys,
+        handleSelect,
+    ]);
+    return onButtonClick ? (_jsxs("div", { className: styles.withButton, children: [inputField, _jsx(Button, { variant: "outlined", icon: _jsx(Search, {}), onClick: onButtonClick })] })) : (_jsx("div", { children: inputField }));
 });
-
-export { SearchBox };

package/dist/components/search-box/SearchBox.module.css

@@ -17,4 +17,3 @@
 .withButton button {
   border-radius: 0 var(--border-radius-default) var(--border-radius-default) 0;
 }
-

package/dist/components/segmented-progress-bar/SegmentedProgressBar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
+import { TooltipPlacement } from '../../components/overlay/tooltip/TooltipProvider';
 import type { Severity } from '../../constants/severity.types';
-import { type TooltipPlacement } from '../tooltip/Tooltip';
 export type Segment = {
     value: number;
     severity?: Severity;