@digdir/designsystemet-react 1.19.0 → 1.20.0

package/dist/cjs/components/search/search-clear.js

@@ -4,7 +4,6 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var button = require('../button/button.js');
-var utilities = require('../Combobox/utilities.js');
 
 /**
  * SearchClear component, used to display a clear button when the search input is not empty.
@@ -15,23 +14,8 @@ var utilities = require('../Combobox/utilities.js');
  *   <SearchClear />
  * </Search>
  */
-const SearchClear = react.forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
-    const handleClear = (e) => {
-        const target = e.target;
-        let input = null;
-        if (target instanceof HTMLElement)
-            input = target.closest('.ds-search')?.querySelector('input');
-        if (!input)
-            throw new Error('Input is missing');
-        /* narrow type to make TS happy */
-        if (!(input instanceof HTMLInputElement))
-            throw new Error('Input is not an input element');
-        e.preventDefault();
-        utilities.setReactInputValue(input, '');
-        input.focus();
-        onClick?.(e);
-    };
-    return (jsxRuntime.jsx(button.Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
+const SearchClear = react.forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', ...rest }, ref) {
+    return (jsxRuntime.jsx(button.Button, { "aria-label": label, ref: ref, type: 'reset', variant: 'tertiary', ...rest }));
 });
 
 exports.SearchClear = SearchClear;

package/dist/cjs/components/search/search-input.js

@@ -13,10 +13,8 @@ var input = require('../input/input.js');
  *   <SearchInput aria-label='Søk' />
  * </Search>
  */
-const SearchInput = react.forwardRef(function SearchInput({ ...rest }, ref) {
-    return (jsxRuntime.jsx(input.Input, { ref: ref, type: 'search', 
-        /* We need an empty placeholder for the clear button to be able to show/hide */
-        placeholder: '', ...rest }));
+const SearchInput = react.forwardRef(function SearchInput({ type = 'search', ...rest }, ref) {
+    return jsxRuntime.jsx(input.Input, { ref: ref, type: type, ...rest });
 });
 
 exports.SearchInput = SearchInput;

package/dist/cjs/components/search/search.js

@@ -2,6 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+require('@digdir/designsystemet-web');
 var cl = require('clsx/lite');
 var react = require('react');
 
@@ -22,7 +23,8 @@ var react = require('react');
  * </Search>
  */
 const Search = react.forwardRef(function Search({ className, ...rest }, ref) {
-    return jsxRuntime.jsx("div", { ref: ref, className: cl('ds-search', className), ...rest });
+    // Using "class" since React does not translate className on custom elements
+    return (jsxRuntime.jsx("ds-suggestion", { ref: ref, class: cl('ds-search', className), ...rest }));
 });
 
 exports.Search = Search;

package/dist/cjs/components/suggestion/suggestion.js

@@ -47,11 +47,8 @@ const Suggestion = react.forwardRef(function Suggestion({ children, className, c
         const beforeChange = (event) => {
             event.preventDefault();
             const multiple = combobox?.multiple;
-            const input = combobox?.control;
             const data = event.detail;
             const nextItem = nextItems(data, selectedItemsRef.current, multiple);
-            if (!multiple && input)
-                input.value = data?.textContent || ''; // Sync input value for single selection
             onSelectedChangeRef.current?.(nextItem || null);
             if (!isControlled)
                 setDefaultItems(sanitizeItems(nextItem));

package/dist/esm/components/search/search-clear.js

@@ -2,7 +2,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Button } from '../button/button.js';
-import { setReactInputValue } from '../Combobox/utilities.js';
 
 /**
  * SearchClear component, used to display a clear button when the search input is not empty.
@@ -13,23 +12,8 @@ import { setReactInputValue } from '../Combobox/utilities.js';
  *   <SearchClear />
  * </Search>
  */
-const SearchClear = forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', onClick, ...rest }, ref) {
-    const handleClear = (e) => {
-        const target = e.target;
-        let input = null;
-        if (target instanceof HTMLElement)
-            input = target.closest('.ds-search')?.querySelector('input');
-        if (!input)
-            throw new Error('Input is missing');
-        /* narrow type to make TS happy */
-        if (!(input instanceof HTMLInputElement))
-            throw new Error('Input is not an input element');
-        e.preventDefault();
-        setReactInputValue(input, '');
-        input.focus();
-        onClick?.(e);
-    };
-    return (jsx(Button, { ref: ref, variant: 'tertiary', type: 'reset', "aria-label": label, onClick: handleClear, icon: true, ...rest }));
+const SearchClear = forwardRef(function SearchClear({ 'aria-label': label = 'Tøm', ...rest }, ref) {
+    return (jsx(Button, { "aria-label": label, ref: ref, type: 'reset', variant: 'tertiary', ...rest }));
 });
 
 export { SearchClear };

package/dist/esm/components/search/search-input.js

@@ -11,10 +11,8 @@ import { Input } from '../input/input.js';
  *   <SearchInput aria-label='Søk' />
  * </Search>
  */
-const SearchInput = forwardRef(function SearchInput({ ...rest }, ref) {
-    return (jsx(Input, { ref: ref, type: 'search', 
-        /* We need an empty placeholder for the clear button to be able to show/hide */
-        placeholder: '', ...rest }));
+const SearchInput = forwardRef(function SearchInput({ type = 'search', ...rest }, ref) {
+    return jsx(Input, { ref: ref, type: type, ...rest });
 });
 
 export { SearchInput };

package/dist/esm/components/search/search.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import '@digdir/designsystemet-web';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
@@ -20,7 +21,8 @@ import { forwardRef } from 'react';
  * </Search>
  */
 const Search = forwardRef(function Search({ className, ...rest }, ref) {
-    return jsx("div", { ref: ref, className: cl('ds-search', className), ...rest });
+    // Using "class" since React does not translate className on custom elements
+    return (jsx("ds-suggestion", { ref: ref, class: cl('ds-search', className), ...rest }));
 });
 
 export { Search };

package/dist/esm/components/suggestion/suggestion.js

@@ -45,11 +45,8 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
         const beforeChange = (event) => {
             event.preventDefault();
             const multiple = combobox?.multiple;
-            const input = combobox?.control;
             const data = event.detail;
             const nextItem = nextItems(data, selectedItemsRef.current, multiple);
-            if (!multiple && input)
-                input.value = data?.textContent || ''; // Sync input value for single selection
             onSelectedChangeRef.current?.(nextItem || null);
             if (!isControlled)
                 setDefaultItems(sanitizeItems(nextItem));

package/dist/types/components/search/search-input.d.ts

@@ -1,6 +1,12 @@
 import { type InputHTMLAttributes } from 'react';
 import type { DefaultProps } from '../../types';
-export type SearchInputProps = DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'type'>;
+export type SearchInputProps = DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'type'> & {
+    /**
+     * Type of input, affects if magnifying glass is shown or not. Use 'text' to hide magnifying glass.
+     * @default 'search'
+     */
+    type?: 'text' | 'search';
+};
 /**
  * SearchInput component, used to display a search input within the Search component.
  *
@@ -9,4 +15,10 @@ export type SearchInputProps = DefaultProps & Omit<InputHTMLAttributes<HTMLInput
  *   <SearchInput aria-label='Søk' />
  * </Search>
  */
-export declare const SearchInput: import("react").ForwardRefExoticComponent<DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "readOnly"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const SearchInput: import("react").ForwardRefExoticComponent<DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "readOnly"> & {
+    /**
+     * Type of input, affects if magnifying glass is shown or not. Use 'text' to hide magnifying glass.
+     * @default 'search'
+     */
+    type?: "text" | "search";
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/components/search/search.d.ts

@@ -1,6 +1,8 @@
+import '@digdir/designsystemet-web';
+import type { DSSuggestionElement } from '@digdir/designsystemet-web';
 import { type HTMLAttributes } from 'react';
 import type { DefaultProps } from '../../types';
-export type SearchProps = DefaultProps & HTMLAttributes<HTMLDivElement>;
+export type SearchProps = DefaultProps & HTMLAttributes<DSSuggestionElement>;
 /**
  * Search component, use to display different variations of a search input
  *
@@ -17,4 +19,4 @@ export type SearchProps = DefaultProps & HTMLAttributes<HTMLDivElement>;
  *   <Search.Clear />
  * </Search>
  */
-export declare const Search: import("react").ForwardRefExoticComponent<DefaultProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Search: import("react").ForwardRefExoticComponent<DefaultProps & HTMLAttributes<DSSuggestionElement> & import("react").RefAttributes<DSSuggestionElement>>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@digdir/designsystemet-react",
   "type": "module",
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": {
@@ -41,16 +41,16 @@
     "@radix-ui/react-slot": "^1.3.3",
     "@tanstack/react-virtual": "^3.14.9",
     "clsx": "^2.1.1",
-    "@digdir/designsystemet-types": "1.19.0",
-    "@digdir/designsystemet-web": "1.19.0"
+    "@digdir/designsystemet-types": "1.20.0",
+    "@digdir/designsystemet-web": "1.20.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "29.0.3",
     "@rollup/plugin-node-resolve": "16.0.3",
-    "@storybook/addon-docs": "10.5.6",
-    "@storybook/addon-vitest": "10.5.6",
-    "@storybook/react-vite": "10.5.6",
-    "@testing-library/jest-dom": "7.0.0",
+    "@storybook/addon-docs": "10.5.7",
+    "@storybook/addon-vitest": "10.5.7",
+    "@storybook/react-vite": "10.5.7",
+    "@testing-library/jest-dom": "7.0.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.3",
     "@types/react": "19.2.18",
@@ -61,9 +61,9 @@
     "rimraf": "6.1.3",
     "rollup": "4.62.4",
     "rollup-plugin-copy": "3.5.0",
-    "storybook": "10.5.6",
+    "storybook": "10.5.7",
     "typescript": "6.0.3",
-    "@digdir/designsystemet-css": "^1.19.0"
+    "@digdir/designsystemet-css": "^1.20.0"
   },
   "scripts": {
     "build": "pnpm run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",