@sikt/sds-combobox 5.1.0 → 5.2.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [5.2.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@5.1.0...@sikt/sds-combobox@5.2.0) (2026-03-20)
+
+### Features
+
+- **combobox:** add controlled state ([2301285](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/2301285ae073caa1132d0ea71e8759827e3fd75a))
+
+### Bug Fixes
+
+- **combobox:** hydration warnings on server side render ([95411b8](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/95411b8e489dcceee6bb05c09b856fbc57830ef2))
+- update @sikt/sds packages ([cf35fab](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/cf35fabce72896bf98f10e2dc13c2c8015e239e7))
+
 ## [5.1.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@5.0.1...@sikt/sds-combobox@5.1.0) (2026-03-12)
 
 ### Features

package/dist/index.d.mts

@@ -1,7 +1,11 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode, OptionHTMLAttributes, InputHTMLAttributes, HTMLAttributes } from 'react';
 import { UHTMLComboboxElement } from '@u-elements/u-combobox';
-import { HTMLAttributes, ReactNode, OptionHTMLAttributes, InputHTMLAttributes } from 'react';
 
+interface ComboboxItem {
+    label: string;
+    value: string;
+}
 interface ComboboxOptionGroupProps {
     /**
      * Label for the section heading.
@@ -13,7 +17,10 @@ interface ComboboxOptionGroupProps {
     options: OptionHTMLAttributes<HTMLOptionElement>[];
 }
 type ComboboxOption = OptionHTMLAttributes<HTMLOptionElement> | ComboboxOptionGroupProps;
-interface ComboboxBaseProps extends Omit<HTMLAttributes<UHTMLComboboxElement>, "onChange"> {
+type ComboboxValue<T extends {
+    multiple: boolean;
+}> = T["multiple"] extends true ? (string | ComboboxItem)[] : string | ComboboxItem;
+type ComboboxBaseProps = {
     className?: string;
     /**
      * Text to show when the input is invalid to help the user enter correct value. This also sets `aria-invalid` &  `aria-errormessage`.
@@ -28,27 +35,14 @@ interface ComboboxBaseProps extends Omit<HTMLAttributes<UHTMLComboboxElement>, "
      * - **label** Text for the option label or section heading.
      * - **value** The value submitted with the form (options only).
      * - **selected** Whether the option is initially selected (options only).
-     * - **options** Grouped options within a section (sections only).
      */
     options: ComboboxOption[];
-    /**
-     * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.
-     *
-     * @default undefined
-     */
-    multiple?: boolean;
     /**
      * Name of the form control. Submitted with the form as part of a name/value pair.
      *
      * @default undefined
      */
     name?: string;
-    /**
-     * Function when a user changes the selected option.
-     *
-     * @default undefined
-     */
-    onChange?: (event: CustomEvent<HTMLDataElement>, newValue: OptionHTMLAttributes<HTMLOptionElement>[]) => void;
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
     /**
      * Sets language for accessible texts.
@@ -56,8 +50,7 @@ interface ComboboxBaseProps extends Omit<HTMLAttributes<UHTMLComboboxElement>, "
      * @default "nb"
      */
     lang?: "nb" | "nn" | "en";
-}
-type ComboboxProps = ComboboxBaseProps & ({
+} & Omit<HTMLAttributes<UHTMLComboboxElement>, "defaultValue" | "onChange"> & ({
     label: NonNullable<ReactNode>;
     "aria-labelledby"?: never;
 } | {
@@ -67,9 +60,41 @@ type ComboboxProps = ComboboxBaseProps & ({
      */
     "aria-labelledby": string;
 });
-declare const Combobox: {
-    ({ className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, multiple, options, name, onChange, inputProps, lang, ...rest }: ComboboxProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
+interface ComboboxValueProps<T extends {
+    multiple: boolean;
+}> {
+    /**
+     * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.
+     *
+     * @default false
+     */
+    multiple?: T["multiple"];
+    /**
+     * The selected item of the Combobox.
+     *
+     * If `label` and `value` are the same, each item can be a `string`. Otherwise, each item must be a `ComboboxItem`.
+     *
+     * Using this makes the component controlled and it must be used in combination with `onSelectedChange`.
+     */
+    selected?: ComboboxValue<T> | null;
+    /**
+     * Default selected item when uncontrolled
+     */
+    defaultSelected?: ComboboxValue<T>;
+    /**
+     * Callback when selected items changes
+     */
+    onSelectedChange?: (value: T["multiple"] extends true ? ComboboxItem[] : ComboboxItem | null) => void;
+}
+type ComboboxSingleProps = ComboboxBaseProps & ComboboxValueProps<{
+    multiple: false;
+}>;
+type ComboboxMultipleProps = ComboboxBaseProps & ComboboxValueProps<{
+    multiple: true;
+}> & {
+    multiple: true;
 };
+type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
+declare const Combobox: react.ForwardRefExoticComponent<ComboboxProps & react.RefAttributes<UHTMLComboboxElement>>;
 
-export { Combobox, type ComboboxOption, type ComboboxOptionGroupProps, type ComboboxProps };
+export { Combobox, type ComboboxItem, type ComboboxMultipleProps, type ComboboxOption, type ComboboxOptionGroupProps, type ComboboxProps, type ComboboxSingleProps };

package/dist/index.d.ts

@@ -1,7 +1,11 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode, OptionHTMLAttributes, InputHTMLAttributes, HTMLAttributes } from 'react';
 import { UHTMLComboboxElement } from '@u-elements/u-combobox';
-import { HTMLAttributes, ReactNode, OptionHTMLAttributes, InputHTMLAttributes } from 'react';
 
+interface ComboboxItem {
+    label: string;
+    value: string;
+}
 interface ComboboxOptionGroupProps {
     /**
      * Label for the section heading.
@@ -13,7 +17,10 @@ interface ComboboxOptionGroupProps {
     options: OptionHTMLAttributes<HTMLOptionElement>[];
 }
 type ComboboxOption = OptionHTMLAttributes<HTMLOptionElement> | ComboboxOptionGroupProps;
-interface ComboboxBaseProps extends Omit<HTMLAttributes<UHTMLComboboxElement>, "onChange"> {
+type ComboboxValue<T extends {
+    multiple: boolean;
+}> = T["multiple"] extends true ? (string | ComboboxItem)[] : string | ComboboxItem;
+type ComboboxBaseProps = {
     className?: string;
     /**
      * Text to show when the input is invalid to help the user enter correct value. This also sets `aria-invalid` &  `aria-errormessage`.
@@ -28,27 +35,14 @@ interface ComboboxBaseProps extends Omit<HTMLAttributes<UHTMLComboboxElement>, "
      * - **label** Text for the option label or section heading.
      * - **value** The value submitted with the form (options only).
      * - **selected** Whether the option is initially selected (options only).
-     * - **options** Grouped options within a section (sections only).
      */
     options: ComboboxOption[];
-    /**
-     * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.
-     *
-     * @default undefined
-     */
-    multiple?: boolean;
     /**
      * Name of the form control. Submitted with the form as part of a name/value pair.
      *
      * @default undefined
      */
     name?: string;
-    /**
-     * Function when a user changes the selected option.
-     *
-     * @default undefined
-     */
-    onChange?: (event: CustomEvent<HTMLDataElement>, newValue: OptionHTMLAttributes<HTMLOptionElement>[]) => void;
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
     /**
      * Sets language for accessible texts.
@@ -56,8 +50,7 @@ interface ComboboxBaseProps extends Omit<HTMLAttributes<UHTMLComboboxElement>, "
      * @default "nb"
      */
     lang?: "nb" | "nn" | "en";
-}
-type ComboboxProps = ComboboxBaseProps & ({
+} & Omit<HTMLAttributes<UHTMLComboboxElement>, "defaultValue" | "onChange"> & ({
     label: NonNullable<ReactNode>;
     "aria-labelledby"?: never;
 } | {
@@ -67,9 +60,41 @@ type ComboboxProps = ComboboxBaseProps & ({
      */
     "aria-labelledby": string;
 });
-declare const Combobox: {
-    ({ className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, multiple, options, name, onChange, inputProps, lang, ...rest }: ComboboxProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
+interface ComboboxValueProps<T extends {
+    multiple: boolean;
+}> {
+    /**
+     * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.
+     *
+     * @default false
+     */
+    multiple?: T["multiple"];
+    /**
+     * The selected item of the Combobox.
+     *
+     * If `label` and `value` are the same, each item can be a `string`. Otherwise, each item must be a `ComboboxItem`.
+     *
+     * Using this makes the component controlled and it must be used in combination with `onSelectedChange`.
+     */
+    selected?: ComboboxValue<T> | null;
+    /**
+     * Default selected item when uncontrolled
+     */
+    defaultSelected?: ComboboxValue<T>;
+    /**
+     * Callback when selected items changes
+     */
+    onSelectedChange?: (value: T["multiple"] extends true ? ComboboxItem[] : ComboboxItem | null) => void;
+}
+type ComboboxSingleProps = ComboboxBaseProps & ComboboxValueProps<{
+    multiple: false;
+}>;
+type ComboboxMultipleProps = ComboboxBaseProps & ComboboxValueProps<{
+    multiple: true;
+}> & {
+    multiple: true;
 };
+type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
+declare const Combobox: react.ForwardRefExoticComponent<ComboboxProps & react.RefAttributes<UHTMLComboboxElement>>;
 
-export { Combobox, type ComboboxOption, type ComboboxOptionGroupProps, type ComboboxProps };
+export { Combobox, type ComboboxItem, type ComboboxMultipleProps, type ComboboxOption, type ComboboxOptionGroupProps, type ComboboxProps, type ComboboxSingleProps };

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("@sikt/sds-core"),a=require("@sikt/sds-form"),r=require("@sikt/sds-icons"),t=require("clsx/lite"),s=require("react");require("@u-elements/u-combobox"),require("@u-elements/u-datalist");var l=require("react/jsx-runtime"),o=Object.defineProperty,d=Object.defineProperties,n=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable,b=(e,a,r)=>a in e?o(e,a,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[a]=r,m=(e,a)=>{for(var r in a||(a={}))c.call(a,r)&&b(e,r,a[r]);if(i)for(var r of i(a))u.call(a,r)&&b(e,r,a[r]);return e},f=(e,a)=>d(e,n(a)),v=(e,a)=>{var r={};for(var t in e)c.call(e,t)&&a.indexOf(t)<0&&(r[t]=e[t]);if(null!=e&&i)for(var t of i(e))a.indexOf(t)<0&&u.call(e,t)&&(r[t]=e[t]);return r},p=e=>"options"in e&&Array.isArray(e.options),x=e=>e.flatMap(e=>p(e)?e.options:[e]),j={nb:{"data-sr-added":"Lagt til","data-sr-removed":"Fjernet","data-sr-remove":"Trykk for å fjerne","data-sr-empty":"Ingen valgte","data-sr-found":"Naviger til venstre for å finne %d valgte","data-sr-invalid":"Ugyldig verdi","data-sr-of":"av","data-sr-singular":"%d treff","data-sr-plural":"%d treff","data-sr-clear":"Fjern tekst"},nn:{"data-sr-added":"Lagt til","data-sr-removed":"Fjerna","data-sr-remove":"Trykk for å fjerne","data-sr-empty":"Ingen valde","data-sr-found":"Naviger til venstre for å finne %d valde","data-sr-invalid":"Ugyldig verdi","data-sr-of":"av","data-sr-singular":"%d treff","data-sr-plural":"%d treff","data-sr-clear":"Fjern tekst"},en:{"data-sr-added":"Added","data-sr-removed":"Removed","data-sr-remove":"Press to remove","data-sr-empty":"No selected","data-sr-found":"Navigate left to find %d selected","data-sr-invalid":"Invalid value","data-sr-of":"of","data-sr-singular":"%d hit","data-sr-plural":"%d hits","data-sr-clear":"Clear text"}},g=e=>{var a=e,{label:r,value:t}=a,s=v(a,["label","value"]);return l.jsx("u-option",f(m({className:"sds-combobox__datalist-option",value:t},s),{children:r}))},h=({label:e,options:a})=>{const r=s.useId();return l.jsxs("div",{className:"sds-combobox__datalist-group",role:"group",children:[l.jsx("span",{className:"sds-combobox__datalist-group-label",id:r,children:e}),a.map(e=>{var a;return l.jsx(g,m({"aria-describedby":r},e),null==(a=e.value)?void 0:a.toString())})]})},y=o=>{var d=o,{className:n,errorText:i,helpText:c,label:u,"aria-labelledby":b,multiple:y=!1,options:_,name:N,onChange:O,inputProps:k,lang:I="nb"}=d,q=v(d,["className","errorText","helpText","label","aria-labelledby","multiple","options","name","onChange","inputProps","lang"]);const P=x(_),T=s.useRef(null),C=s.useRef(P),E=s.useRef(O),S=s.useRef(!1),w=s.useId(),R="".concat(w,"-error-text"),F="".concat(w,"-help-text"),L="".concat(w,"-list"),A=(e=>j[e])(I),[D,H]=s.useState(()=>P.filter(e=>e.selected));return s.useEffect(()=>{const e=x(_);if(C.current=e,0===D.length&&!S.current){const a=e.filter(e=>e.selected);a.length>0&&H(a)}},[_,D.length]),s.useEffect(()=>{E.current=O},[O]),s.useEffect(()=>{const e=T.current,a=e=>{var a;e.preventDefault(),S.current=!0;const r=C.current,t=r.findIndex(a=>a.value===e.detail.value);if(-1===t)return;const s=r[t];e.detail.isConnected?s.selected=!0:delete s.selected,null==(a=E.current)||a.call(E,e,r)};return null==e||e.addEventListener("comboboxafterselect",a),()=>{null==e||e.removeEventListener("comboboxafterselect",a)}},[]),l.jsxs("div",{className:t.clsx("sds-form-field",i&&"sds-form-field--error","sds-combobox",i&&"sds-combobox--invalid",n),children:[l.jsxs("div",{className:"sds-form-field__label-wrapper",children:[void 0!==u&&l.jsx(a.Label,{text:u,error:Boolean(i),htmlFor:w}),l.jsxs("u-combobox",f(m(m({className:"sds-combobox__combobox","data-multiple":y,ref:T},A),q),{children:[D.map(e=>{var a;return l.jsx("data",{value:e.value,children:e.label},null==(a=e.value)?void 0:a.toString())}),l.jsx("input",f(m({className:"sds-combobox__input",id:w,list:L},k),{"aria-labelledby":b})),l.jsxs("del",{className:"sds-combobox__button",children:[l.jsx(e.ScreenReaderOnly,{children:A["data-sr-clear"]}),l.jsx("span",{className:"sds-combobox__button-icon",children:l.jsx(r.CancelIcon,{})})]}),l.jsx("span",{className:"sds-combobox__button",children:l.jsx("span",{className:"sds-combobox__button-icon",children:l.jsx(r.ExpandShowAltIcon,{})})}),l.jsx("u-datalist",{className:"sds-combobox__datalist",id:L,"data-sr-singular":A["data-sr-singular"],"data-sr-plural":A["data-sr-plural"],children:_.map(e=>{var a;return p(e)?l.jsx(h,{label:e.label,options:e.options},e.label):l.jsx(g,m({},e),null==(a=e.value)?void 0:a.toString())})}),!!N&&l.jsx("select",{name:N,"aria-hidden":!0,hidden:!0})]}))]}),c&&l.jsx(a.HelpText,{id:F,children:c}),i&&l.jsx(a.HelpText,{id:R,error:!0,children:i})]})};y.displayName="Combobox",exports.Combobox=y;//# sourceMappingURL=index.js.map
+"use strict";var e=require("@sikt/sds-form"),r=require("clsx/lite"),a=require("react");require("@u-elements/u-combobox"),require("@u-elements/u-datalist");var t=require("@sikt/sds-core"),l=require("@sikt/sds-icons"),s=require("react/jsx-runtime"),n=Object.defineProperty,o=Object.defineProperties,d=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,u=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,b=(e,r,a)=>r in e?n(e,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[r]=a,f=(e,r)=>{for(var a in r||(r={}))u.call(r,a)&&b(e,a,r[a]);if(i)for(var a of i(r))c.call(r,a)&&b(e,a,r[a]);return e},p=(e,r)=>o(e,d(r)),v=(e,r)=>{var a={};for(var t in e)u.call(e,t)&&r.indexOf(t)<0&&(a[t]=e[t]);if(null!=e&&i)for(var t of i(e))r.indexOf(t)<0&&c.call(e,t)&&(a[t]=e[t]);return a},m=({clearText:e})=>s.jsxs("del",{suppressHydrationWarning:!0,className:"sds-combobox__button",children:[s.jsx(t.ScreenReaderOnly,{children:e}),s.jsx("span",{className:"sds-combobox__button-icon",children:s.jsx(l.CancelIcon,{})})]}),x=()=>s.jsx("span",{className:"sds-combobox__button",children:s.jsx("span",{className:"sds-combobox__button-icon",children:s.jsx(l.ExpandShowAltIcon,{})})}),j=e=>{var r=e,{label:a,value:t}=r,l=v(r,["label","value"]);return s.jsx("u-option",p(f({className:"sds-combobox__datalist-option",value:t},l),{children:a}))},g=({label:e,options:r})=>{const t=a.useId();return s.jsxs("div",{className:"sds-combobox__datalist-group",role:"group",children:[s.jsx("span",{className:"sds-combobox__datalist-group-label",id:t,children:e}),r.map(e=>{var r;return s.jsx(j,f({"aria-describedby":t},e),null==(r=e.value)?void 0:r.toString())})]})},y=e=>"options"in e&&Array.isArray(e.options),h=(e=[])=>null==e?[]:"string"==typeof e?[{label:e,value:e}]:Array.isArray(e)?e.map(e=>"string"==typeof e?{label:e,value:e}:e):[e];var _={nb:{"data-sr-added":"Lagt til","data-sr-removed":"Fjernet","data-sr-remove":"Trykk for å fjerne","data-sr-empty":"Ingen valgte","data-sr-found":"Naviger til venstre for å finne %d valgte","data-sr-invalid":"Ugyldig verdi","data-sr-of":"av","data-sr-singular":"%d treff","data-sr-plural":"%d treff","data-sr-clear":"Fjern tekst"},nn:{"data-sr-added":"Lagt til","data-sr-removed":"Fjerna","data-sr-remove":"Trykk for å fjerne","data-sr-empty":"Ingen valde","data-sr-found":"Naviger til venstre for å finne %d valde","data-sr-invalid":"Ugyldig verdi","data-sr-of":"av","data-sr-singular":"%d treff","data-sr-plural":"%d treff","data-sr-clear":"Fjern tekst"},en:{"data-sr-added":"Added","data-sr-removed":"Removed","data-sr-remove":"Press to remove","data-sr-empty":"No selected","data-sr-found":"Navigate left to find %d selected","data-sr-invalid":"Invalid value","data-sr-of":"of","data-sr-singular":"%d hit","data-sr-plural":"%d hits","data-sr-clear":"Clear text"}},N=a.forwardRef(function(t,l){var n=t,{className:o,errorText:d,helpText:i,label:u,"aria-labelledby":c,multiple:b=!1,options:N,name:O,inputProps:S,lang:T="nb",selected:k,defaultSelected:w,onSelectedChange:C}=n,q=v(n,["className","errorText","helpText","label","aria-labelledby","multiple","options","name","inputProps","lang","selected","defaultSelected","onSelectedChange"]);const E=a.useRef(null),I=a.useId(),P="".concat(I,"-error-text"),A="".concat(I,"-help-text"),H="".concat(I,"-list"),R=(e=>_[e])(T),F="undefined"!=typeof window,L=void 0!==k,W=a.useRef(C),D=a.useRef([]),[U,B]=a.useState(()=>{const e=h(w);if(e.length>0)return e;var r;return(r=N,r.flatMap(e=>y(e)?e.options:[e])).filter(e=>e.selected).map(e=>{var r,a,t;return{label:null!=(a=null!=(r=e.label)?r:e.value)?a:"",value:null!=(t=e.value)?t:""}})}),M=k?h(k):U;return a.useEffect(()=>{D.current=M},[M]),a.useEffect(()=>{W.current=C},[C]),a.useEffect(()=>{l&&("function"==typeof l?l(E.current):l.current=E.current)},[l]),a.useEffect(()=>{const e=E.current,r=e=>{e.preventDefault();const r=function(e,r,a){const t={label:(l=e,(null==(s=l.textContent)?void 0:s.trim())||""),value:e.value};var l,s;return a?e.isConnected?h(r).filter(({value:e})=>e!==t.value):[...h(r),t]:e.isConnected?void 0:t}(e.detail,D.current,b);if(b){const e=W.current;null==e||e(r),L||B(r)}else{const e=W.current;null==e||e(null!=r?r:null),L||B(h(r))}};return null==e||e.addEventListener("comboboxbeforeselect",r),()=>null==e?void 0:e.removeEventListener("comboboxbeforeselect",r)},[L,b]),s.jsxs("div",{className:r.clsx("sds-form-field",d&&"sds-form-field--error","sds-combobox",d&&"sds-combobox--invalid",o),children:[s.jsxs("div",{className:"sds-form-field__label-wrapper",children:[void 0!==u&&s.jsx(e.Label,{text:u,error:Boolean(d),htmlFor:I}),s.jsxs("u-combobox",p(f(f({className:"sds-combobox__combobox","data-multiple":b,ref:E},R),q),{children:[M.map(e=>s.jsx("data",{value:e.value,children:e.label},e.value)),s.jsx("input",p(f({suppressHydrationWarning:!0,className:"sds-combobox__input"},S),{id:I,list:H,"aria-labelledby":c})),s.jsx(m,{clearText:R["data-sr-clear"]}),s.jsx(x,{}),s.jsx("u-datalist",{suppressHydrationWarning:!0,className:"sds-combobox__datalist",id:H,"data-sr-singular":R["data-sr-singular"],"data-sr-plural":R["data-sr-plural"],children:N.map(e=>{var r;return y(e)?s.jsx(g,{label:e.label,options:e.options},e.label):s.jsx(j,f({suppressHydrationWarning:!0},e),null==(r=e.value)?void 0:r.toString())})}),!!O&&F&&s.jsx("select",{name:O,multiple:b,"aria-hidden":!0,hidden:!0})]}))]}),i&&s.jsx(e.HelpText,{id:A,children:i}),d&&s.jsx(e.HelpText,{id:P,error:!0,children:d})]})});N.displayName="Combobox",exports.Combobox=N;//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Combobox.tsx"],"names":["useId","jsxs","jsx","useRef","useState","useEffect","flattenedOptions","_a","clsx","Label","ScreenReaderOnly","CancelIcon","ExpandShowAltIcon","HelpText"],"mappings":"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","file":"index.js","sourcesContent":["import { ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Label, HelpText } from \"@sikt/sds-form\";\nimport { CancelIcon, ExpandShowAltIcon } from \"@sikt/sds-icons\";\nimport type { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  InputHTMLAttributes,\n  HTMLAttributes,\n  OptionHTMLAttributes,\n  ReactNode,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\n\nexport interface ComboboxOptionGroupProps {\n  /**\n   * Label for the section heading.\n   */\n  label: string;\n  /**\n   * Options within this section.\n   */\n  options: OptionHTMLAttributes<HTMLOptionElement>[];\n}\n\nexport type ComboboxOption =\n  | OptionHTMLAttributes<HTMLOptionElement>\n  | ComboboxOptionGroupProps;\n\nconst isOptionGroup = (\n  item: ComboboxOption,\n): item is ComboboxOptionGroupProps =>\n  \"options\" in item && Array.isArray(item.options);\n\nconst flattenOptions = (\n  items: ComboboxOption[],\n): OptionHTMLAttributes<HTMLOptionElement>[] =>\n  items.flatMap((item) => (isOptionGroup(item) ? item.options : [item]));\n\nexport interface ComboboxBaseProps extends Omit<\n  HTMLAttributes<UHTMLComboboxElement>,\n  \"onChange\"\n> {\n  className?: string;\n  /**\n   * Text to show when the input is invalid to help the user enter correct value. This also sets `aria-invalid` &  `aria-errormessage`.\n   */\n  errorText?: ReactNode;\n  /**\n   * Text to show to help the user enter correct value. It's a better pattern to have enough information in the `label`.\n   */\n  helpText?: ReactNode;\n  /**\n   * A list of option objects or section objects containing grouped options:\n   * - **label** Text for the option label or section heading.\n   * - **value** The value submitted with the form (options only).\n   * - **selected** Whether the option is initially selected (options only).\n   * - **options** Grouped options within a section (sections only).\n   */\n  options: ComboboxOption[];\n  /**\n   * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.\n   *\n   * @default undefined\n   */\n  multiple?: boolean;\n  /**\n   * Name of the form control. Submitted with the form as part of a name/value pair.\n   *\n   * @default undefined\n   */\n  name?: string;\n  /**\n   * Function when a user changes the selected option.\n   *\n   * @default undefined\n   */\n  onChange?: (\n    event: CustomEvent<HTMLDataElement>,\n    newValue: OptionHTMLAttributes<HTMLOptionElement>[],\n  ) => void;\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Sets language for accessible texts.\n   *\n   * @default \"nb\"\n   */\n  lang?: \"nb\" | \"nn\" | \"en\";\n}\n\nexport type ComboboxProps = ComboboxBaseProps &\n  (\n    | {\n        label: NonNullable<ReactNode>;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        /**\n         * Id (or id's) that identifies the element (or elements) that labels the element it is applied to. For accessibility these should NOT be visually hidden.\n         */\n        \"aria-labelledby\": string;\n      }\n  );\n\nconst i18n = {\n  nb: {\n    \"data-sr-added\": \"Lagt til\",\n    \"data-sr-removed\": \"Fjernet\",\n    \"data-sr-remove\": \"Trykk for å fjerne\",\n    \"data-sr-empty\": \"Ingen valgte\",\n    \"data-sr-found\": \"Naviger til venstre for å finne %d valgte\",\n    \"data-sr-invalid\": \"Ugyldig verdi\",\n    \"data-sr-of\": \"av\",\n    \"data-sr-singular\": \"%d treff\",\n    \"data-sr-plural\": \"%d treff\",\n    \"data-sr-clear\": \"Fjern tekst\",\n  },\n  nn: {\n    \"data-sr-added\": \"Lagt til\",\n    \"data-sr-removed\": \"Fjerna\",\n    \"data-sr-remove\": \"Trykk for å fjerne\",\n    \"data-sr-empty\": \"Ingen valde\",\n    \"data-sr-found\": \"Naviger til venstre for å finne %d valde\",\n    \"data-sr-invalid\": \"Ugyldig verdi\",\n    \"data-sr-of\": \"av\",\n    \"data-sr-singular\": \"%d treff\",\n    \"data-sr-plural\": \"%d treff\",\n    \"data-sr-clear\": \"Fjern tekst\",\n  },\n  en: {\n    \"data-sr-added\": \"Added\",\n    \"data-sr-removed\": \"Removed\",\n    \"data-sr-remove\": \"Press to remove\",\n    \"data-sr-empty\": \"No selected\",\n    \"data-sr-found\": \"Navigate left to find %d selected\",\n    \"data-sr-invalid\": \"Invalid value\",\n    \"data-sr-of\": \"of\",\n    \"data-sr-singular\": \"%d hit\",\n    \"data-sr-plural\": \"%d hits\",\n    \"data-sr-clear\": \"Clear text\",\n  },\n};\n\nconst getTextProps = (lang: keyof typeof i18n) => i18n[lang];\n\nconst Option = ({\n  label,\n  value,\n  ...rest\n}: OptionHTMLAttributes<HTMLOptionElement>) => {\n  return (\n    <u-option className=\"sds-combobox__datalist-option\" value={value} {...rest}>\n      {label}\n    </u-option>\n  );\n};\n\nconst OptionGroup = ({ label, options }: ComboboxOptionGroupProps) => {\n  const id = useId();\n\n  return (\n    <div className=\"sds-combobox__datalist-group\" role=\"group\">\n      <span className=\"sds-combobox__datalist-group-label\" id={id}>\n        {label}\n      </span>\n      {options.map((option) => (\n        <Option\n          key={option.value?.toString()}\n          aria-describedby={id}\n          {...option}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport const Combobox = ({\n  className,\n  errorText,\n  helpText,\n  label,\n  \"aria-labelledby\": ariaLabelledBy,\n  multiple = false,\n  options,\n  name,\n  onChange,\n  inputProps,\n  lang = \"nb\",\n  ...rest\n}: ComboboxProps) => {\n  const flattenedOptions = flattenOptions(options);\n  const comboboxRef = useRef<UHTMLComboboxElement>(null);\n  const optionsRef = useRef(flattenedOptions);\n  const onChangeRef = useRef(onChange);\n  const hasInteracted = useRef(false);\n  const id = useId();\n  const errorTextId = `${id}-error-text`;\n  const helpTextId = `${id}-help-text`;\n  const listId = `${id}-list`;\n  const textProps = getTextProps(lang);\n\n  const [initialSelectedOptions, setInitialSelectedOptions] = useState(() =>\n    flattenedOptions.filter((option) => option.selected),\n  );\n\n  useEffect(() => {\n    const flattenedOptions = flattenOptions(options);\n    optionsRef.current = flattenedOptions;\n    if (initialSelectedOptions.length === 0 && !hasInteracted.current) {\n      const selected = flattenedOptions.filter((option) => option.selected);\n      if (selected.length > 0) {\n        // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: sync async-arriving selected options into initial badge state before user interaction\n        setInitialSelectedOptions(selected);\n      }\n    }\n  }, [options, initialSelectedOptions.length]);\n\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  useEffect(() => {\n    const currentRef = comboboxRef.current;\n\n    const handleOnChange = (e: CustomEvent<HTMLDataElement>) => {\n      e.preventDefault();\n      hasInteracted.current = true;\n\n      const currentOptions = optionsRef.current;\n      const index = currentOptions.findIndex(\n        (item) => item.value === e.detail.value,\n      );\n      if (index === -1) return;\n      const newOption = currentOptions[index];\n      if (e.detail.isConnected) {\n        newOption.selected = true;\n      } else {\n        delete newOption.selected;\n      }\n      onChangeRef.current?.(e, currentOptions);\n    };\n\n    currentRef?.addEventListener(\"comboboxafterselect\", handleOnChange);\n    return () => {\n      currentRef?.removeEventListener(\"comboboxafterselect\", handleOnChange);\n    };\n  }, []);\n\n  return (\n    <div\n      className={clsx(\n        \"sds-form-field\",\n        errorText && \"sds-form-field--error\",\n        \"sds-combobox\",\n        errorText && \"sds-combobox--invalid\",\n        className,\n      )}\n    >\n      <div className=\"sds-form-field__label-wrapper\">\n        {label !== undefined && (\n          <Label text={label} error={Boolean(errorText)} htmlFor={id} />\n        )}\n        <u-combobox\n          className=\"sds-combobox__combobox\"\n          data-multiple={multiple}\n          ref={comboboxRef}\n          {...textProps}\n          {...rest}\n        >\n          {initialSelectedOptions.map((option) => (\n            <data key={option.value?.toString()} value={option.value}>\n              {option.label}\n            </data>\n          ))}\n          <input\n            className=\"sds-combobox__input\"\n            id={id}\n            list={listId}\n            {...inputProps}\n            aria-labelledby={ariaLabelledBy}\n          />\n          <del className=\"sds-combobox__button\">\n            <ScreenReaderOnly>{textProps[\"data-sr-clear\"]}</ScreenReaderOnly>\n            <span className=\"sds-combobox__button-icon\">\n              <CancelIcon />\n            </span>\n          </del>\n          <span className=\"sds-combobox__button\">\n            <span className=\"sds-combobox__button-icon\">\n              <ExpandShowAltIcon />\n            </span>\n          </span>\n          <u-datalist\n            className=\"sds-combobox__datalist\"\n            id={listId}\n            data-sr-singular={textProps[\"data-sr-singular\"]}\n            data-sr-plural={textProps[\"data-sr-plural\"]}\n          >\n            {options.map((option) =>\n              isOptionGroup(option) ? (\n                <OptionGroup\n                  key={option.label}\n                  label={option.label}\n                  options={option.options}\n                />\n              ) : (\n                <Option key={option.value?.toString()} {...option} />\n              ),\n            )}\n          </u-datalist>\n          {!!name && <select name={name} aria-hidden hidden />}\n        </u-combobox>\n      </div>\n      {helpText && <HelpText id={helpTextId}>{helpText}</HelpText>}\n      {errorText && (\n        <HelpText id={errorTextId} error>\n          {errorText}\n        </HelpText>\n      )}\n    </div>\n  );\n};\n\nCombobox.displayName = \"Combobox\";\n"]}
+{"version":3,"sources":["../src/ClearButton.tsx","../src/ExpandButton.tsx","../src/Option.tsx","../src/OptionGroup.tsx","../src/utils.ts","../src/Combobox.tsx"],"names":["jsx","ScreenReaderOnly","CancelIcon","ExpandShowAltIcon","useId","jsxs","forwardRef","Combobox","useRef","useState","_a","_b","useEffect","clsx","Label","HelpText"],"mappings":"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","file":"index.js","sourcesContent":["import { ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { CancelIcon } from \"@sikt/sds-icons\";\n\ninterface ClearButtonProps {\n  clearText: string;\n}\n\nexport const ClearButton = ({ clearText }: ClearButtonProps) => (\n  <del suppressHydrationWarning className=\"sds-combobox__button\">\n    <ScreenReaderOnly>{clearText}</ScreenReaderOnly>\n    <span className=\"sds-combobox__button-icon\">\n      <CancelIcon />\n    </span>\n  </del>\n);\n","import { ExpandShowAltIcon } from \"@sikt/sds-icons\";\n\nexport const ExpandButton = () => (\n  <span className=\"sds-combobox__button\">\n    <span className=\"sds-combobox__button-icon\">\n      <ExpandShowAltIcon />\n    </span>\n  </span>\n);\n","import { OptionHTMLAttributes } from \"react\";\nimport \"@u-elements/u-datalist\";\n\nexport const Option = ({\n  label,\n  value,\n  ...rest\n}: OptionHTMLAttributes<HTMLOptionElement>) => (\n  <u-option className=\"sds-combobox__datalist-option\" value={value} {...rest}>\n    {label}\n  </u-option>\n);\n","import { useId } from \"react\";\nimport type { ComboboxOptionGroupProps } from \"./Combobox\";\nimport { Option } from \"./Option\";\n\nexport const OptionGroup = ({ label, options }: ComboboxOptionGroupProps) => {\n  const id = useId();\n\n  return (\n    <div className=\"sds-combobox__datalist-group\" role=\"group\">\n      <span className=\"sds-combobox__datalist-group-label\" id={id}>\n        {label}\n      </span>\n      {options.map((option) => (\n        <Option\n          key={option.value?.toString()}\n          aria-describedby={id}\n          {...option}\n        />\n      ))}\n    </div>\n  );\n};\n","import type { OptionHTMLAttributes } from \"react\";\nimport type {\n  ComboboxItem,\n  ComboboxOption,\n  ComboboxOptionGroupProps,\n  ComboboxSelected,\n} from \"./Combobox\";\n\nexport const isOptionGroup = (\n  item: ComboboxOption,\n): item is ComboboxOptionGroupProps =>\n  \"options\" in item && Array.isArray(item.options);\n\nexport const flattenOptions = (\n  items: ComboboxOption[],\n): OptionHTMLAttributes<HTMLOptionElement>[] =>\n  items.flatMap((item) => (isOptionGroup(item) ? item.options : [item]));\n\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\nexport const text = (el: Element): string => el.textContent?.trim() || \"\";\n\n/**\n * Converts various input types to a consistent array of ComboboxItem objects.\n *\n * Handles different input formats:\n * - null/undefined → returns empty array []\n * - string → returns [{ label: string, value: string }]\n * - ComboboxItem → returns [ComboboxItem]\n * - array of strings/ComboboxItems → returns array of ComboboxItems\n *\n * This ensures the component always works with a predictable data structure.\n */\nexport const sanitizeItems = (\n  values: ComboboxSelected | null | undefined = [],\n): ComboboxItem[] => {\n  if (values == null) {\n    return [];\n  }\n\n  if (typeof values === \"string\") {\n    return [{ label: values, value: values }];\n  }\n\n  if (!Array.isArray(values)) {\n    return [values];\n  }\n\n  return values.map(\n    (value): ComboboxItem =>\n      typeof value === \"string\" ? { label: value, value } : value,\n  );\n};\n\n/**\n * Calculates the next selected items when user clicks on an option.\n *\n * For single selection: returns the clicked item or undefined\n * For multiple selection: adds/removes the clicked item from the current list\n */\nexport function nextItems(\n  data: HTMLDataElement,\n  prev?: ComboboxSelected,\n  multiple?: boolean,\n): ComboboxItem | ComboboxItem[] | undefined {\n  const item: ComboboxItem = { label: text(data), value: data.value };\n\n  if (!multiple) {\n    // Single selection: return item if selecting, undefined if deselecting\n    return data.isConnected ? undefined : item;\n  }\n\n  // Multiple selection: add or remove item from list\n  return data.isConnected\n    ? sanitizeItems(prev).filter(({ value }) => value !== item.value) // Remove item\n    : [...sanitizeItems(prev), item]; // Add item\n}\n\nexport const i18n = {\n  nb: {\n    \"data-sr-added\": \"Lagt til\",\n    \"data-sr-removed\": \"Fjernet\",\n    \"data-sr-remove\": \"Trykk for å fjerne\",\n    \"data-sr-empty\": \"Ingen valgte\",\n    \"data-sr-found\": \"Naviger til venstre for å finne %d valgte\",\n    \"data-sr-invalid\": \"Ugyldig verdi\",\n    \"data-sr-of\": \"av\",\n    \"data-sr-singular\": \"%d treff\",\n    \"data-sr-plural\": \"%d treff\",\n    \"data-sr-clear\": \"Fjern tekst\",\n  },\n  nn: {\n    \"data-sr-added\": \"Lagt til\",\n    \"data-sr-removed\": \"Fjerna\",\n    \"data-sr-remove\": \"Trykk for å fjerne\",\n    \"data-sr-empty\": \"Ingen valde\",\n    \"data-sr-found\": \"Naviger til venstre for å finne %d valde\",\n    \"data-sr-invalid\": \"Ugyldig verdi\",\n    \"data-sr-of\": \"av\",\n    \"data-sr-singular\": \"%d treff\",\n    \"data-sr-plural\": \"%d treff\",\n    \"data-sr-clear\": \"Fjern tekst\",\n  },\n  en: {\n    \"data-sr-added\": \"Added\",\n    \"data-sr-removed\": \"Removed\",\n    \"data-sr-remove\": \"Press to remove\",\n    \"data-sr-empty\": \"No selected\",\n    \"data-sr-found\": \"Navigate left to find %d selected\",\n    \"data-sr-invalid\": \"Invalid value\",\n    \"data-sr-of\": \"of\",\n    \"data-sr-singular\": \"%d hit\",\n    \"data-sr-plural\": \"%d hits\",\n    \"data-sr-clear\": \"Clear text\",\n  },\n};\n\nexport const getTextProps = (lang: keyof typeof i18n) => i18n[lang];\n","import { Label, HelpText } from \"@sikt/sds-form\";\nimport type { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  InputHTMLAttributes,\n  HTMLAttributes,\n  OptionHTMLAttributes,\n  ReactNode,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  forwardRef,\n} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\nimport { ClearButton } from \"./ClearButton\";\nimport { ExpandButton } from \"./ExpandButton\";\nimport { Option } from \"./Option\";\nimport { OptionGroup } from \"./OptionGroup\";\nimport {\n  isOptionGroup,\n  flattenOptions,\n  sanitizeItems,\n  nextItems,\n  getTextProps,\n} from \"./utils\";\n\nexport interface ComboboxItem {\n  label: string;\n  value: string;\n}\n\nexport interface ComboboxOptionGroupProps {\n  /**\n   * Label for the section heading.\n   */\n  label: string;\n  /**\n   * Options within this section.\n   */\n  options: OptionHTMLAttributes<HTMLOptionElement>[];\n}\n\nexport type ComboboxOption =\n  | OptionHTMLAttributes<HTMLOptionElement>\n  | ComboboxOptionGroupProps;\n\ntype ComboboxValue<T extends { multiple: boolean }> = T[\"multiple\"] extends true\n  ? (string | ComboboxItem)[]\n  : string | ComboboxItem;\n\ntype ComboboxBaseProps = {\n  className?: string;\n  /**\n   * Text to show when the input is invalid to help the user enter correct value. This also sets `aria-invalid` &  `aria-errormessage`.\n   */\n  errorText?: ReactNode;\n  /**\n   * Text to show to help the user enter correct value. It's a better pattern to have enough information in the `label`.\n   */\n  helpText?: ReactNode;\n  /**\n   * A list of option objects or section objects containing grouped options:\n   * - **label** Text for the option label or section heading.\n   * - **value** The value submitted with the form (options only).\n   * - **selected** Whether the option is initially selected (options only).\n   */\n  options: ComboboxOption[];\n  /**\n   * Name of the form control. Submitted with the form as part of a name/value pair.\n   *\n   * @default undefined\n   */\n  name?: string;\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Sets language for accessible texts.\n   *\n   * @default \"nb\"\n   */\n  lang?: \"nb\" | \"nn\" | \"en\";\n} & Omit<HTMLAttributes<UHTMLComboboxElement>, \"defaultValue\" | \"onChange\"> &\n  (\n    | {\n        label: NonNullable<ReactNode>;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        /**\n         * Id (or id's) that identifies the element (or elements) that labels the element it is applied to. For accessibility these should NOT be visually hidden.\n         */\n        \"aria-labelledby\": string;\n      }\n  );\n\ninterface ComboboxValueProps<T extends { multiple: boolean }> {\n  /**\n   * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.\n   *\n   * @default false\n   */\n  multiple?: T[\"multiple\"];\n  /**\n   * The selected item of the Combobox.\n   *\n   * If `label` and `value` are the same, each item can be a `string`. Otherwise, each item must be a `ComboboxItem`.\n   *\n   * Using this makes the component controlled and it must be used in combination with `onSelectedChange`.\n   */\n  selected?: ComboboxValue<T> | null;\n  /**\n   * Default selected item when uncontrolled\n   */\n  defaultSelected?: ComboboxValue<T>;\n  /**\n   * Callback when selected items changes\n   */\n  onSelectedChange?: (\n    value: T[\"multiple\"] extends true ? ComboboxItem[] : ComboboxItem | null,\n  ) => void;\n}\n\nexport type ComboboxSingleProps = ComboboxBaseProps &\n  ComboboxValueProps<{ multiple: false }>;\n\nexport type ComboboxMultipleProps = ComboboxBaseProps &\n  ComboboxValueProps<{ multiple: true }> & { multiple: true };\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;\n\nexport type ComboboxSelected =\n  | string\n  | ComboboxItem\n  | (string | ComboboxItem)[]\n  | null;\n\nexport const Combobox = forwardRef<UHTMLComboboxElement, ComboboxProps>(\n  function Combobox(\n    {\n      className,\n      errorText,\n      helpText,\n      label,\n      \"aria-labelledby\": ariaLabelledBy,\n      multiple = false,\n      options,\n      name,\n      inputProps,\n      lang = \"nb\",\n      selected,\n      defaultSelected,\n      onSelectedChange,\n      ...rest\n    },\n    ref,\n  ) {\n    const comboboxRef = useRef<UHTMLComboboxElement>(null);\n    const id = useId();\n    const errorTextId = `${id}-error-text`;\n    const helpTextId = `${id}-help-text`;\n    const listId = `${id}-list`;\n    const textProps = getTextProps(lang);\n    const noSsr = typeof window !== \"undefined\";\n    const isControlled = selected !== undefined;\n    const onSelectedChangeRef = useRef(onSelectedChange);\n    const selectedItemsRef = useRef<ComboboxItem[]>([]);\n\n    const [defaultItems, setDefaultItems] = useState<ComboboxItem[]>(() => {\n      // Priority: defaultSelected prop > selected options in options array\n      const fromProp = sanitizeItems(defaultSelected);\n      if (fromProp.length > 0) {\n        return fromProp;\n      }\n\n      // Extract initially selected options from the options array\n      const initiallySelectedFromOptions = flattenOptions(options)\n        .filter((option) => option.selected)\n        .map((option) => ({\n          label: (option.label ?? option.value ?? \"\") as string,\n          value: (option.value ?? \"\") as string,\n        }));\n\n      return initiallySelectedFromOptions;\n    });\n\n    const selectedItems = selected ? sanitizeItems(selected) : defaultItems;\n    // Keep the ref updated with the latest callback\n    useEffect(() => {\n      selectedItemsRef.current = selectedItems;\n    }, [selectedItems]);\n\n    useEffect(() => {\n      onSelectedChangeRef.current = onSelectedChange;\n    }, [onSelectedChange]);\n\n    // Combine refs\n    useEffect(() => {\n      if (!ref) return;\n      if (typeof ref === \"function\") {\n        ref(comboboxRef.current);\n      } else {\n        ref.current = comboboxRef.current;\n      }\n    }, [ref]);\n\n    /**\n     * Listeners and handling of adding/removing\n     */\n    useEffect(() => {\n      const combobox = comboboxRef.current;\n      const beforeChange = (event: CustomEvent<HTMLDataElement>) => {\n        event.preventDefault();\n        const data = event.detail;\n\n        const nextItem = nextItems(data, selectedItemsRef.current, multiple);\n\n        if (multiple) {\n          // Multiple selection: nextItem should be ComboboxItem[]\n          const callback = onSelectedChangeRef.current as\n            | ((value: ComboboxItem[]) => void)\n            | undefined;\n          callback?.(nextItem as ComboboxItem[]);\n          if (!isControlled) setDefaultItems(nextItem as ComboboxItem[]);\n        } else {\n          // Single selection: nextItem should be ComboboxItem | undefined\n          const callback = onSelectedChangeRef.current as\n            | ((value: ComboboxItem | null) => void)\n            | undefined;\n          callback?.((nextItem as ComboboxItem | undefined) ?? null);\n          if (!isControlled) setDefaultItems(sanitizeItems(nextItem));\n        }\n      };\n\n      combobox?.addEventListener(\n        \"comboboxbeforeselect\",\n        beforeChange as EventListener,\n      );\n      return () =>\n        combobox?.removeEventListener(\n          \"comboboxbeforeselect\",\n          beforeChange as EventListener,\n        );\n    }, [isControlled, multiple]);\n\n    return (\n      <div\n        className={clsx(\n          \"sds-form-field\",\n          errorText && \"sds-form-field--error\",\n          \"sds-combobox\",\n          errorText && \"sds-combobox--invalid\",\n          className,\n        )}\n      >\n        <div className=\"sds-form-field__label-wrapper\">\n          {label !== undefined && (\n            <Label text={label} error={Boolean(errorText)} htmlFor={id} />\n          )}\n          <u-combobox\n            className=\"sds-combobox__combobox\"\n            data-multiple={multiple}\n            ref={comboboxRef}\n            {...textProps}\n            {...rest}\n          >\n            {selectedItems.map((item) => (\n              <data key={item.value} value={item.value}>\n                {item.label}\n              </data>\n            ))}\n            <input\n              suppressHydrationWarning\n              className=\"sds-combobox__input\"\n              {...inputProps}\n              id={id}\n              list={listId}\n              aria-labelledby={ariaLabelledBy}\n            />\n            <ClearButton clearText={textProps[\"data-sr-clear\"]} />\n            <ExpandButton />\n            <u-datalist\n              suppressHydrationWarning\n              className=\"sds-combobox__datalist\"\n              id={listId}\n              data-sr-singular={textProps[\"data-sr-singular\"]}\n              data-sr-plural={textProps[\"data-sr-plural\"]}\n            >\n              {options.map((option) =>\n                isOptionGroup(option) ? (\n                  <OptionGroup\n                    key={option.label}\n                    label={option.label}\n                    options={option.options}\n                  />\n                ) : (\n                  <Option\n                    suppressHydrationWarning\n                    key={option.value?.toString()}\n                    {...option}\n                  />\n                ),\n              )}\n            </u-datalist>\n            {!!name && noSsr && (\n              <select name={name} multiple={multiple} aria-hidden hidden />\n            )}\n          </u-combobox>\n        </div>\n        {helpText && <HelpText id={helpTextId}>{helpText}</HelpText>}\n        {errorText && (\n          <HelpText id={errorTextId} error>\n            {errorText}\n          </HelpText>\n        )}\n      </div>\n    );\n  },\n);\n\nCombobox.displayName = \"Combobox\";\n"]}

package/dist/index.mjs

@@ -1 +1 @@
-import{ScreenReaderOnly as e}from"@sikt/sds-core";import{Label as a,HelpText as r}from"@sikt/sds-form";import{CancelIcon as t,ExpandShowAltIcon as l}from"@sikt/sds-icons";import{clsx as o}from"clsx/lite";import{useRef as s,useId as d,useState as n,useEffect as i}from"react";import"@u-elements/u-combobox";import"@u-elements/u-datalist";import{jsxs as c,jsx as m}from"react/jsx-runtime";var u=Object.defineProperty,b=Object.defineProperties,p=Object.getOwnPropertyDescriptors,f=Object.getOwnPropertySymbols,v=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable,x=(e,a,r)=>a in e?u(e,a,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[a]=r,h=(e,a)=>{for(var r in a||(a={}))v.call(a,r)&&x(e,r,a[r]);if(f)for(var r of f(a))g.call(a,r)&&x(e,r,a[r]);return e},y=(e,a)=>b(e,p(a)),_=(e,a)=>{var r={};for(var t in e)v.call(e,t)&&a.indexOf(t)<0&&(r[t]=e[t]);if(null!=e&&f)for(var t of f(e))a.indexOf(t)<0&&g.call(e,t)&&(r[t]=e[t]);return r},N=e=>"options"in e&&Array.isArray(e.options),j=e=>e.flatMap(e=>N(e)?e.options:[e]),O={nb:{"data-sr-added":"Lagt til","data-sr-removed":"Fjernet","data-sr-remove":"Trykk for å fjerne","data-sr-empty":"Ingen valgte","data-sr-found":"Naviger til venstre for å finne %d valgte","data-sr-invalid":"Ugyldig verdi","data-sr-of":"av","data-sr-singular":"%d treff","data-sr-plural":"%d treff","data-sr-clear":"Fjern tekst"},nn:{"data-sr-added":"Lagt til","data-sr-removed":"Fjerna","data-sr-remove":"Trykk for å fjerne","data-sr-empty":"Ingen valde","data-sr-found":"Naviger til venstre for å finne %d valde","data-sr-invalid":"Ugyldig verdi","data-sr-of":"av","data-sr-singular":"%d treff","data-sr-plural":"%d treff","data-sr-clear":"Fjern tekst"},en:{"data-sr-added":"Added","data-sr-removed":"Removed","data-sr-remove":"Press to remove","data-sr-empty":"No selected","data-sr-found":"Navigate left to find %d selected","data-sr-invalid":"Invalid value","data-sr-of":"of","data-sr-singular":"%d hit","data-sr-plural":"%d hits","data-sr-clear":"Clear text"}},k=e=>{var a=e,{label:r,value:t}=a,l=_(a,["label","value"]);return m("u-option",y(h({className:"sds-combobox__datalist-option",value:t},l),{children:r}))},P=({label:e,options:a})=>{const r=d();return c("div",{className:"sds-combobox__datalist-group",role:"group",children:[m("span",{className:"sds-combobox__datalist-group-label",id:r,children:e}),a.map(e=>{var a;return m(k,h({"aria-describedby":r},e),null==(a=e.value)?void 0:a.toString())})]})},T=u=>{var b=u,{className:p,errorText:f,helpText:v,label:g,"aria-labelledby":x,multiple:T=!1,options:w,name:C,onChange:F,inputProps:I,lang:L="nb"}=b,S=_(b,["className","errorText","helpText","label","aria-labelledby","multiple","options","name","onChange","inputProps","lang"]);const A=j(w),E=s(null),D=s(A),U=s(F),B=s(!1),M=d(),R="".concat(M,"-error-text"),q="".concat(M,"-help-text"),z="".concat(M,"-list"),G=(e=>O[e])(L),[H,J]=n(()=>A.filter(e=>e.selected));return i(()=>{const e=j(w);if(D.current=e,0===H.length&&!B.current){const a=e.filter(e=>e.selected);a.length>0&&J(a)}},[w,H.length]),i(()=>{U.current=F},[F]),i(()=>{const e=E.current,a=e=>{var a;e.preventDefault(),B.current=!0;const r=D.current,t=r.findIndex(a=>a.value===e.detail.value);if(-1===t)return;const l=r[t];e.detail.isConnected?l.selected=!0:delete l.selected,null==(a=U.current)||a.call(U,e,r)};return null==e||e.addEventListener("comboboxafterselect",a),()=>{null==e||e.removeEventListener("comboboxafterselect",a)}},[]),c("div",{className:o("sds-form-field",f&&"sds-form-field--error","sds-combobox",f&&"sds-combobox--invalid",p),children:[c("div",{className:"sds-form-field__label-wrapper",children:[void 0!==g&&m(a,{text:g,error:Boolean(f),htmlFor:M}),c("u-combobox",y(h(h({className:"sds-combobox__combobox","data-multiple":T,ref:E},G),S),{children:[H.map(e=>{var a;return m("data",{value:e.value,children:e.label},null==(a=e.value)?void 0:a.toString())}),m("input",y(h({className:"sds-combobox__input",id:M,list:z},I),{"aria-labelledby":x})),c("del",{className:"sds-combobox__button",children:[m(e,{children:G["data-sr-clear"]}),m("span",{className:"sds-combobox__button-icon",children:m(t,{})})]}),m("span",{className:"sds-combobox__button",children:m("span",{className:"sds-combobox__button-icon",children:m(l,{})})}),m("u-datalist",{className:"sds-combobox__datalist",id:z,"data-sr-singular":G["data-sr-singular"],"data-sr-plural":G["data-sr-plural"],children:w.map(e=>{var a;return N(e)?m(P,{label:e.label,options:e.options},e.label):m(k,h({},e),null==(a=e.value)?void 0:a.toString())})}),!!C&&m("select",{name:C,"aria-hidden":!0,hidden:!0})]}))]}),v&&m(r,{id:q,children:v}),f&&m(r,{id:R,error:!0,children:f})]})};T.displayName="Combobox";export{T as Combobox};//# sourceMappingURL=index.mjs.map
+import{Label as e,HelpText as a}from"@sikt/sds-form";import{clsx as r}from"clsx/lite";import{forwardRef as t,useRef as l,useId as o,useState as n,useEffect as s}from"react";import"@u-elements/u-combobox";import"@u-elements/u-datalist";import{ScreenReaderOnly as d}from"@sikt/sds-core";import{CancelIcon as i,ExpandShowAltIcon as c}from"@sikt/sds-icons";import{jsxs as u,jsx as m}from"react/jsx-runtime";var p=Object.defineProperty,b=Object.defineProperties,v=Object.getOwnPropertyDescriptors,f=Object.getOwnPropertySymbols,g=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,y=(e,a,r)=>a in e?p(e,a,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[a]=r,h=(e,a)=>{for(var r in a||(a={}))g.call(a,r)&&y(e,r,a[r]);if(f)for(var r of f(a))x.call(a,r)&&y(e,r,a[r]);return e},_=(e,a)=>b(e,v(a)),N=(e,a)=>{var r={};for(var t in e)g.call(e,t)&&a.indexOf(t)<0&&(r[t]=e[t]);if(null!=e&&f)for(var t of f(e))a.indexOf(t)<0&&x.call(e,t)&&(r[t]=e[t]);return r},j=({clearText:e})=>u("del",{suppressHydrationWarning:!0,className:"sds-combobox__button",children:[m(d,{children:e}),m("span",{className:"sds-combobox__button-icon",children:m(i,{})})]}),O=()=>m("span",{className:"sds-combobox__button",children:m("span",{className:"sds-combobox__button-icon",children:m(c,{})})}),k=e=>{var a=e,{label:r,value:t}=a,l=N(a,["label","value"]);return m("u-option",_(h({className:"sds-combobox__datalist-option",value:t},l),{children:r}))},P=({label:e,options:a})=>{const r=o();return u("div",{className:"sds-combobox__datalist-group",role:"group",children:[m("span",{className:"sds-combobox__datalist-group-label",id:r,children:e}),a.map(e=>{var a;return m(k,h({"aria-describedby":r},e),null==(a=e.value)?void 0:a.toString())})]})},T=e=>"options"in e&&Array.isArray(e.options),w=(e=[])=>null==e?[]:"string"==typeof e?[{label:e,value:e}]:Array.isArray(e)?e.map(e=>"string"==typeof e?{label:e,value:e}:e):[e];var C={nb:{"data-sr-added":"Lagt til","data-sr-removed":"Fjernet","data-sr-remove":"Trykk for å fjerne","data-sr-empty":"Ingen valgte","data-sr-found":"Naviger til venstre for å finne %d valgte","data-sr-invalid":"Ugyldig verdi","data-sr-of":"av","data-sr-singular":"%d treff","data-sr-plural":"%d treff","data-sr-clear":"Fjern tekst"},nn:{"data-sr-added":"Lagt til","data-sr-removed":"Fjerna","data-sr-remove":"Trykk for å fjerne","data-sr-empty":"Ingen valde","data-sr-found":"Naviger til venstre for å finne %d valde","data-sr-invalid":"Ugyldig verdi","data-sr-of":"av","data-sr-singular":"%d treff","data-sr-plural":"%d treff","data-sr-clear":"Fjern tekst"},en:{"data-sr-added":"Added","data-sr-removed":"Removed","data-sr-remove":"Press to remove","data-sr-empty":"No selected","data-sr-found":"Navigate left to find %d selected","data-sr-invalid":"Invalid value","data-sr-of":"of","data-sr-singular":"%d hit","data-sr-plural":"%d hits","data-sr-clear":"Clear text"}},S=t(function(t,d){var i=t,{className:c,errorText:p,helpText:b,label:v,"aria-labelledby":f,multiple:g=!1,options:x,name:y,inputProps:S,lang:A="nb",selected:F,defaultSelected:H,onSelectedChange:I}=i,L=N(i,["className","errorText","helpText","label","aria-labelledby","multiple","options","name","inputProps","lang","selected","defaultSelected","onSelectedChange"]);const W=l(null),E=o(),D="".concat(E,"-error-text"),U="".concat(E,"-help-text"),B="".concat(E,"-list"),M=(e=>C[e])(A),R="undefined"!=typeof window,q=void 0!==F,z=l(I),G=l([]),[J,K]=n(()=>{const e=w(H);if(e.length>0)return e;var a;return(a=x,a.flatMap(e=>T(e)?e.options:[e])).filter(e=>e.selected).map(e=>{var a,r,t;return{label:null!=(r=null!=(a=e.label)?a:e.value)?r:"",value:null!=(t=e.value)?t:""}})}),Q=F?w(F):J;return s(()=>{G.current=Q},[Q]),s(()=>{z.current=I},[I]),s(()=>{d&&("function"==typeof d?d(W.current):d.current=W.current)},[d]),s(()=>{const e=W.current,a=e=>{e.preventDefault();const a=function(e,a,r){const t={label:(l=e,(null==(o=l.textContent)?void 0:o.trim())||""),value:e.value};var l,o;return r?e.isConnected?w(a).filter(({value:e})=>e!==t.value):[...w(a),t]:e.isConnected?void 0:t}(e.detail,G.current,g);if(g){const e=z.current;null==e||e(a),q||K(a)}else{const e=z.current;null==e||e(null!=a?a:null),q||K(w(a))}};return null==e||e.addEventListener("comboboxbeforeselect",a),()=>null==e?void 0:e.removeEventListener("comboboxbeforeselect",a)},[q,g]),u("div",{className:r("sds-form-field",p&&"sds-form-field--error","sds-combobox",p&&"sds-combobox--invalid",c),children:[u("div",{className:"sds-form-field__label-wrapper",children:[void 0!==v&&m(e,{text:v,error:Boolean(p),htmlFor:E}),u("u-combobox",_(h(h({className:"sds-combobox__combobox","data-multiple":g,ref:W},M),L),{children:[Q.map(e=>m("data",{value:e.value,children:e.label},e.value)),m("input",_(h({suppressHydrationWarning:!0,className:"sds-combobox__input"},S),{id:E,list:B,"aria-labelledby":f})),m(j,{clearText:M["data-sr-clear"]}),m(O,{}),m("u-datalist",{suppressHydrationWarning:!0,className:"sds-combobox__datalist",id:B,"data-sr-singular":M["data-sr-singular"],"data-sr-plural":M["data-sr-plural"],children:x.map(e=>{var a;return T(e)?m(P,{label:e.label,options:e.options},e.label):m(k,h({suppressHydrationWarning:!0},e),null==(a=e.value)?void 0:a.toString())})}),!!y&&R&&m("select",{name:y,multiple:g,"aria-hidden":!0,hidden:!0})]}))]}),b&&m(a,{id:U,children:b}),p&&m(a,{id:D,error:!0,children:p})]})});S.displayName="Combobox";export{S as Combobox};//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Combobox.tsx"],"names":["flattenedOptions","_a"],"mappings":"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","file":"index.mjs","sourcesContent":["import { ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Label, HelpText } from \"@sikt/sds-form\";\nimport { CancelIcon, ExpandShowAltIcon } from \"@sikt/sds-icons\";\nimport type { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  InputHTMLAttributes,\n  HTMLAttributes,\n  OptionHTMLAttributes,\n  ReactNode,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\n\nexport interface ComboboxOptionGroupProps {\n  /**\n   * Label for the section heading.\n   */\n  label: string;\n  /**\n   * Options within this section.\n   */\n  options: OptionHTMLAttributes<HTMLOptionElement>[];\n}\n\nexport type ComboboxOption =\n  | OptionHTMLAttributes<HTMLOptionElement>\n  | ComboboxOptionGroupProps;\n\nconst isOptionGroup = (\n  item: ComboboxOption,\n): item is ComboboxOptionGroupProps =>\n  \"options\" in item && Array.isArray(item.options);\n\nconst flattenOptions = (\n  items: ComboboxOption[],\n): OptionHTMLAttributes<HTMLOptionElement>[] =>\n  items.flatMap((item) => (isOptionGroup(item) ? item.options : [item]));\n\nexport interface ComboboxBaseProps extends Omit<\n  HTMLAttributes<UHTMLComboboxElement>,\n  \"onChange\"\n> {\n  className?: string;\n  /**\n   * Text to show when the input is invalid to help the user enter correct value. This also sets `aria-invalid` &  `aria-errormessage`.\n   */\n  errorText?: ReactNode;\n  /**\n   * Text to show to help the user enter correct value. It's a better pattern to have enough information in the `label`.\n   */\n  helpText?: ReactNode;\n  /**\n   * A list of option objects or section objects containing grouped options:\n   * - **label** Text for the option label or section heading.\n   * - **value** The value submitted with the form (options only).\n   * - **selected** Whether the option is initially selected (options only).\n   * - **options** Grouped options within a section (sections only).\n   */\n  options: ComboboxOption[];\n  /**\n   * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.\n   *\n   * @default undefined\n   */\n  multiple?: boolean;\n  /**\n   * Name of the form control. Submitted with the form as part of a name/value pair.\n   *\n   * @default undefined\n   */\n  name?: string;\n  /**\n   * Function when a user changes the selected option.\n   *\n   * @default undefined\n   */\n  onChange?: (\n    event: CustomEvent<HTMLDataElement>,\n    newValue: OptionHTMLAttributes<HTMLOptionElement>[],\n  ) => void;\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Sets language for accessible texts.\n   *\n   * @default \"nb\"\n   */\n  lang?: \"nb\" | \"nn\" | \"en\";\n}\n\nexport type ComboboxProps = ComboboxBaseProps &\n  (\n    | {\n        label: NonNullable<ReactNode>;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        /**\n         * Id (or id's) that identifies the element (or elements) that labels the element it is applied to. For accessibility these should NOT be visually hidden.\n         */\n        \"aria-labelledby\": string;\n      }\n  );\n\nconst i18n = {\n  nb: {\n    \"data-sr-added\": \"Lagt til\",\n    \"data-sr-removed\": \"Fjernet\",\n    \"data-sr-remove\": \"Trykk for å fjerne\",\n    \"data-sr-empty\": \"Ingen valgte\",\n    \"data-sr-found\": \"Naviger til venstre for å finne %d valgte\",\n    \"data-sr-invalid\": \"Ugyldig verdi\",\n    \"data-sr-of\": \"av\",\n    \"data-sr-singular\": \"%d treff\",\n    \"data-sr-plural\": \"%d treff\",\n    \"data-sr-clear\": \"Fjern tekst\",\n  },\n  nn: {\n    \"data-sr-added\": \"Lagt til\",\n    \"data-sr-removed\": \"Fjerna\",\n    \"data-sr-remove\": \"Trykk for å fjerne\",\n    \"data-sr-empty\": \"Ingen valde\",\n    \"data-sr-found\": \"Naviger til venstre for å finne %d valde\",\n    \"data-sr-invalid\": \"Ugyldig verdi\",\n    \"data-sr-of\": \"av\",\n    \"data-sr-singular\": \"%d treff\",\n    \"data-sr-plural\": \"%d treff\",\n    \"data-sr-clear\": \"Fjern tekst\",\n  },\n  en: {\n    \"data-sr-added\": \"Added\",\n    \"data-sr-removed\": \"Removed\",\n    \"data-sr-remove\": \"Press to remove\",\n    \"data-sr-empty\": \"No selected\",\n    \"data-sr-found\": \"Navigate left to find %d selected\",\n    \"data-sr-invalid\": \"Invalid value\",\n    \"data-sr-of\": \"of\",\n    \"data-sr-singular\": \"%d hit\",\n    \"data-sr-plural\": \"%d hits\",\n    \"data-sr-clear\": \"Clear text\",\n  },\n};\n\nconst getTextProps = (lang: keyof typeof i18n) => i18n[lang];\n\nconst Option = ({\n  label,\n  value,\n  ...rest\n}: OptionHTMLAttributes<HTMLOptionElement>) => {\n  return (\n    <u-option className=\"sds-combobox__datalist-option\" value={value} {...rest}>\n      {label}\n    </u-option>\n  );\n};\n\nconst OptionGroup = ({ label, options }: ComboboxOptionGroupProps) => {\n  const id = useId();\n\n  return (\n    <div className=\"sds-combobox__datalist-group\" role=\"group\">\n      <span className=\"sds-combobox__datalist-group-label\" id={id}>\n        {label}\n      </span>\n      {options.map((option) => (\n        <Option\n          key={option.value?.toString()}\n          aria-describedby={id}\n          {...option}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport const Combobox = ({\n  className,\n  errorText,\n  helpText,\n  label,\n  \"aria-labelledby\": ariaLabelledBy,\n  multiple = false,\n  options,\n  name,\n  onChange,\n  inputProps,\n  lang = \"nb\",\n  ...rest\n}: ComboboxProps) => {\n  const flattenedOptions = flattenOptions(options);\n  const comboboxRef = useRef<UHTMLComboboxElement>(null);\n  const optionsRef = useRef(flattenedOptions);\n  const onChangeRef = useRef(onChange);\n  const hasInteracted = useRef(false);\n  const id = useId();\n  const errorTextId = `${id}-error-text`;\n  const helpTextId = `${id}-help-text`;\n  const listId = `${id}-list`;\n  const textProps = getTextProps(lang);\n\n  const [initialSelectedOptions, setInitialSelectedOptions] = useState(() =>\n    flattenedOptions.filter((option) => option.selected),\n  );\n\n  useEffect(() => {\n    const flattenedOptions = flattenOptions(options);\n    optionsRef.current = flattenedOptions;\n    if (initialSelectedOptions.length === 0 && !hasInteracted.current) {\n      const selected = flattenedOptions.filter((option) => option.selected);\n      if (selected.length > 0) {\n        // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: sync async-arriving selected options into initial badge state before user interaction\n        setInitialSelectedOptions(selected);\n      }\n    }\n  }, [options, initialSelectedOptions.length]);\n\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  useEffect(() => {\n    const currentRef = comboboxRef.current;\n\n    const handleOnChange = (e: CustomEvent<HTMLDataElement>) => {\n      e.preventDefault();\n      hasInteracted.current = true;\n\n      const currentOptions = optionsRef.current;\n      const index = currentOptions.findIndex(\n        (item) => item.value === e.detail.value,\n      );\n      if (index === -1) return;\n      const newOption = currentOptions[index];\n      if (e.detail.isConnected) {\n        newOption.selected = true;\n      } else {\n        delete newOption.selected;\n      }\n      onChangeRef.current?.(e, currentOptions);\n    };\n\n    currentRef?.addEventListener(\"comboboxafterselect\", handleOnChange);\n    return () => {\n      currentRef?.removeEventListener(\"comboboxafterselect\", handleOnChange);\n    };\n  }, []);\n\n  return (\n    <div\n      className={clsx(\n        \"sds-form-field\",\n        errorText && \"sds-form-field--error\",\n        \"sds-combobox\",\n        errorText && \"sds-combobox--invalid\",\n        className,\n      )}\n    >\n      <div className=\"sds-form-field__label-wrapper\">\n        {label !== undefined && (\n          <Label text={label} error={Boolean(errorText)} htmlFor={id} />\n        )}\n        <u-combobox\n          className=\"sds-combobox__combobox\"\n          data-multiple={multiple}\n          ref={comboboxRef}\n          {...textProps}\n          {...rest}\n        >\n          {initialSelectedOptions.map((option) => (\n            <data key={option.value?.toString()} value={option.value}>\n              {option.label}\n            </data>\n          ))}\n          <input\n            className=\"sds-combobox__input\"\n            id={id}\n            list={listId}\n            {...inputProps}\n            aria-labelledby={ariaLabelledBy}\n          />\n          <del className=\"sds-combobox__button\">\n            <ScreenReaderOnly>{textProps[\"data-sr-clear\"]}</ScreenReaderOnly>\n            <span className=\"sds-combobox__button-icon\">\n              <CancelIcon />\n            </span>\n          </del>\n          <span className=\"sds-combobox__button\">\n            <span className=\"sds-combobox__button-icon\">\n              <ExpandShowAltIcon />\n            </span>\n          </span>\n          <u-datalist\n            className=\"sds-combobox__datalist\"\n            id={listId}\n            data-sr-singular={textProps[\"data-sr-singular\"]}\n            data-sr-plural={textProps[\"data-sr-plural\"]}\n          >\n            {options.map((option) =>\n              isOptionGroup(option) ? (\n                <OptionGroup\n                  key={option.label}\n                  label={option.label}\n                  options={option.options}\n                />\n              ) : (\n                <Option key={option.value?.toString()} {...option} />\n              ),\n            )}\n          </u-datalist>\n          {!!name && <select name={name} aria-hidden hidden />}\n        </u-combobox>\n      </div>\n      {helpText && <HelpText id={helpTextId}>{helpText}</HelpText>}\n      {errorText && (\n        <HelpText id={errorTextId} error>\n          {errorText}\n        </HelpText>\n      )}\n    </div>\n  );\n};\n\nCombobox.displayName = \"Combobox\";\n"]}
+{"version":3,"sources":["../src/ClearButton.tsx","../src/ExpandButton.tsx","../src/Option.tsx","../src/OptionGroup.tsx","../src/utils.ts","../src/Combobox.tsx"],"names":["jsx","jsxs","Combobox","useId","_a","_b"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,IAAM,WAAA,GAAc,CAAC,EAAE,SAAA,EAAU,0BACrC,KAAA,EAAA,EAAI,wBAAA,EAAwB,IAAA,EAAC,SAAA,EAAU,sBAAA,EACtC,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,oBAAkB,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,sBAC5B,MAAA,EAAA,EAAK,SAAA,EAAU,2BAAA,EACd,QAAA,kBAAA,GAAA,CAAC,cAAW,CAAA,EACd;AAAA,CAAA,EACF,CAAA;ACXK,IAAM,eAAe,sBAC1BA,GAAAA,CAAC,MAAA,EAAA,EAAK,WAAU,sBAAA,EACd,QAAA,kBAAAA,GAAAA,CAAC,MAAA,EAAA,EAAK,WAAU,2BAAA,EACd,QAAA,kBAAAA,GAAAA,CAAC,iBAAA,EAAA,EAAkB,GACrB,CAAA,EACF,CAAA;ACJK,IAAM,MAAA,GAAS,CAAC,EAAA,KAIqB;AAJrB,EAAA,IAAA,EAAA,GAAA,EAAA,EACrB;AAAA,IAAA,KAAA;AAAA,IACA;AAAA,GALF,GAGuB,EAAA,EAGlB,IAAA,GAAA,SAAA,CAHkB,EAAA,EAGlB;AAAA,IAFH,OAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,uBAAAA,IAAC,UAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAS,SAAA,EAAU,iCAAgC,KAAA,EAAA,EAAkB,IAAA,CAAA,EAArE,EACE,QAAA,EAAA,KAAA,EAAA,CACH,CAAA;AAAA,CAAA;ACNK,IAAM,WAAA,GAAc,CAAC,EAAE,KAAA,EAAO,SAAQ,KAAgC;AAC3E,EAAA,MAAM,KAAK,KAAA,EAAM;AAEjB,EAAA,uBACEC,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EAA+B,MAAK,OAAA,EACjD,QAAA,EAAA;AAAA,oBAAAD,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oCAAA,EAAqC,IAClD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IACC,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,KAAQ;AAZ5B,MAAA,IAAA,EAAA;AAaQ,MAAA,uBAAAA,GAAAA;AAAA,QAAC,MAAA;AAAA,QAAA,cAAA,CAAA;AAAA,UAEC,kBAAA,EAAkB;AAAA,SAAA,EACd,MAAA,CAAA;AAAA,QAAA,CAFC,EAAA,GAAA,MAAA,CAAO,UAAP,IAAA,GAAA,MAAA,GAAA,EAAA,CAAc,QAAA;AAAA,OAGrB;AAAA,IAAA,CACD;AAAA,GAAA,EACH,CAAA;AAEJ,CAAA;;;ACbO,IAAM,aAAA,GAAgB,CAC3B,IAAA,KAEA,SAAA,IAAa,QAAQ,KAAA,CAAM,OAAA,CAAQ,KAAK,OAAO,CAAA;AAE1C,IAAM,cAAA,GAAiB,CAC5B,KAAA,KAEA,KAAA,CAAM,QAAQ,CAAC,IAAA,KAAU,aAAA,CAAc,IAAI,CAAA,GAAI,IAAA,CAAK,OAAA,GAAU,CAAC,IAAI,CAAE,CAAA;AAGhE,IAAM,IAAA,GAAO,CAAC,EAAA,KAAqB;AAnB1C,EAAA,IAAA,EAAA;AAmB6C,EAAA,OAAA,CAAA,CAAA,EAAA,GAAA,EAAA,CAAG,WAAA,KAAH,mBAAgB,IAAA,EAAA,KAAU,EAAA;AAAA,CAAA;AAahE,IAAM,aAAA,GAAgB,CAC3B,MAAA,GAA8C,EAAC,KAC5B;AACnB,EAAA,IAAI,UAAU,IAAA,EAAM;AAClB,IAAA,OAAO,EAAC;AAAA,EACV;AAEA,EAAA,IAAI,OAAO,WAAW,QAAA,EAAU;AAC9B,IAAA,OAAO,CAAC,EAAE,KAAA,EAAO,MAAA,EAAQ,KAAA,EAAO,QAAQ,CAAA;AAAA,EAC1C;AAEA,EAAA,IAAI,CAAC,KAAA,CAAM,OAAA,CAAQ,MAAM,CAAA,EAAG;AAC1B,IAAA,OAAO,CAAC,MAAM,CAAA;AAAA,EAChB;AAEA,EAAA,OAAO,MAAA,CAAO,GAAA;AAAA,IACZ,CAAC,UACC,OAAO,KAAA,KAAU,WAAW,EAAE,KAAA,EAAO,KAAA,EAAO,KAAA,EAAM,GAAI;AAAA,GAC1D;AACF,CAAA;AAQO,SAAS,SAAA,CACd,IAAA,EACA,IAAA,EACA,QAAA,EAC2C;AAC3C,EAAA,MAAM,IAAA,GAAqB,EAAE,KAAA,EAAO,IAAA,CAAK,IAAI,CAAA,EAAG,KAAA,EAAO,KAAK,KAAA,EAAM;AAElE,EAAA,IAAI,CAAC,QAAA,EAAU;AAEb,IAAA,OAAO,IAAA,CAAK,cAAc,MAAA,GAAY,IAAA;AAAA,EACxC;AAGA,EAAA,OAAO,KAAK,WAAA,GACR,aAAA,CAAc,IAAI,CAAA,CAAE,MAAA,CAAO,CAAC,EAAE,KAAA,OAAY,KAAA,KAAU,IAAA,CAAK,KAAK,CAAA,GAC9D,CAAC,GAAG,aAAA,CAAc,IAAI,GAAG,IAAI,CAAA;AACnC;AAEO,IAAM,IAAA,GAAO;AAAA,EAClB,EAAA,EAAI;AAAA,IACF,eAAA,EAAiB,UAAA;AAAA,IACjB,iBAAA,EAAmB,SAAA;AAAA,IACnB,gBAAA,EAAkB,uBAAA;AAAA,IAClB,eAAA,EAAiB,cAAA;AAAA,IACjB,eAAA,EAAiB,8CAAA;AAAA,IACjB,iBAAA,EAAmB,eAAA;AAAA,IACnB,YAAA,EAAc,IAAA;AAAA,IACd,kBAAA,EAAoB,UAAA;AAAA,IACpB,gBAAA,EAAkB,UAAA;AAAA,IAClB,eAAA,EAAiB;AAAA,GACnB;AAAA,EACA,EAAA,EAAI;AAAA,IACF,eAAA,EAAiB,UAAA;AAAA,IACjB,iBAAA,EAAmB,QAAA;AAAA,IACnB,gBAAA,EAAkB,uBAAA;AAAA,IAClB,eAAA,EAAiB,aAAA;AAAA,IACjB,eAAA,EAAiB,6CAAA;AAAA,IACjB,iBAAA,EAAmB,eAAA;AAAA,IACnB,YAAA,EAAc,IAAA;AAAA,IACd,kBAAA,EAAoB,UAAA;AAAA,IACpB,gBAAA,EAAkB,UAAA;AAAA,IAClB,eAAA,EAAiB;AAAA,GACnB;AAAA,EACA,EAAA,EAAI;AAAA,IACF,eAAA,EAAiB,OAAA;AAAA,IACjB,iBAAA,EAAmB,SAAA;AAAA,IACnB,gBAAA,EAAkB,iBAAA;AAAA,IAClB,eAAA,EAAiB,aAAA;AAAA,IACjB,eAAA,EAAiB,mCAAA;AAAA,IACjB,iBAAA,EAAmB,eAAA;AAAA,IACnB,YAAA,EAAc,IAAA;AAAA,IACd,kBAAA,EAAoB,QAAA;AAAA,IACpB,gBAAA,EAAkB,SAAA;AAAA,IAClB,eAAA,EAAiB;AAAA;AAErB,CAAA;AAEO,IAAM,YAAA,GAAe,CAAC,IAAA,KAA4B,IAAA,CAAK,IAAI,CAAA;ACuB3D,IAAM,QAAA,GAAW,UAAA;AAAA,EACtB,SAASE,SAAAA,CACP,EAAA,EAgBA,GAAA,EACA;AAjBA,IAAA,IAAA,EAAA,GAAA,EAAA,EACE;AAAA,MAAA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,iBAAA,EAAmB,cAAA;AAAA,MACnB,QAAA,GAAW,KAAA;AAAA,MACX,OAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAA;AAAA,MACA,IAAA,GAAO,IAAA;AAAA,MACP,QAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KA1JN,GA6II,EAAA,EAcK,IAAA,GAAA,SAAA,CAdL,EAAA,EAcK;AAAA,MAbH,WAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,iBAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,iBAAA;AAAA,MACA;AAAA,KAAA,CAAA;AAKF,IAAA,MAAM,WAAA,GAAc,OAA6B,IAAI,CAAA;AACrD,IAAA,MAAM,KAAKC,KAAAA,EAAM;AACjB,IAAA,MAAM,WAAA,GAAc,GAAG,MAAA,CAAA,EAAA,EAAE,aAAA,CAAA;AACzB,IAAA,MAAM,UAAA,GAAa,GAAG,MAAA,CAAA,EAAA,EAAE,YAAA,CAAA;AACxB,IAAA,MAAM,MAAA,GAAS,GAAG,MAAA,CAAA,EAAA,EAAE,OAAA,CAAA;AACpB,IAAA,MAAM,SAAA,GAAY,aAAa,IAAI,CAAA;AACnC,IAAA,MAAM,KAAA,GAAQ,OAAO,MAAA,KAAW,WAAA;AAChC,IAAA,MAAM,eAAe,QAAA,KAAa,MAAA;AAClC,IAAA,MAAM,mBAAA,GAAsB,OAAO,gBAAgB,CAAA;AACnD,IAAA,MAAM,gBAAA,GAAmB,MAAA,CAAuB,EAAE,CAAA;AAElD,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAyB,MAAM;AAErE,MAAA,MAAM,QAAA,GAAW,cAAc,eAAe,CAAA;AAC9C,MAAA,IAAI,QAAA,CAAS,SAAS,CAAA,EAAG;AACvB,QAAA,OAAO,QAAA;AAAA,MACT;AAGA,MAAA,MAAM,4BAAA,GAA+B,cAAA,CAAe,OAAO,CAAA,CACxD,MAAA,CAAO,CAAC,MAAA,KAAW,MAAA,CAAO,QAAQ,CAAA,CAClC,GAAA,CAAI,CAAC,MAAA,KAAQ;AApLtB,QAAA,IAAAC,KAAAC,GAAAA,EAAA,EAAA;AAoL0B,QAAA,OAAA;AAAA,UAChB,KAAA,EAAA,CAAQA,GAAAA,GAAAA,CAAAD,GAAAA,GAAA,MAAA,CAAO,KAAA,KAAP,OAAAA,GAAAA,GAAgB,MAAA,CAAO,KAAA,KAAvB,IAAA,GAAAC,GAAAA,GAAgC,EAAA;AAAA,UACxC,KAAA,EAAA,CAAQ,EAAA,GAAA,MAAA,CAAO,KAAA,KAAP,IAAA,GAAA,EAAA,GAAgB;AAAA,SAC1B;AAAA,MAAA,CAAE,CAAA;AAEJ,MAAA,OAAO,4BAAA;AAAA,IACT,CAAC,CAAA;AAED,IAAA,MAAM,aAAA,GAAgB,QAAA,GAAW,aAAA,CAAc,QAAQ,CAAA,GAAI,YAAA;AAE3D,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,gBAAA,CAAiB,OAAA,GAAU,aAAA;AAAA,IAC7B,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,mBAAA,CAAoB,OAAA,GAAU,gBAAA;AAAA,IAChC,CAAA,EAAG,CAAC,gBAAgB,CAAC,CAAA;AAGrB,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,GAAA,EAAK;AACV,MAAA,IAAI,OAAO,QAAQ,UAAA,EAAY;AAC7B,QAAA,GAAA,CAAI,YAAY,OAAO,CAAA;AAAA,MACzB,CAAA,MAAO;AACL,QAAA,GAAA,CAAI,UAAU,WAAA,CAAY,OAAA;AAAA,MAC5B;AAAA,IACF,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAKR,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,MAAM,WAAW,WAAA,CAAY,OAAA;AAC7B,MAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAwC;AAC5D,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,MAAM,OAAO,KAAA,CAAM,MAAA;AAEnB,QAAA,MAAM,QAAA,GAAW,SAAA,CAAU,IAAA,EAAM,gBAAA,CAAiB,SAAS,QAAQ,CAAA;AAEnE,QAAA,IAAI,QAAA,EAAU;AAEZ,UAAA,MAAM,WAAW,mBAAA,CAAoB,OAAA;AAGrC,UAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,QAAA,CAAA;AACX,UAAA,IAAI,CAAC,YAAA,EAAc,eAAA,CAAgB,QAA0B,CAAA;AAAA,QAC/D,CAAA,MAAO;AAEL,UAAA,MAAM,WAAW,mBAAA,CAAoB,OAAA;AAGrC,UAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAY,QAAA,IAAA,IAAA,GAAA,QAAA,GAAyC,IAAA,CAAA;AACrD,UAAA,IAAI,CAAC,YAAA,EAAc,eAAA,CAAgB,aAAA,CAAc,QAAQ,CAAC,CAAA;AAAA,QAC5D;AAAA,MACF,CAAA;AAEA,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,gBAAA;AAAA,QACR,sBAAA;AAAA,QACA;AAAA,OAAA;AAEF,MAAA,OAAO,MACL,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,mBAAA;AAAA,QACR,sBAAA;AAAA,QACA;AAAA,OAAA;AAAA,IAEN,CAAA,EAAG,CAAC,YAAA,EAAc,QAAQ,CAAC,CAAA;AAE3B,IAAA,uBACEJ,IAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,gBAAA;AAAA,UACA,SAAA,IAAa,uBAAA;AAAA,UACb,cAAA;AAAA,UACA,SAAA,IAAa,uBAAA;AAAA,UACb;AAAA,SACF;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAA,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+BAAA,EACZ,QAAA,EAAA;AAAA,YAAA,KAAA,KAAU,MAAA,oBACTD,GAAAA,CAAC,KAAA,EAAA,EAAM,IAAA,EAAM,KAAA,EAAO,KAAA,EAAO,OAAA,CAAQ,SAAS,CAAA,EAAG,OAAA,EAAS,EAAA,EAAI,CAAA;AAAA,4BAE9DC,IAAAA;AAAA,cAAC,YAAA;AAAA,cAAA,aAAA,CAAA,cAAA,CAAA,cAAA,CAAA;AAAA,gBACC,SAAA,EAAU,wBAAA;AAAA,gBACV,eAAA,EAAe,QAAA;AAAA,gBACf,GAAA,EAAK;AAAA,eAAA,EACD,YACA,IAAA,CAAA,EALL;AAAA,gBAOE,QAAA,EAAA;AAAA,kBAAA,aAAA,CAAc,GAAA,CAAI,CAAC,IAAA,qBAClBD,GAAAA,CAAC,MAAA,EAAA,EAAsB,KAAA,EAAO,IAAA,CAAK,KAAA,EAChC,QAAA,EAAA,IAAA,CAAK,KAAA,EAAA,EADG,IAAA,CAAK,KAEhB,CACD,CAAA;AAAA,kCACDA,GAAAA;AAAA,oBAAC,OAAA;AAAA,oBAAA,aAAA,CAAA,cAAA,CAAA;AAAA,sBACC,wBAAA,EAAwB,IAAA;AAAA,sBACxB,SAAA,EAAU;AAAA,qBAAA,EACN,UAAA,CAAA,EAHL;AAAA,sBAIC,EAAA;AAAA,sBACA,IAAA,EAAM,MAAA;AAAA,sBACN,iBAAA,EAAiB;AAAA,qBAAA;AAAA,mBACnB;AAAA,kCACAA,GAAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAW,SAAA,CAAU,eAAe,CAAA,EAAG,CAAA;AAAA,kCACpDA,IAAC,YAAA,EAAA,EAAa,CAAA;AAAA,kCACdA,GAAAA;AAAA,oBAAC,YAAA;AAAA,oBAAA;AAAA,sBACC,wBAAA,EAAwB,IAAA;AAAA,sBACxB,SAAA,EAAU,wBAAA;AAAA,sBACV,EAAA,EAAI,MAAA;AAAA,sBACJ,kBAAA,EAAkB,UAAU,kBAAkB,CAAA;AAAA,sBAC9C,gBAAA,EAAgB,UAAU,gBAAgB,CAAA;AAAA,sBAEzC,QAAA,EAAA,OAAA,CAAQ,GAAA;AAAA,wBAAI,CAAC,MAAA,KAAQ;AAlSpC,0BAAA,IAAAI,GAAAA;AAmSgB,0BAAA,OAAA,aAAA,CAAc,MAAM,oBAClBJ,GAAAA;AAAA,4BAAC,WAAA;AAAA,4BAAA;AAAA,8BAEC,OAAO,MAAA,CAAO,KAAA;AAAA,8BACd,SAAS,MAAA,CAAO;AAAA,6BAAA;AAAA,4BAFX,MAAA,CAAO;AAAA,8CAKdA,GAAAA;AAAA,4BAAC,MAAA;AAAA,4BAAA,cAAA,CAAA;AAAA,8BACC,wBAAA,EAAwB;AAAA,6BAAA,EAEpB,MAAA,CAAA;AAAA,4BAAA,CADCI,GAAAA,GAAA,MAAA,CAAO,KAAA,KAAP,IAAA,GAAA,MAAA,GAAAA,GAAAA,CAAc,QAAA;AAAA,2BAErB;AAAA,wBAAA;AAAA;AAEJ;AAAA,mBACF;AAAA,kBACC,CAAC,CAAC,IAAA,IAAQ,KAAA,oBACTJ,GAAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAY,QAAA,EAAoB,aAAA,EAAW,IAAA,EAAC,MAAA,EAAM,IAAA,EAAC;AAAA;AAAA,eAAA;AAAA;AAE/D,WAAA,EACF,CAAA;AAAA,UACC,4BAAYA,GAAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAI,YAAa,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,UAChD,SAAA,oBACCA,GAAAA,CAAC,QAAA,EAAA,EAAS,IAAI,WAAA,EAAa,KAAA,EAAK,MAC7B,QAAA,EAAA,SAAA,EACH;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"index.mjs","sourcesContent":["import { ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { CancelIcon } from \"@sikt/sds-icons\";\n\ninterface ClearButtonProps {\n  clearText: string;\n}\n\nexport const ClearButton = ({ clearText }: ClearButtonProps) => (\n  <del suppressHydrationWarning className=\"sds-combobox__button\">\n    <ScreenReaderOnly>{clearText}</ScreenReaderOnly>\n    <span className=\"sds-combobox__button-icon\">\n      <CancelIcon />\n    </span>\n  </del>\n);\n","import { ExpandShowAltIcon } from \"@sikt/sds-icons\";\n\nexport const ExpandButton = () => (\n  <span className=\"sds-combobox__button\">\n    <span className=\"sds-combobox__button-icon\">\n      <ExpandShowAltIcon />\n    </span>\n  </span>\n);\n","import { OptionHTMLAttributes } from \"react\";\nimport \"@u-elements/u-datalist\";\n\nexport const Option = ({\n  label,\n  value,\n  ...rest\n}: OptionHTMLAttributes<HTMLOptionElement>) => (\n  <u-option className=\"sds-combobox__datalist-option\" value={value} {...rest}>\n    {label}\n  </u-option>\n);\n","import { useId } from \"react\";\nimport type { ComboboxOptionGroupProps } from \"./Combobox\";\nimport { Option } from \"./Option\";\n\nexport const OptionGroup = ({ label, options }: ComboboxOptionGroupProps) => {\n  const id = useId();\n\n  return (\n    <div className=\"sds-combobox__datalist-group\" role=\"group\">\n      <span className=\"sds-combobox__datalist-group-label\" id={id}>\n        {label}\n      </span>\n      {options.map((option) => (\n        <Option\n          key={option.value?.toString()}\n          aria-describedby={id}\n          {...option}\n        />\n      ))}\n    </div>\n  );\n};\n","import type { OptionHTMLAttributes } from \"react\";\nimport type {\n  ComboboxItem,\n  ComboboxOption,\n  ComboboxOptionGroupProps,\n  ComboboxSelected,\n} from \"./Combobox\";\n\nexport const isOptionGroup = (\n  item: ComboboxOption,\n): item is ComboboxOptionGroupProps =>\n  \"options\" in item && Array.isArray(item.options);\n\nexport const flattenOptions = (\n  items: ComboboxOption[],\n): OptionHTMLAttributes<HTMLOptionElement>[] =>\n  items.flatMap((item) => (isOptionGroup(item) ? item.options : [item]));\n\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\nexport const text = (el: Element): string => el.textContent?.trim() || \"\";\n\n/**\n * Converts various input types to a consistent array of ComboboxItem objects.\n *\n * Handles different input formats:\n * - null/undefined → returns empty array []\n * - string → returns [{ label: string, value: string }]\n * - ComboboxItem → returns [ComboboxItem]\n * - array of strings/ComboboxItems → returns array of ComboboxItems\n *\n * This ensures the component always works with a predictable data structure.\n */\nexport const sanitizeItems = (\n  values: ComboboxSelected | null | undefined = [],\n): ComboboxItem[] => {\n  if (values == null) {\n    return [];\n  }\n\n  if (typeof values === \"string\") {\n    return [{ label: values, value: values }];\n  }\n\n  if (!Array.isArray(values)) {\n    return [values];\n  }\n\n  return values.map(\n    (value): ComboboxItem =>\n      typeof value === \"string\" ? { label: value, value } : value,\n  );\n};\n\n/**\n * Calculates the next selected items when user clicks on an option.\n *\n * For single selection: returns the clicked item or undefined\n * For multiple selection: adds/removes the clicked item from the current list\n */\nexport function nextItems(\n  data: HTMLDataElement,\n  prev?: ComboboxSelected,\n  multiple?: boolean,\n): ComboboxItem | ComboboxItem[] | undefined {\n  const item: ComboboxItem = { label: text(data), value: data.value };\n\n  if (!multiple) {\n    // Single selection: return item if selecting, undefined if deselecting\n    return data.isConnected ? undefined : item;\n  }\n\n  // Multiple selection: add or remove item from list\n  return data.isConnected\n    ? sanitizeItems(prev).filter(({ value }) => value !== item.value) // Remove item\n    : [...sanitizeItems(prev), item]; // Add item\n}\n\nexport const i18n = {\n  nb: {\n    \"data-sr-added\": \"Lagt til\",\n    \"data-sr-removed\": \"Fjernet\",\n    \"data-sr-remove\": \"Trykk for å fjerne\",\n    \"data-sr-empty\": \"Ingen valgte\",\n    \"data-sr-found\": \"Naviger til venstre for å finne %d valgte\",\n    \"data-sr-invalid\": \"Ugyldig verdi\",\n    \"data-sr-of\": \"av\",\n    \"data-sr-singular\": \"%d treff\",\n    \"data-sr-plural\": \"%d treff\",\n    \"data-sr-clear\": \"Fjern tekst\",\n  },\n  nn: {\n    \"data-sr-added\": \"Lagt til\",\n    \"data-sr-removed\": \"Fjerna\",\n    \"data-sr-remove\": \"Trykk for å fjerne\",\n    \"data-sr-empty\": \"Ingen valde\",\n    \"data-sr-found\": \"Naviger til venstre for å finne %d valde\",\n    \"data-sr-invalid\": \"Ugyldig verdi\",\n    \"data-sr-of\": \"av\",\n    \"data-sr-singular\": \"%d treff\",\n    \"data-sr-plural\": \"%d treff\",\n    \"data-sr-clear\": \"Fjern tekst\",\n  },\n  en: {\n    \"data-sr-added\": \"Added\",\n    \"data-sr-removed\": \"Removed\",\n    \"data-sr-remove\": \"Press to remove\",\n    \"data-sr-empty\": \"No selected\",\n    \"data-sr-found\": \"Navigate left to find %d selected\",\n    \"data-sr-invalid\": \"Invalid value\",\n    \"data-sr-of\": \"of\",\n    \"data-sr-singular\": \"%d hit\",\n    \"data-sr-plural\": \"%d hits\",\n    \"data-sr-clear\": \"Clear text\",\n  },\n};\n\nexport const getTextProps = (lang: keyof typeof i18n) => i18n[lang];\n","import { Label, HelpText } from \"@sikt/sds-form\";\nimport type { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  InputHTMLAttributes,\n  HTMLAttributes,\n  OptionHTMLAttributes,\n  ReactNode,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  forwardRef,\n} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\nimport { ClearButton } from \"./ClearButton\";\nimport { ExpandButton } from \"./ExpandButton\";\nimport { Option } from \"./Option\";\nimport { OptionGroup } from \"./OptionGroup\";\nimport {\n  isOptionGroup,\n  flattenOptions,\n  sanitizeItems,\n  nextItems,\n  getTextProps,\n} from \"./utils\";\n\nexport interface ComboboxItem {\n  label: string;\n  value: string;\n}\n\nexport interface ComboboxOptionGroupProps {\n  /**\n   * Label for the section heading.\n   */\n  label: string;\n  /**\n   * Options within this section.\n   */\n  options: OptionHTMLAttributes<HTMLOptionElement>[];\n}\n\nexport type ComboboxOption =\n  | OptionHTMLAttributes<HTMLOptionElement>\n  | ComboboxOptionGroupProps;\n\ntype ComboboxValue<T extends { multiple: boolean }> = T[\"multiple\"] extends true\n  ? (string | ComboboxItem)[]\n  : string | ComboboxItem;\n\ntype ComboboxBaseProps = {\n  className?: string;\n  /**\n   * Text to show when the input is invalid to help the user enter correct value. This also sets `aria-invalid` &  `aria-errormessage`.\n   */\n  errorText?: ReactNode;\n  /**\n   * Text to show to help the user enter correct value. It's a better pattern to have enough information in the `label`.\n   */\n  helpText?: ReactNode;\n  /**\n   * A list of option objects or section objects containing grouped options:\n   * - **label** Text for the option label or section heading.\n   * - **value** The value submitted with the form (options only).\n   * - **selected** Whether the option is initially selected (options only).\n   */\n  options: ComboboxOption[];\n  /**\n   * Name of the form control. Submitted with the form as part of a name/value pair.\n   *\n   * @default undefined\n   */\n  name?: string;\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Sets language for accessible texts.\n   *\n   * @default \"nb\"\n   */\n  lang?: \"nb\" | \"nn\" | \"en\";\n} & Omit<HTMLAttributes<UHTMLComboboxElement>, \"defaultValue\" | \"onChange\"> &\n  (\n    | {\n        label: NonNullable<ReactNode>;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        /**\n         * Id (or id's) that identifies the element (or elements) that labels the element it is applied to. For accessibility these should NOT be visually hidden.\n         */\n        \"aria-labelledby\": string;\n      }\n  );\n\ninterface ComboboxValueProps<T extends { multiple: boolean }> {\n  /**\n   * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.\n   *\n   * @default false\n   */\n  multiple?: T[\"multiple\"];\n  /**\n   * The selected item of the Combobox.\n   *\n   * If `label` and `value` are the same, each item can be a `string`. Otherwise, each item must be a `ComboboxItem`.\n   *\n   * Using this makes the component controlled and it must be used in combination with `onSelectedChange`.\n   */\n  selected?: ComboboxValue<T> | null;\n  /**\n   * Default selected item when uncontrolled\n   */\n  defaultSelected?: ComboboxValue<T>;\n  /**\n   * Callback when selected items changes\n   */\n  onSelectedChange?: (\n    value: T[\"multiple\"] extends true ? ComboboxItem[] : ComboboxItem | null,\n  ) => void;\n}\n\nexport type ComboboxSingleProps = ComboboxBaseProps &\n  ComboboxValueProps<{ multiple: false }>;\n\nexport type ComboboxMultipleProps = ComboboxBaseProps &\n  ComboboxValueProps<{ multiple: true }> & { multiple: true };\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;\n\nexport type ComboboxSelected =\n  | string\n  | ComboboxItem\n  | (string | ComboboxItem)[]\n  | null;\n\nexport const Combobox = forwardRef<UHTMLComboboxElement, ComboboxProps>(\n  function Combobox(\n    {\n      className,\n      errorText,\n      helpText,\n      label,\n      \"aria-labelledby\": ariaLabelledBy,\n      multiple = false,\n      options,\n      name,\n      inputProps,\n      lang = \"nb\",\n      selected,\n      defaultSelected,\n      onSelectedChange,\n      ...rest\n    },\n    ref,\n  ) {\n    const comboboxRef = useRef<UHTMLComboboxElement>(null);\n    const id = useId();\n    const errorTextId = `${id}-error-text`;\n    const helpTextId = `${id}-help-text`;\n    const listId = `${id}-list`;\n    const textProps = getTextProps(lang);\n    const noSsr = typeof window !== \"undefined\";\n    const isControlled = selected !== undefined;\n    const onSelectedChangeRef = useRef(onSelectedChange);\n    const selectedItemsRef = useRef<ComboboxItem[]>([]);\n\n    const [defaultItems, setDefaultItems] = useState<ComboboxItem[]>(() => {\n      // Priority: defaultSelected prop > selected options in options array\n      const fromProp = sanitizeItems(defaultSelected);\n      if (fromProp.length > 0) {\n        return fromProp;\n      }\n\n      // Extract initially selected options from the options array\n      const initiallySelectedFromOptions = flattenOptions(options)\n        .filter((option) => option.selected)\n        .map((option) => ({\n          label: (option.label ?? option.value ?? \"\") as string,\n          value: (option.value ?? \"\") as string,\n        }));\n\n      return initiallySelectedFromOptions;\n    });\n\n    const selectedItems = selected ? sanitizeItems(selected) : defaultItems;\n    // Keep the ref updated with the latest callback\n    useEffect(() => {\n      selectedItemsRef.current = selectedItems;\n    }, [selectedItems]);\n\n    useEffect(() => {\n      onSelectedChangeRef.current = onSelectedChange;\n    }, [onSelectedChange]);\n\n    // Combine refs\n    useEffect(() => {\n      if (!ref) return;\n      if (typeof ref === \"function\") {\n        ref(comboboxRef.current);\n      } else {\n        ref.current = comboboxRef.current;\n      }\n    }, [ref]);\n\n    /**\n     * Listeners and handling of adding/removing\n     */\n    useEffect(() => {\n      const combobox = comboboxRef.current;\n      const beforeChange = (event: CustomEvent<HTMLDataElement>) => {\n        event.preventDefault();\n        const data = event.detail;\n\n        const nextItem = nextItems(data, selectedItemsRef.current, multiple);\n\n        if (multiple) {\n          // Multiple selection: nextItem should be ComboboxItem[]\n          const callback = onSelectedChangeRef.current as\n            | ((value: ComboboxItem[]) => void)\n            | undefined;\n          callback?.(nextItem as ComboboxItem[]);\n          if (!isControlled) setDefaultItems(nextItem as ComboboxItem[]);\n        } else {\n          // Single selection: nextItem should be ComboboxItem | undefined\n          const callback = onSelectedChangeRef.current as\n            | ((value: ComboboxItem | null) => void)\n            | undefined;\n          callback?.((nextItem as ComboboxItem | undefined) ?? null);\n          if (!isControlled) setDefaultItems(sanitizeItems(nextItem));\n        }\n      };\n\n      combobox?.addEventListener(\n        \"comboboxbeforeselect\",\n        beforeChange as EventListener,\n      );\n      return () =>\n        combobox?.removeEventListener(\n          \"comboboxbeforeselect\",\n          beforeChange as EventListener,\n        );\n    }, [isControlled, multiple]);\n\n    return (\n      <div\n        className={clsx(\n          \"sds-form-field\",\n          errorText && \"sds-form-field--error\",\n          \"sds-combobox\",\n          errorText && \"sds-combobox--invalid\",\n          className,\n        )}\n      >\n        <div className=\"sds-form-field__label-wrapper\">\n          {label !== undefined && (\n            <Label text={label} error={Boolean(errorText)} htmlFor={id} />\n          )}\n          <u-combobox\n            className=\"sds-combobox__combobox\"\n            data-multiple={multiple}\n            ref={comboboxRef}\n            {...textProps}\n            {...rest}\n          >\n            {selectedItems.map((item) => (\n              <data key={item.value} value={item.value}>\n                {item.label}\n              </data>\n            ))}\n            <input\n              suppressHydrationWarning\n              className=\"sds-combobox__input\"\n              {...inputProps}\n              id={id}\n              list={listId}\n              aria-labelledby={ariaLabelledBy}\n            />\n            <ClearButton clearText={textProps[\"data-sr-clear\"]} />\n            <ExpandButton />\n            <u-datalist\n              suppressHydrationWarning\n              className=\"sds-combobox__datalist\"\n              id={listId}\n              data-sr-singular={textProps[\"data-sr-singular\"]}\n              data-sr-plural={textProps[\"data-sr-plural\"]}\n            >\n              {options.map((option) =>\n                isOptionGroup(option) ? (\n                  <OptionGroup\n                    key={option.label}\n                    label={option.label}\n                    options={option.options}\n                  />\n                ) : (\n                  <Option\n                    suppressHydrationWarning\n                    key={option.value?.toString()}\n                    {...option}\n                  />\n                ),\n              )}\n            </u-datalist>\n            {!!name && noSsr && (\n              <select name={name} multiple={multiple} aria-hidden hidden />\n            )}\n          </u-combobox>\n        </div>\n        {helpText && <HelpText id={helpTextId}>{helpText}</HelpText>}\n        {errorText && (\n          <HelpText id={errorTextId} error>\n            {errorText}\n          </HelpText>\n        )}\n      </div>\n    );\n  },\n);\n\nCombobox.displayName = \"Combobox\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikt/sds-combobox",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "license": "UNLICENSED",
   "homepage": "https://designsystem.sikt.no/",
   "repository": {
@@ -34,9 +34,9 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@sikt/sds-core": "^4.6.0",
+    "@sikt/sds-core": "^5.3.0",
     "@sikt/sds-form": "^4.1.1",
-    "@sikt/sds-icons": "^3.2.0",
+    "@sikt/sds-icons": "^4.2.0",
     "@u-elements/u-combobox": "^1.0.7",
     "@u-elements/u-datalist": "^1.1.0"
   },