@sikt/sds-combobox 5.2.0 → 5.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,13 @@
2
2
 
3
3
  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.
4
4
 
5
+ ## [5.2.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@5.2.0...@sikt/sds-combobox@5.2.1) (2026-03-31)
6
+
7
+ ### Bug Fixes
8
+
9
+ - **combobox:** resolve SSR hydration errors and initial flash ([1b535c5](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/1b535c5fd286e41bfcf123ff70a669f09f8e74e1))
10
+ - **deps:** update eslint ([a7e8284](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/a7e828486c7a9a74495ec1fc4e26f3ac69845030))
11
+
5
12
  ## [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)
6
13
 
7
14
  ### Features
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "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
1
+ "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"),s=require("@sikt/sds-icons"),l=require("react/jsx-runtime"),n=Object.defineProperty,o=Object.defineProperties,d=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,u=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,p=(e,r,a)=>r in e?n(e,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[r]=a,b=(e,r)=>{for(var a in r||(r={}))u.call(r,a)&&p(e,a,r[a]);if(i)for(var a of i(r))c.call(r,a)&&p(e,a,r[a]);return e},f=(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})=>l.jsxs("del",{suppressHydrationWarning:!0,className:"sds-combobox__button",children:[l.jsx(t.ScreenReaderOnly,{children:e}),l.jsx("span",{className:"sds-combobox__button-icon",children:l.jsx(s.CancelIcon,{})})]}),x=()=>l.jsx("span",{className:"sds-combobox__button",children:l.jsx("span",{className:"sds-combobox__button-icon",children:l.jsx(s.ExpandShowAltIcon,{})})}),g=e=>{var r=e,{label:a,value:t}=r,s=v(r,["label","value"]);return l.jsx("u-option",f(b({className:"sds-combobox__datalist-option",value:t,suppressHydrationWarning:!0},s),{children:a}))},j=({label:e,options:r})=>{const t=a.useId();return l.jsxs("div",{className:"sds-combobox__datalist-group",role:"group",children:[l.jsx("span",{className:"sds-combobox__datalist-group-label",id:t,children:e}),r.map(e=>{var r;return l.jsx(g,b({"aria-describedby":t,suppressHydrationWarning:!0},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,s){var n=t,{className:o,errorText:d,helpText:i,label:u,"aria-labelledby":c,multiple:p=!1,options:N,name:O,inputProps:H,lang:S="nb",selected:T,defaultSelected:k,onSelectedChange:C}=n,E=v(n,["className","errorText","helpText","label","aria-labelledby","multiple","options","name","inputProps","lang","selected","defaultSelected","onSelectedChange"]);const W=a.useRef(null),q=a.useId(),I="".concat(q,"-error-text"),P="".concat(q,"-help-text"),w="".concat(q,"-list"),A=(e=>_[e])(S),R=void 0!==T,F=a.useRef(C),L=a.useRef([]),[D,U]=a.useState(!1),[B,M]=a.useState(()=>{const e=h(k);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:""}})}),z=T?h(T):B;return a.useEffect(()=>{L.current=z},[z]),a.useEffect(()=>{U(!0)},[]),a.useEffect(()=>{F.current=C},[C]),a.useEffect(()=>{s&&("function"==typeof s?s(W.current):s.current=W.current)},[s]),a.useEffect(()=>{const e=W.current,r=e=>{e.preventDefault();const r=function(e,r,a){const t={label:(s=e,(null==(l=s.textContent)?void 0:l.trim())||""),value:e.value};var s,l;return a?e.isConnected?h(r).filter(({value:e})=>e!==t.value):[...h(r),t]:e.isConnected?void 0:t}(e.detail,L.current,p);if(p){const e=F.current;null==e||e(r),R||M(r)}else{const e=F.current;null==e||e(null!=r?r:null),R||M(h(r))}};return null==e||e.addEventListener("comboboxbeforeselect",r),()=>null==e?void 0:e.removeEventListener("comboboxbeforeselect",r)},[R,p]),l.jsxs("div",{className:r.clsx("sds-form-field",d&&"sds-form-field--error","sds-combobox",d&&"sds-combobox--invalid",o),children:[l.jsxs("div",{className:"sds-form-field__label-wrapper",children:[void 0!==u&&l.jsx(e.Label,{text:u,error:Boolean(d),htmlFor:q}),l.jsxs("u-combobox",f(b(b({className:"sds-combobox__combobox","data-multiple":p,ref:W,suppressHydrationWarning:!0},A),E),{children:[z.map(e=>l.jsx("data",{value:e.value,suppressHydrationWarning:!0,children:e.label},e.value)),l.jsx("input",f(b({suppressHydrationWarning:!0,className:"sds-combobox__input"},H),{id:q,list:w,"aria-labelledby":c})),l.jsx(m,{clearText:A["data-sr-clear"]}),l.jsx(x,{}),l.jsx("u-datalist",{suppressHydrationWarning:!0,className:"sds-combobox__datalist",id:w,hidden:!0,"data-sr-singular":A["data-sr-singular"],"data-sr-plural":A["data-sr-plural"],children:N.map(e=>{var r;return y(e)?l.jsx(j,{label:e.label,options:e.options},e.label):l.jsx(g,b({suppressHydrationWarning:!0},e),null==(r=e.value)?void 0:r.toString())})}),!!O&&D&&l.jsx("select",{name:O,multiple:p,"aria-hidden":!0,hidden:!0,suppressHydrationWarning:!0})]}))]}),i&&l.jsx(e.HelpText,{id:P,children:i}),d&&l.jsx(e.HelpText,{id:I,error:!0,children:d})]})});N.displayName="Combobox",exports.Combobox=N;//# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"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"]}
1
+ {"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,IAAM,WAAA,GAAc,CAAC,EAAE,SAAA,EAAU,qCACrC,KAAA,EAAA,EAAI,wBAAA,EAAwB,IAAA,EAAC,SAAA,EAAU,sBAAA,EACtC,QAAA,EAAA;AAAA,kBAAAA,cAAA,CAACC,4BAAkB,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,iCAC5B,MAAA,EAAA,EAAK,SAAA,EAAU,2BAAA,EACd,QAAA,kBAAAD,cAAA,CAACE,uBAAW,CAAA,EACd;AAAA,CAAA,EACF,CAAA;ACXK,IAAM,eAAe,sBAC1BF,cAAAA,CAAC,MAAA,EAAA,EAAK,WAAU,sBAAA,EACd,QAAA,kBAAAA,cAAAA,CAAC,MAAA,EAAA,EAAK,WAAU,2BAAA,EACd,QAAA,kBAAAA,cAAAA,CAACG,0BAAA,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,uBAAAH,cAAAA;AAAA,IAAC,UAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,SAAA,EAAU,+BAAA;AAAA,MACV,KAAA;AAAA,MACA,wBAAA,EAAwB;AAAA,KAAA,EACpB,IAAA,CAAA,EAJL;AAAA,MAME,QAAA,EAAA;AAAA,KAAA;AAAA,GACH;AAAA,CAAA;ACXK,IAAM,WAAA,GAAc,CAAC,EAAE,KAAA,EAAO,SAAQ,KAAgC;AAC3E,EAAA,MAAM,KAAKI,WAAA,EAAM;AAEjB,EAAA,uBACEC,eAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EAA+B,MAAK,OAAA,EACjD,QAAA,EAAA;AAAA,oBAAAL,cAAAA,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,cAAAA;AAAA,QAAC,MAAA;AAAA,QAAA,cAAA,CAAA;AAAA,UAEC,kBAAA,EAAkB,EAAA;AAAA,UAClB,wBAAA,EAAwB;AAAA,SAAA,EACpB,MAAA,CAAA;AAAA,QAAA,CAHC,EAAA,GAAA,MAAA,CAAO,UAAP,IAAA,GAAA,MAAA,GAAA,EAAA,CAAc,QAAA;AAAA,OAIrB;AAAA,IAAA,CACD;AAAA,GAAA,EACH,CAAA;AAEJ,CAAA;;;ACdO,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,GAAWM,gBAAA;AAAA,EACtB,SAASC,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,GAAcC,aAA6B,IAAI,CAAA;AACrD,IAAA,MAAM,KAAKJ,WAAAA,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,eAAe,QAAA,KAAa,MAAA;AAClC,IAAA,MAAM,mBAAA,GAAsBI,aAAO,gBAAgB,CAAA;AACnD,IAAA,MAAM,gBAAA,GAAmBA,YAAA,CAAuB,EAAE,CAAA;AAClD,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAS,KAAK,CAAA;AAEhD,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,eAAyB,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,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,gBAAA,CAAiB,OAAA,GAAU,aAAA;AAAA,IAC7B,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAGlB,IAAAA,eAAA,CAAU,MAAM;AAEd,MAAA,YAAA,CAAa,IAAI,CAAA;AAAA,IACnB,CAAA,EAAG,EAAE,CAAA;AAEL,IAAAA,eAAA,CAAU,MAAM;AACd,MAAA,mBAAA,CAAoB,OAAA,GAAU,gBAAA;AAAA,IAChC,CAAA,EAAG,CAAC,gBAAgB,CAAC,CAAA;AAGrB,IAAAA,eAAA,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,IAAAA,eAAA,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,uBACEP,eAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWQ,SAAA;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,0BAAAR,eAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+BAAA,EACZ,QAAA,EAAA;AAAA,YAAA,KAAA,KAAU,MAAA,oBACTL,cAAAA,CAACc,aAAA,EAAA,EAAM,IAAA,EAAM,KAAA,EAAO,KAAA,EAAO,OAAA,CAAQ,SAAS,CAAA,EAAG,OAAA,EAAS,EAAA,EAAI,CAAA;AAAA,4BAE9DT,eAAAA;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,WAAA;AAAA,gBACL,wBAAA,EAAwB;AAAA,eAAA,EACpB,YACA,IAAA,CAAA,EANL;AAAA,gBAQE,QAAA,EAAA;AAAA,kBAAA,aAAA,CAAc,GAAA,CAAI,CAAC,IAAA,qBAClBL,cAAAA;AAAA,oBAAC,MAAA;AAAA,oBAAA;AAAA,sBAEC,OAAO,IAAA,CAAK,KAAA;AAAA,sBACZ,wBAAA,EAAwB,IAAA;AAAA,sBAEvB,QAAA,EAAA,IAAA,CAAK;AAAA,qBAAA;AAAA,oBAJD,IAAA,CAAK;AAAA,mBAMb,CAAA;AAAA,kCACDA,cAAAA;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,cAAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAW,SAAA,CAAU,eAAe,CAAA,EAAG,CAAA;AAAA,kCACpDA,eAAC,YAAA,EAAA,EAAa,CAAA;AAAA,kCACdA,cAAAA;AAAA,oBAAC,YAAA;AAAA,oBAAA;AAAA,sBACC,wBAAA,EAAwB,IAAA;AAAA,sBACxB,SAAA,EAAU,wBAAA;AAAA,sBACV,EAAA,EAAI,MAAA;AAAA,sBACJ,MAAA,EAAM,IAAA;AAAA,sBACN,kBAAA,EAAkB,UAAU,kBAAkB,CAAA;AAAA,sBAC9C,gBAAA,EAAgB,UAAU,gBAAgB,CAAA;AAAA,sBAEzC,QAAA,EAAA,OAAA,CAAQ,GAAA;AAAA,wBAAI,CAAC,MAAA,KAAQ;AA9SpC,0BAAA,IAAAU,GAAAA;AA+SgB,0BAAA,OAAA,aAAA,CAAc,MAAM,oBAClBV,cAAAA;AAAA,4BAAC,WAAA;AAAA,4BAAA;AAAA,8BAEC,OAAO,MAAA,CAAO,KAAA;AAAA,8BACd,SAAS,MAAA,CAAO;AAAA,6BAAA;AAAA,4BAFX,MAAA,CAAO;AAAA,8CAKdA,cAAAA;AAAA,4BAAC,MAAA;AAAA,4BAAA,cAAA,CAAA;AAAA,8BACC,wBAAA,EAAwB;AAAA,6BAAA,EAEpB,MAAA,CAAA;AAAA,4BAAA,CADCU,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,SAAA,oBACTV,cAAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBACC,IAAA;AAAA,sBACA,QAAA;AAAA,sBACA,aAAA,EAAW,IAAA;AAAA,sBACX,MAAA,EAAM,IAAA;AAAA,sBACN,wBAAA,EAAwB;AAAA;AAAA;AAC1B;AAAA,eAAA;AAAA;AAEJ,WAAA,EACF,CAAA;AAAA,UACC,4BAAYA,cAAAA,CAACe,gBAAA,EAAA,EAAS,EAAA,EAAI,YAAa,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,UAChD,SAAA,oBACCf,cAAAA,CAACe,gBAAA,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.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\n className=\"sds-combobox__datalist-option\"\n value={value}\n suppressHydrationWarning\n {...rest}\n >\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 suppressHydrationWarning\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 isControlled = selected !== undefined;\n const onSelectedChangeRef = useRef(onSelectedChange);\n const selectedItemsRef = useRef<ComboboxItem[]>([]);\n const [isMounted, setIsMounted] = useState(false);\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 // Set mounted state after hydration\n useEffect(() => {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setIsMounted(true);\n }, []);\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 suppressHydrationWarning\n {...textProps}\n {...rest}\n >\n {selectedItems.map((item) => (\n <data\n key={item.value}\n value={item.value}\n suppressHydrationWarning\n >\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 hidden\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 && isMounted && (\n <select\n name={name}\n multiple={multiple}\n aria-hidden\n hidden\n suppressHydrationWarning\n />\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 CHANGED
@@ -1 +1 @@
1
- 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
1
+ import{Label as e,HelpText as r}from"@sikt/sds-form";import{clsx as a}from"clsx/lite";import{forwardRef as t,useRef as l,useId as n,useState as s,useEffect as o}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 p}from"react/jsx-runtime";var m=Object.defineProperty,b=Object.defineProperties,v=Object.getOwnPropertyDescriptors,f=Object.getOwnPropertySymbols,g=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable,x=(e,r,a)=>r in e?m(e,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[r]=a,h=(e,r)=>{for(var a in r||(r={}))g.call(r,a)&&x(e,a,r[a]);if(f)for(var a of f(r))y.call(r,a)&&x(e,a,r[a]);return e},_=(e,r)=>b(e,v(r)),N=(e,r)=>{var a={};for(var t in e)g.call(e,t)&&r.indexOf(t)<0&&(a[t]=e[t]);if(null!=e&&f)for(var t of f(e))r.indexOf(t)<0&&y.call(e,t)&&(a[t]=e[t]);return a},j=({clearText:e})=>u("del",{suppressHydrationWarning:!0,className:"sds-combobox__button",children:[p(d,{children:e}),p("span",{className:"sds-combobox__button-icon",children:p(i,{})})]}),O=()=>p("span",{className:"sds-combobox__button",children:p("span",{className:"sds-combobox__button-icon",children:p(c,{})})}),k=e=>{var r=e,{label:a,value:t}=r,l=N(r,["label","value"]);return p("u-option",_(h({className:"sds-combobox__datalist-option",value:t,suppressHydrationWarning:!0},l),{children:a}))},H=({label:e,options:r})=>{const a=n();return u("div",{className:"sds-combobox__datalist-group",role:"group",children:[p("span",{className:"sds-combobox__datalist-group-label",id:a,children:e}),r.map(e=>{var r;return p(k,h({"aria-describedby":a,suppressHydrationWarning:!0},e),null==(r=e.value)?void 0:r.toString())})]})},W=e=>"options"in e&&Array.isArray(e.options),P=(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 T={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"}},C=t(function(t,d){var i=t,{className:c,errorText:m,helpText:b,label:v,"aria-labelledby":f,multiple:g=!1,options:y,name:x,inputProps:C,lang:S="nb",selected:w,defaultSelected:A,onSelectedChange:F}=i,I=N(i,["className","errorText","helpText","label","aria-labelledby","multiple","options","name","inputProps","lang","selected","defaultSelected","onSelectedChange"]);const L=l(null),E=n(),D="".concat(E,"-error-text"),U="".concat(E,"-help-text"),B="".concat(E,"-list"),M=(e=>T[e])(S),R=void 0!==w,q=l(F),z=l([]),[G,J]=s(!1),[K,Q]=s(()=>{const e=P(A);if(e.length>0)return e;var r;return(r=y,r.flatMap(e=>W(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:""}})}),V=w?P(w):K;return o(()=>{z.current=V},[V]),o(()=>{J(!0)},[]),o(()=>{q.current=F},[F]),o(()=>{d&&("function"==typeof d?d(L.current):d.current=L.current)},[d]),o(()=>{const e=L.current,r=e=>{e.preventDefault();const r=function(e,r,a){const t={label:(l=e,(null==(n=l.textContent)?void 0:n.trim())||""),value:e.value};var l,n;return a?e.isConnected?P(r).filter(({value:e})=>e!==t.value):[...P(r),t]:e.isConnected?void 0:t}(e.detail,z.current,g);if(g){const e=q.current;null==e||e(r),R||Q(r)}else{const e=q.current;null==e||e(null!=r?r:null),R||Q(P(r))}};return null==e||e.addEventListener("comboboxbeforeselect",r),()=>null==e?void 0:e.removeEventListener("comboboxbeforeselect",r)},[R,g]),u("div",{className:a("sds-form-field",m&&"sds-form-field--error","sds-combobox",m&&"sds-combobox--invalid",c),children:[u("div",{className:"sds-form-field__label-wrapper",children:[void 0!==v&&p(e,{text:v,error:Boolean(m),htmlFor:E}),u("u-combobox",_(h(h({className:"sds-combobox__combobox","data-multiple":g,ref:L,suppressHydrationWarning:!0},M),I),{children:[V.map(e=>p("data",{value:e.value,suppressHydrationWarning:!0,children:e.label},e.value)),p("input",_(h({suppressHydrationWarning:!0,className:"sds-combobox__input"},C),{id:E,list:B,"aria-labelledby":f})),p(j,{clearText:M["data-sr-clear"]}),p(O,{}),p("u-datalist",{suppressHydrationWarning:!0,className:"sds-combobox__datalist",id:B,hidden:!0,"data-sr-singular":M["data-sr-singular"],"data-sr-plural":M["data-sr-plural"],children:y.map(e=>{var r;return W(e)?p(H,{label:e.label,options:e.options},e.label):p(k,h({suppressHydrationWarning:!0},e),null==(r=e.value)?void 0:r.toString())})}),!!x&&G&&p("select",{name:x,multiple:g,"aria-hidden":!0,hidden:!0,suppressHydrationWarning:!0})]}))]}),b&&p(r,{id:U,children:b}),m&&p(r,{id:D,error:!0,children:m})]})});C.displayName="Combobox";export{C as Combobox};//# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"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":"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","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"]}
1
+ {"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":"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","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\n className=\"sds-combobox__datalist-option\"\n value={value}\n suppressHydrationWarning\n {...rest}\n >\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 suppressHydrationWarning\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 isControlled = selected !== undefined;\n const onSelectedChangeRef = useRef(onSelectedChange);\n const selectedItemsRef = useRef<ComboboxItem[]>([]);\n const [isMounted, setIsMounted] = useState(false);\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 // Set mounted state after hydration\n useEffect(() => {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setIsMounted(true);\n }, []);\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 suppressHydrationWarning\n {...textProps}\n {...rest}\n >\n {selectedItems.map((item) => (\n <data\n key={item.value}\n value={item.value}\n suppressHydrationWarning\n >\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 hidden\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 && isMounted && (\n <select\n name={name}\n multiple={multiple}\n aria-hidden\n hidden\n suppressHydrationWarning\n />\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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikt/sds-combobox",
3
- "version": "5.2.0",
3
+ "version": "5.2.1",
4
4
  "license": "UNLICENSED",
5
5
  "homepage": "https://designsystem.sikt.no/",
6
6
  "repository": {