@sikt/sds-combobox 4.0.1 → 5.0.1

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 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.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@5.0.0...@sikt/sds-combobox@5.0.1) (2026-02-17)
+
+### Bug Fixes
+
+- **combobox:** prevent double badges and crash in multiselect ([9b44a53](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/9b44a5382a0667655f628b0556a84ac08735c9c1))
+- **deps:** update dependency @u-elements/u-combobox to ^1.0.7 ([6738a3c](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/6738a3cfcfe6d3676795929349cfdea8acfd7f9a))
+- **deps:** update dependency @u-elements/u-datalist to ^1.1.0 ([e5940c7](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/e5940c7d4d601034ab21bb2a6001634de404487e))
+
+## [5.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@4.0.1...@sikt/sds-combobox@5.0.0) (2026-01-26)
+
+### ⚠ BREAKING CHANGES
+
+- **combobox:** add predefined i18n
+
+### Features
+
+- **combobox:** add predefined i18n ([bb977ed](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/bb977ed806ed361c9bf467af3d603d6b38b28aef))
+
+### Bug Fixes
+
+- **deps:** update @u-elements/u-combobox for better nvda support ([f827457](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/f827457a9b64fab8592d5c6e63b3f1a8a2a98fde))
+
 ## [4.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@4.0.0...@sikt/sds-combobox@4.0.1) (2026-01-21)
 
 ### Bug Fixes

package/README.md

@@ -18,23 +18,13 @@ import "@sikt/sds-combobox/dist/index.css";
 
 <Combobox
   label="Label"
-  onChange={() => {}}
+  onChange={(event, values) => setValue(values)}
   options={[{ label: "Value 1", value: "1" }]}
+  lang="en"
 />;
 ```
 
-i18n are set with the following props from [u-elements](https://u-elements.github.io/u-elements/elements/u-combobox#u-combobox):
-
-- `data-sr-added="Added"` prefixes announcements about additions.
-- `data-sr-removed="Removed"` prefixes announcements about removals.
-- `data-sr-remove="Press to remove"` announces ability to remove.
-- `data-sr-empty="No selected"` announces no selected items.
-- `data-sr-found="Navigate left to find %d selected"` announces where to find amount of selected items.
-- `data-sr-invalid="Invalid value"` announces if trying to select invalid value.
-- `data-sr-of="of"` separates "number of total" in announcements.
-- `data-sr-singular="%d hit"` announces single hit
-- `data-sr-plural="%d hits"` announces multiple hits
-- `data-sr-clear="Clear text"` announces clear button.
+Accessible texts are set with the `lang`-prop. Missing a language? MRs welcome 🔀
 
 ### Stylesheets & custom markup
 

package/dist/index.d.mts

@@ -38,16 +38,12 @@ interface ComboboxBaseProps extends Omit<HTMLAttributes<UHTMLComboboxElement>, "
      */
     onChange?: (event: CustomEvent<HTMLDataElement>, newValue: OptionHTMLAttributes<HTMLOptionElement>[]) => void;
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
-    "data-sr-added"?: string;
-    "data-sr-removed"?: string;
-    "data-sr-remove"?: string;
-    "data-sr-empty"?: string;
-    "data-sr-found"?: string;
-    "data-sr-invalid"?: string;
-    "data-sr-of"?: string;
-    "data-sr-singular"?: string;
-    "data-sr-plural"?: string;
-    "data-sr-clear"?: string;
+    /**
+     * Sets language for accessible texts.
+     *
+     * @default "nb"
+     */
+    lang?: "nb" | "nn" | "en";
 }
 type ComboboxProps = ComboboxBaseProps & ({
     label: NonNullable<ReactNode>;
@@ -60,7 +56,7 @@ type ComboboxProps = ComboboxBaseProps & ({
     "aria-labelledby": string;
 });
 declare const Combobox: {
-    ({ className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, multiple, options, name, onChange, inputProps, "data-sr-added": dataSrAdded, "data-sr-removed": dataSrRemoved, "data-sr-remove": dataSrRemove, "data-sr-empty": dataSrEmpty, "data-sr-found": dataSrFound, "data-sr-invalid": dataSrInvalid, "data-sr-of": dataSrOf, "data-sr-singular": dataSrSingular, "data-sr-plural": dataSrPlural, "data-sr-clear": dataSrClear, ...rest }: ComboboxProps): react_jsx_runtime.JSX.Element;
+    ({ className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, multiple, options, name, onChange, inputProps, lang, ...rest }: ComboboxProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -38,16 +38,12 @@ interface ComboboxBaseProps extends Omit<HTMLAttributes<UHTMLComboboxElement>, "
      */
     onChange?: (event: CustomEvent<HTMLDataElement>, newValue: OptionHTMLAttributes<HTMLOptionElement>[]) => void;
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
-    "data-sr-added"?: string;
-    "data-sr-removed"?: string;
-    "data-sr-remove"?: string;
-    "data-sr-empty"?: string;
-    "data-sr-found"?: string;
-    "data-sr-invalid"?: string;
-    "data-sr-of"?: string;
-    "data-sr-singular"?: string;
-    "data-sr-plural"?: string;
-    "data-sr-clear"?: string;
+    /**
+     * Sets language for accessible texts.
+     *
+     * @default "nb"
+     */
+    lang?: "nb" | "nn" | "en";
 }
 type ComboboxProps = ComboboxBaseProps & ({
     label: NonNullable<ReactNode>;
@@ -60,7 +56,7 @@ type ComboboxProps = ComboboxBaseProps & ({
     "aria-labelledby": string;
 });
 declare const Combobox: {
-    ({ className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, multiple, options, name, onChange, inputProps, "data-sr-added": dataSrAdded, "data-sr-removed": dataSrRemoved, "data-sr-remove": dataSrRemove, "data-sr-empty": dataSrEmpty, "data-sr-found": dataSrFound, "data-sr-invalid": dataSrInvalid, "data-sr-of": dataSrOf, "data-sr-singular": dataSrSingular, "data-sr-plural": dataSrPlural, "data-sr-clear": dataSrClear, ...rest }: ComboboxProps): react_jsx_runtime.JSX.Element;
+    ({ className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, multiple, options, name, onChange, inputProps, lang, ...rest }: ComboboxProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.js

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

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Combobox.tsx"],"names":["useRef","useId","useEffect","_a","jsxs","clsx","jsx","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} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\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:\n   * - **label** This attribute is text for the label indicating the meaning of the option.\n   * - **value** The content of this attribute represents the value to be submitted with the form, should this option be selected.\n   * - **selected** If present, this Boolean attribute indicates that the option is initially selected.\n   */\n  options: OptionHTMLAttributes<HTMLOptionElement>[];\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  \"data-sr-added\"?: string;\n  \"data-sr-removed\"?: string;\n  \"data-sr-remove\"?: string;\n  \"data-sr-empty\"?: string;\n  \"data-sr-found\"?: string;\n  \"data-sr-invalid\"?: string;\n  \"data-sr-of\"?: string;\n  \"data-sr-singular\"?: string;\n  \"data-sr-plural\"?: string;\n  \"data-sr-clear\"?: string;\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\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  \"data-sr-added\": dataSrAdded = \"Lagt til\",\n  \"data-sr-removed\": dataSrRemoved = \"Fjernet\",\n  \"data-sr-remove\": dataSrRemove = \"Trykk for å fjerne\",\n  \"data-sr-empty\": dataSrEmpty = \"Ingen valgte\",\n  \"data-sr-found\": dataSrFound = \"Naviger til venstre for å finne %d valgte\",\n  \"data-sr-invalid\": dataSrInvalid = \"Ugyldig verdi\",\n  \"data-sr-of\": dataSrOf = \"av\",\n  \"data-sr-singular\": dataSrSingular = \"%d treff\",\n  \"data-sr-plural\": dataSrPlural = \"%d treff\",\n  \"data-sr-clear\": dataSrClear = \"Fjern tekst\",\n  ...rest\n}: ComboboxProps) => {\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\n  useEffect(() => {\n    const handleOnChange = (e: CustomEvent<HTMLDataElement>) => {\n      e.preventDefault();\n\n      const index = options.findIndex((item) => item.value === e.detail.value);\n      const newOption = options[index];\n      if (e.detail.isConnected) {\n        newOption.selected = e.detail.isConnected;\n      } else {\n        delete newOption.selected;\n      }\n      onChange?.(e, options);\n    };\n\n    comboboxRef.current?.addEventListener(\n      \"comboboxafterselect\",\n      handleOnChange,\n    );\n    return () => {\n      comboboxRef.current?.removeEventListener(\n        \"comboboxafterselect\",\n        handleOnChange,\n      );\n    };\n  }, [options, onChange]);\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          data-sr-added={dataSrAdded}\n          data-sr-removed={dataSrRemoved}\n          data-sr-remove={dataSrRemove}\n          data-sr-empty={dataSrEmpty}\n          data-sr-found={dataSrFound}\n          data-sr-invalid={dataSrInvalid}\n          data-sr-of={dataSrOf}\n          {...rest}\n        >\n          {options\n            .filter((option) => option.selected)\n            .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>{dataSrClear}</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={dataSrSingular}\n            data-sr-plural={dataSrPlural}\n          >\n            {options.map((option) => (\n              <u-option\n                className=\"sds-combobox__datalist-option\"\n                key={option.value?.toString()}\n                value={option.value}\n              >\n                {option.label}\n              </u-option>\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/Combobox.tsx"],"names":["useRef","useId","useState","useEffect","_a","jsxs","clsx","jsx","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 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:\n   * - **label** This attribute is text for the label indicating the meaning of the option.\n   * - **value** The content of this attribute represents the value to be submitted with the form, should this option be selected.\n   * - **selected** If present, this Boolean attribute indicates that the option is initially selected.\n   */\n  options: OptionHTMLAttributes<HTMLOptionElement>[];\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) => {\n  return i18n[lang];\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 comboboxRef = useRef<UHTMLComboboxElement>(null);\n  const optionsRef = useRef(options);\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    options.filter((option) => option.selected),\n  );\n\n  useEffect(() => {\n    optionsRef.current = options;\n    if (initialSelectedOptions.length === 0 && !hasInteracted.current) {\n      const selected = options.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              <u-option\n                className=\"sds-combobox__datalist-option\"\n                key={option.value?.toString()}\n                value={option.value}\n              >\n                {option.label}\n              </u-option>\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"]}

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

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Combobox.tsx"],"names":["_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} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\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:\n   * - **label** This attribute is text for the label indicating the meaning of the option.\n   * - **value** The content of this attribute represents the value to be submitted with the form, should this option be selected.\n   * - **selected** If present, this Boolean attribute indicates that the option is initially selected.\n   */\n  options: OptionHTMLAttributes<HTMLOptionElement>[];\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  \"data-sr-added\"?: string;\n  \"data-sr-removed\"?: string;\n  \"data-sr-remove\"?: string;\n  \"data-sr-empty\"?: string;\n  \"data-sr-found\"?: string;\n  \"data-sr-invalid\"?: string;\n  \"data-sr-of\"?: string;\n  \"data-sr-singular\"?: string;\n  \"data-sr-plural\"?: string;\n  \"data-sr-clear\"?: string;\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\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  \"data-sr-added\": dataSrAdded = \"Lagt til\",\n  \"data-sr-removed\": dataSrRemoved = \"Fjernet\",\n  \"data-sr-remove\": dataSrRemove = \"Trykk for å fjerne\",\n  \"data-sr-empty\": dataSrEmpty = \"Ingen valgte\",\n  \"data-sr-found\": dataSrFound = \"Naviger til venstre for å finne %d valgte\",\n  \"data-sr-invalid\": dataSrInvalid = \"Ugyldig verdi\",\n  \"data-sr-of\": dataSrOf = \"av\",\n  \"data-sr-singular\": dataSrSingular = \"%d treff\",\n  \"data-sr-plural\": dataSrPlural = \"%d treff\",\n  \"data-sr-clear\": dataSrClear = \"Fjern tekst\",\n  ...rest\n}: ComboboxProps) => {\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\n  useEffect(() => {\n    const handleOnChange = (e: CustomEvent<HTMLDataElement>) => {\n      e.preventDefault();\n\n      const index = options.findIndex((item) => item.value === e.detail.value);\n      const newOption = options[index];\n      if (e.detail.isConnected) {\n        newOption.selected = e.detail.isConnected;\n      } else {\n        delete newOption.selected;\n      }\n      onChange?.(e, options);\n    };\n\n    comboboxRef.current?.addEventListener(\n      \"comboboxafterselect\",\n      handleOnChange,\n    );\n    return () => {\n      comboboxRef.current?.removeEventListener(\n        \"comboboxafterselect\",\n        handleOnChange,\n      );\n    };\n  }, [options, onChange]);\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          data-sr-added={dataSrAdded}\n          data-sr-removed={dataSrRemoved}\n          data-sr-remove={dataSrRemove}\n          data-sr-empty={dataSrEmpty}\n          data-sr-found={dataSrFound}\n          data-sr-invalid={dataSrInvalid}\n          data-sr-of={dataSrOf}\n          {...rest}\n        >\n          {options\n            .filter((option) => option.selected)\n            .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>{dataSrClear}</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={dataSrSingular}\n            data-sr-plural={dataSrPlural}\n          >\n            {options.map((option) => (\n              <u-option\n                className=\"sds-combobox__datalist-option\"\n                key={option.value?.toString()}\n                value={option.value}\n              >\n                {option.label}\n              </u-option>\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/Combobox.tsx"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoFA,IAAM,IAAO,GAAA;AAAA,EACX,EAAI,EAAA;AAAA,IACF,eAAiB,EAAA,UAAA;AAAA,IACjB,iBAAmB,EAAA,SAAA;AAAA,IACnB,gBAAkB,EAAA,uBAAA;AAAA,IAClB,eAAiB,EAAA,cAAA;AAAA,IACjB,eAAiB,EAAA,8CAAA;AAAA,IACjB,iBAAmB,EAAA,eAAA;AAAA,IACnB,YAAc,EAAA,IAAA;AAAA,IACd,kBAAoB,EAAA,UAAA;AAAA,IACpB,gBAAkB,EAAA,UAAA;AAAA,IAClB,eAAiB,EAAA;AAAA,GACnB;AAAA,EACA,EAAI,EAAA;AAAA,IACF,eAAiB,EAAA,UAAA;AAAA,IACjB,iBAAmB,EAAA,QAAA;AAAA,IACnB,gBAAkB,EAAA,uBAAA;AAAA,IAClB,eAAiB,EAAA,aAAA;AAAA,IACjB,eAAiB,EAAA,6CAAA;AAAA,IACjB,iBAAmB,EAAA,eAAA;AAAA,IACnB,YAAc,EAAA,IAAA;AAAA,IACd,kBAAoB,EAAA,UAAA;AAAA,IACpB,gBAAkB,EAAA,UAAA;AAAA,IAClB,eAAiB,EAAA;AAAA,GACnB;AAAA,EACA,EAAI,EAAA;AAAA,IACF,eAAiB,EAAA,OAAA;AAAA,IACjB,iBAAmB,EAAA,SAAA;AAAA,IACnB,gBAAkB,EAAA,iBAAA;AAAA,IAClB,eAAiB,EAAA,aAAA;AAAA,IACjB,eAAiB,EAAA,mCAAA;AAAA,IACjB,iBAAmB,EAAA,eAAA;AAAA,IACnB,YAAc,EAAA,IAAA;AAAA,IACd,kBAAoB,EAAA,QAAA;AAAA,IACpB,gBAAkB,EAAA,SAAA;AAAA,IAClB,eAAiB,EAAA;AAAA;AAErB,CAAA;AAEA,IAAM,YAAA,GAAe,CAAC,IAA4B,KAAA;AAChD,EAAA,OAAO,KAAK,IAAI,CAAA;AAClB,CAAA;AAEa,IAAA,QAAA,GAAW,CAAC,EAaJ,KAAA;AAbI,EACvB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,iBAAmB,EAAA,cAAA;AAAA,IACnB,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAO,GAAA;AAAA,GA1IT,GA+HyB,EAYpB,EAAA,IAAA,GAAA,SAAA,CAZoB,EAYpB,EAAA;AAAA,IAXH,WAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAM,MAAA,WAAA,GAAc,OAA6B,IAAI,CAAA;AACrD,EAAM,MAAA,UAAA,GAAa,OAAO,OAAO,CAAA;AACjC,EAAM,MAAA,WAAA,GAAc,OAAO,QAAQ,CAAA;AACnC,EAAM,MAAA,aAAA,GAAgB,OAAO,KAAK,CAAA;AAClC,EAAA,MAAM,KAAK,KAAM,EAAA;AACjB,EAAM,MAAA,WAAA,GAAc,GAAG,MAAE,CAAA,EAAA,EAAA,aAAA,CAAA;AACzB,EAAM,MAAA,UAAA,GAAa,GAAG,MAAE,CAAA,EAAA,EAAA,YAAA,CAAA;AACxB,EAAM,MAAA,MAAA,GAAS,GAAG,MAAE,CAAA,EAAA,EAAA,OAAA,CAAA;AACpB,EAAM,MAAA,SAAA,GAAY,aAAa,IAAI,CAAA;AAEnC,EAAM,MAAA,CAAC,sBAAwB,EAAA,yBAAyB,CAAI,GAAA,QAAA;AAAA,IAAS,MACnE,OAAQ,CAAA,MAAA,CAAO,CAAC,MAAA,KAAW,OAAO,QAAQ;AAAA,GAC5C;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAU,GAAA,OAAA;AACrB,IAAA,IAAI,sBAAuB,CAAA,MAAA,KAAW,CAAK,IAAA,CAAC,cAAc,OAAS,EAAA;AACjE,MAAA,MAAM,WAAW,OAAQ,CAAA,MAAA,CAAO,CAAC,MAAA,KAAW,OAAO,QAAQ,CAAA;AAC3D,MAAI,IAAA,QAAA,CAAS,SAAS,CAAG,EAAA;AAEvB,QAAA,yBAAA,CAA0B,QAAQ,CAAA;AAAA;AACpC;AACF,GACC,EAAA,CAAC,OAAS,EAAA,sBAAA,CAAuB,MAAM,CAAC,CAAA;AAE3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,OAAU,GAAA,QAAA;AAAA,GACxB,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,aAAa,WAAY,CAAA,OAAA;AAE/B,IAAM,MAAA,cAAA,GAAiB,CAAC,CAAoC,KAAA;AA7KhE,MAAAA,IAAAA,GAAAA;AA8KM,MAAA,CAAA,CAAE,cAAe,EAAA;AACjB,MAAA,aAAA,CAAc,OAAU,GAAA,IAAA;AAExB,MAAA,MAAM,iBAAiB,UAAW,CAAA,OAAA;AAClC,MAAA,MAAM,QAAQ,cAAe,CAAA,SAAA;AAAA,QAC3B,CAAC,IAAA,KAAS,IAAK,CAAA,KAAA,KAAU,EAAE,MAAO,CAAA;AAAA,OACpC;AACA,MAAA,IAAI,UAAU,EAAI,EAAA;AAClB,MAAM,MAAA,SAAA,GAAY,eAAe,KAAK,CAAA;AACtC,MAAI,IAAA,CAAA,CAAE,OAAO,WAAa,EAAA;AACxB,QAAA,SAAA,CAAU,QAAW,GAAA,IAAA;AAAA,OAChB,MAAA;AACL,QAAA,OAAO,SAAU,CAAA,QAAA;AAAA;AAEnB,MAAA,CAAAA,MAAA,WAAY,CAAA,OAAA,KAAZ,IAAAA,GAAAA,MAAAA,GAAAA,GAAAA,CAAA,kBAAsB,CAAG,EAAA,cAAA,CAAA;AAAA,KAC3B;AAEA,IAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,iBAAiB,qBAAuB,EAAA,cAAA,CAAA;AACpD,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,oBAAoB,qBAAuB,EAAA,cAAA,CAAA;AAAA,KACzD;AAAA,GACF,EAAG,EAAE,CAAA;AAEL,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,gBAAA;AAAA,QACA,SAAa,IAAA,uBAAA;AAAA,QACb,cAAA;AAAA,QACA,SAAa,IAAA,uBAAA;AAAA,QACb;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,+BACZ,EAAA,QAAA,EAAA;AAAA,UAAU,KAAA,KAAA,MAAA,oBACR,GAAA,CAAA,KAAA,EAAA,EAAM,IAAM,EAAA,KAAA,EAAO,OAAO,OAAQ,CAAA,SAAS,CAAG,EAAA,OAAA,EAAS,EAAI,EAAA,CAAA;AAAA,0BAE9D,IAAA;AAAA,YAAC,YAAA;AAAA,YAAA,aAAA,CAAA,cAAA,CAAA,cAAA,CAAA;AAAA,cACC,SAAU,EAAA,wBAAA;AAAA,cACV,eAAe,EAAA,QAAA;AAAA,cACf,GAAK,EAAA;AAAA,aAAA,EACD,YACA,IALL,CAAA,EAAA;AAAA,cAOE,QAAA,EAAA;AAAA,gBAAuB,sBAAA,CAAA,GAAA,CAAI,CAAC,MAAQ,KAAA;AA1N/C,kBAAAA,IAAAA,GAAAA;AA2NY,kBAAC,uBAAA,GAAA,CAAA,MAAA,EAAA,EAAoC,KAAO,EAAA,MAAA,CAAO,KAChD,EAAA,QAAA,EAAA,MAAA,CAAO,KADCA,EAAAA,EAAAA,CAAAA,GAAAA,GAAA,MAAO,CAAA,KAAA,KAAP,IAAAA,GAAAA,MAAAA,GAAAA,GAAAA,CAAc,QAEzB,EAAA,CAAA;AAAA,iBACD,CAAA;AAAA,gCACD,GAAA;AAAA,kBAAC,OAAA;AAAA,kBAAA,aAAA,CAAA,cAAA,CAAA;AAAA,oBACC,SAAU,EAAA,qBAAA;AAAA,oBACV,EAAA;AAAA,oBACA,IAAM,EAAA;AAAA,mBAAA,EACF,UAJL,CAAA,EAAA;AAAA,oBAKC,iBAAiB,EAAA;AAAA,mBAAA;AAAA,iBACnB;AAAA,gCACA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,sBACb,EAAA,QAAA,EAAA;AAAA,kCAAC,GAAA,CAAA,gBAAA,EAAA,EAAkB,QAAU,EAAA,SAAA,CAAA,eAAe,CAAE,EAAA,CAAA;AAAA,sCAC7C,MAAK,EAAA,EAAA,SAAA,EAAU,2BACd,EAAA,QAAA,kBAAA,GAAA,CAAC,cAAW,CACd,EAAA;AAAA,iBACF,EAAA,CAAA;AAAA,gCACA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAU,sBACd,EAAA,QAAA,kBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAU,2BACd,EAAA,QAAA,kBAAA,GAAA,CAAC,iBAAkB,EAAA,EAAA,CAAA,EACrB,CACF,EAAA,CAAA;AAAA,gCACA,GAAA;AAAA,kBAAC,YAAA;AAAA,kBAAA;AAAA,oBACC,SAAU,EAAA,wBAAA;AAAA,oBACV,EAAI,EAAA,MAAA;AAAA,oBACJ,kBAAA,EAAkB,UAAU,kBAAkB,CAAA;AAAA,oBAC9C,gBAAA,EAAgB,UAAU,gBAAgB,CAAA;AAAA,oBAEzC,QAAA,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,MAAQ,KAAA;AAvPlC,sBAAAA,IAAAA,GAAAA;AAwPc,sBAAA,uBAAA,GAAA;AAAA,wBAAC,UAAA;AAAA,wBAAA;AAAA,0BACC,SAAU,EAAA,+BAAA;AAAA,0BAEV,OAAO,MAAO,CAAA,KAAA;AAAA,0BAEb,QAAO,EAAA,MAAA,CAAA;AAAA,yBAAA;AAAA,wBAAA,CAHHA,GAAA,GAAA,MAAA,CAAO,KAAP,KAAA,IAAA,GAAA,MAAA,GAAAA,GAAc,CAAA,QAAA;AAAA,uBAIrB;AAAA,qBACD;AAAA;AAAA,iBACH;AAAA,gBACC,CAAC,CAAC,IAAQ,oBAAA,GAAA,CAAC,YAAO,IAAY,EAAA,aAAA,EAAW,IAAC,EAAA,MAAA,EAAM,IAAC,EAAA;AAAA;AAAA,aAAA;AAAA;AACpD,SACF,EAAA,CAAA;AAAA,QACC,QAAY,oBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,EAAA,EAAI,YAAa,QAAS,EAAA,QAAA,EAAA,CAAA;AAAA,QAChD,6BACE,GAAA,CAAA,QAAA,EAAA,EAAS,IAAI,WAAa,EAAA,KAAA,EAAK,MAC7B,QACH,EAAA,SAAA,EAAA;AAAA;AAAA;AAAA,GAEJ;AAEJ;AAEA,QAAA,CAAS,WAAc,GAAA,UAAA","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 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:\n   * - **label** This attribute is text for the label indicating the meaning of the option.\n   * - **value** The content of this attribute represents the value to be submitted with the form, should this option be selected.\n   * - **selected** If present, this Boolean attribute indicates that the option is initially selected.\n   */\n  options: OptionHTMLAttributes<HTMLOptionElement>[];\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) => {\n  return i18n[lang];\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 comboboxRef = useRef<UHTMLComboboxElement>(null);\n  const optionsRef = useRef(options);\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    options.filter((option) => option.selected),\n  );\n\n  useEffect(() => {\n    optionsRef.current = options;\n    if (initialSelectedOptions.length === 0 && !hasInteracted.current) {\n      const selected = options.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              <u-option\n                className=\"sds-combobox__datalist-option\"\n                key={option.value?.toString()}\n                value={option.value}\n              >\n                {option.label}\n              </u-option>\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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikt/sds-combobox",
-  "version": "4.0.1",
+  "version": "5.0.1",
   "license": "UNLICENSED",
   "homepage": "https://designsystem.sikt.no/",
   "repository": {
@@ -37,8 +37,8 @@
     "@sikt/sds-core": "^4.6.0",
     "@sikt/sds-form": "^4.1.1",
     "@sikt/sds-icons": "^3.2.0",
-    "@u-elements/u-combobox": "^1.0.5",
-    "@u-elements/u-datalist": "^1.0.14"
+    "@u-elements/u-combobox": "^1.0.7",
+    "@u-elements/u-datalist": "^1.1.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",