@sikt/sds-combobox 5.0.1 → 5.2.0

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [5.2.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@5.1.0...@sikt/sds-combobox@5.2.0) (2026-03-20)
+
+### Features
+
+- **combobox:** add controlled state ([2301285](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/2301285ae073caa1132d0ea71e8759827e3fd75a))
+
+### Bug Fixes
+
+- **combobox:** hydration warnings on server side render ([95411b8](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/95411b8e489dcceee6bb05c09b856fbc57830ef2))
+- update @sikt/sds packages ([cf35fab](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/cf35fabce72896bf98f10e2dc13c2c8015e239e7))
+
+## [5.1.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@5.0.1...@sikt/sds-combobox@5.1.0) (2026-03-12)
+
+### Features
+
+- **combobox:** add option groups ([b89186e](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/b89186eaf608f98223055079d8da1b084d3cbbef))
+- prevent hover states on touch devices ([8c5f556](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/8c5f5569c8fa6aadc3395448b6c388b1692b9742))
+
 ## [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

package/dist/index.css

@@ -27,11 +27,13 @@
   outline: unset;
 }
 .sds-combobox data:focus-visible {
+  --chip-border-color: var( --sds-color-interaction-primary-strong-highlight );
   outline: var(--sds-focus-outline);
 }
-.sds-combobox data:hover,
-.sds-combobox data:focus-visible {
-  --chip-border-color: var( --sds-color-interaction-primary-strong-highlight );
+@media (pointer: fine) {
+  .sds-combobox data:hover {
+    --chip-border-color: var( --sds-color-interaction-primary-strong-highlight );
+  }
 }
 .sds-combobox data:active {
   --chip-border-color: var(--sds-color-interaction-primary-strong-pressed);
@@ -87,17 +89,19 @@
   pointer-events: auto;
   width: 100%;
 }
-.sds-combobox__input:hover,
 .sds-combobox__input:focus-visible {
   --combobox-border-color: var(--sds-color-layout-divider-strong);
+  outline: var(--sds-focus-outline);
+  outline-offset: 0;
+}
+@media (pointer: fine) {
+  .sds-combobox__input:hover {
+    --combobox-border-color: var(--sds-color-layout-divider-strong);
+  }
 }
 .sds-combobox__input:active {
   --combobox-border-color: var(--sds-color-layout-divider-strong);
 }
-.sds-combobox__input:focus-visible {
-  outline: var(--sds-focus-outline);
-  outline-offset: 0;
-}
 .sds-combobox__input:disabled {
   background:
     repeating-linear-gradient(
@@ -137,11 +141,13 @@ del.sds-combobox__button {
   margin-left: calc(var(--button-padding) * -1);
 }
 .sds-combobox__button:focus-visible {
+  --combobox-button-background-color: var( --sds-color-interaction-primary-transparent-highlight );
   outline: var(--sds-focus-outline);
 }
-.sds-combobox__button:hover,
-.sds-combobox__button:focus-visible {
-  --combobox-button-background-color: var( --sds-color-interaction-primary-transparent-highlight );
+@media (pointer: fine) {
+  .sds-combobox__button:hover {
+    --combobox-button-background-color: var( --sds-color-interaction-primary-transparent-highlight );
+  }
 }
 .sds-combobox__button:active {
   --combobox-button-background-color: var( --sds-color-interaction-primary-transparent-pressed );
@@ -173,6 +179,28 @@ del.sds-combobox__button {
 .sds-combobox__datalist:not([hidden]):has(.sds-combobox__datalist-option:not([aria-hidden=true])) {
   display: block;
 }
+.sds-combobox__datalist-group:not(:has(.sds-combobox__datalist-option:not([aria-hidden=true]))) {
+  display: none;
+}
+.sds-combobox__datalist-group .sds-combobox__datalist-option {
+  cursor: pointer;
+  display: block;
+}
+.sds-combobox__datalist-group .sds-combobox__datalist-option[aria-hidden=true] {
+  display: none !important;
+}
+.sds-combobox__datalist-group-label {
+  display: block;
+  font-size: var(--sds-typography-label-default-fontsize);
+  font-weight: var(--sds-typography-label-default-fontweight);
+  line-height: var(--sds-typography-label-default-lineheight);
+  padding: var(--sds-space-padding-small);
+  margin: var(--sds-space-gap-tiny);
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+  border-bottom: var(--sds-space-border-weight-thin) solid var(--sds-color-brand-neutral-subtle);
+}
 .sds-combobox__datalist-option {
   padding: var(--sds-space-padding-small);
   margin: var(--sds-space-gap-tiny);
@@ -182,11 +210,13 @@ del.sds-combobox__button {
   outline: unset;
 }
 .sds-combobox__datalist-option:focus-visible {
+  background-color: var( --sds-color-interaction-primary-transparent-highlight );
   outline: var(--sds-focus-outline);
 }
-.sds-combobox__datalist-option:hover,
-.sds-combobox__datalist-option:focus-visible {
-  background-color: var( --sds-color-interaction-primary-transparent-highlight );
+@media (pointer: fine) {
+  .sds-combobox__datalist-option:hover {
+    background-color: var( --sds-color-interaction-primary-transparent-highlight );
+  }
 }
 .sds-combobox__datalist-option:active {
   background-color: var( --sds-color-interaction-primary-transparent-pressed );
@@ -199,18 +229,28 @@ del.sds-combobox__button {
   --combobox-button-color: var(--sds-color-text-on-strong);
   --combobox-button-background-color: var( --sds-color-interaction-danger-strong-default );
 }
-.sds-combobox--invalid .sds-combobox__combobox:hover,
 .sds-combobox--invalid .sds-combobox__combobox:focus-within {
   --combobox-border-color: var( --sds-color-interaction-danger-strong-highlight );
   --combobox-button-background-color: var( --sds-color-interaction-danger-strong-highlight );
 }
+@media (pointer: fine) {
+  .sds-combobox--invalid .sds-combobox__combobox:hover {
+    --combobox-border-color: var( --sds-color-interaction-danger-strong-highlight );
+    --combobox-button-background-color: var( --sds-color-interaction-danger-strong-highlight );
+  }
+}
 .sds-combobox--invalid .sds-combobox__combobox:active {
   --combobox-border-color: var( --sds-color-interaction-danger-strong-pressed );
   --combobox-button-background-color: var( --sds-color-interaction-danger-strong-pressed );
 }
-.sds-combobox--invalid .sds-combobox__combobox .sds-combobox__button:hover,
 .sds-combobox--invalid .sds-combobox__combobox .sds-combobox__button:focus {
   --combobox-border-color: var( --sds-color-interaction-danger-strong-highlight );
   --combobox-button-background-color: var( --sds-color-interaction-danger-strong-highlight );
 }
+@media (pointer: fine) {
+  .sds-combobox--invalid .sds-combobox__combobox .sds-combobox__button:hover {
+    --combobox-border-color: var( --sds-color-interaction-danger-strong-highlight );
+    --combobox-button-background-color: var( --sds-color-interaction-danger-strong-highlight );
+  }
+}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/combobox.pcss"],"sourcesContent":[".sds-combobox {\n  --combobox-border-color: var(--sds-color-layout-divider-strong);\n  --combobox-border-width: var(--sds-space-border-weight-regular);\n  --combobox-button-color: var(--sds-color-text-primary);\n  --combobox-button-background-color: transparent;\n  --combobox-padding: calc(\n    var(--sds-space-padding-tiny) + var(--sds-space-padding-minimal) -\n      var(--combobox-border-width)\n  );\n  --combobox-icon-size: var(--sds-typography-fontsize-700);\n}\n  /* stylelint-disable selector-max-type */\n  .sds-combobox data {\n    --chip-border-color: var(--sds-color-interaction-primary-strong-default);\n\n    align-items: center;\n    border: var(--sds-space-border-weight-regular) solid\n      var(--chip-border-color);\n    border-radius: var(--sds-space-border-radius-full);\n    cursor: pointer;\n    display: inline-flex;\n    font-size: var(--sds-typography-body-l-fontsize);\n    font-weight: var(--sds-typography-body-l-fontweight);\n    gap: var(--sds-space-padding-minimal);\n    justify-content: center;\n    line-height: var(--sds-typography-body-l-lineheight);\n    padding: var(--sds-space-padding-minimal);\n    padding-left: var(--sds-space-padding-tiny);\n    margin: 0 var(--sds-space-padding-tiny) var(--sds-space-padding-tiny) 0;\n    /* stylelint-enable selector-max-type */\n  }\n  .sds-combobox data:focus {\n      outline: unset;\n    }\n  .sds-combobox data:focus-visible {\n      outline: var(--sds-focus-outline);\n    }\n  .sds-combobox data:hover,\n    .sds-combobox data:focus-visible {\n      --chip-border-color: var(\n        --sds-color-interaction-primary-strong-highlight\n      );\n    }\n  .sds-combobox data:active {\n      --chip-border-color: var(--sds-color-interaction-primary-strong-pressed);\n    }\n  .sds-combobox data::after {\n      align-items: center;\n      background-color: var(--sds-color-text-primary);\n      content: \"\";\n      display: inline-block;\n      font-size: var(--combobox-icon-size);\n      justify-content: center;\n      -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z\"/></svg>');\n              mask-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z\"/></svg>');\n      -webkit-mask-position: center right;\n              mask-position: center right;\n      -webkit-mask-repeat: no-repeat;\n              mask-repeat: no-repeat;\n      -webkit-mask-size: var(--combobox-icon-size);\n              mask-size: var(--combobox-icon-size);\n      transform: rotateY(0deg) rotate(-45deg);\n      min-width: var(--combobox-icon-size);\n      min-height: var(--combobox-icon-size);\n      width: var(--combobox-icon-size);\n      height: var(--combobox-icon-size);\n      vertical-align: sub;\n    }\n  /* INFO: override u-components styling for sds-chip */\n  .sds-combobox__combobox {\n    display: flex;\n    flex-wrap: wrap;\n    pointer-events: none;\n  }\n  .sds-combobox__combobox:not([data-multiple]),\n    .sds-combobox__combobox[data-multiple=\"false\"] {\n      /* INFO: override u-components styling */\n    }\n  /* stylelint-disable-next-line */\n  .sds-combobox__combobox:not([data-multiple]) data, .sds-combobox__combobox[data-multiple=\"false\"] data {\n        display: none;\n      }\n  .sds-combobox__input {\n    -webkit-appearance: none;\n            appearance: none;\n    background-image: none;\n    background-color: var(--sds-color-layout-background-default);\n    border: var(--combobox-border-width) solid var(--combobox-border-color);\n    border-radius: var(--sds-space-border-radius-medium);\n    color: var(--sds-color-text-primary);\n    display: flex;\n    font-size: var(--sds-typography-body-default-fontsize);\n    font-weight: var(--sds-typography-body-default-fontweight);\n    line-height: var(--sds-typography-body-default-lineheight);\n    padding: var(--combobox-padding);\n    padding-right: calc(\n      var(--combobox-padding) + var(--combobox-icon-size) +\n        var(--sds-space-padding-tiny)\n    );\n    pointer-events: auto;\n    width: 100%;\n  }\n  .sds-combobox__input:hover,\n    .sds-combobox__input:focus-visible {\n      --combobox-border-color: var(--sds-color-layout-divider-strong);\n    }\n  .sds-combobox__input:active {\n      --combobox-border-color: var(--sds-color-layout-divider-strong);\n    }\n  .sds-combobox__input:focus-visible {\n      outline: var(--sds-focus-outline);\n      outline-offset: 0;\n    }\n  .sds-combobox__input:disabled {\n      background: repeating-linear-gradient(\n        -45deg,\n        var(--sds-color-layout-background-default),\n        var(--sds-color-layout-background-default) var(--sds-base-size-s),\n        var(--sds-color-interaction-neutral-subtle-default)\n          var(--sds-base-size-s),\n        var(--sds-color-interaction-neutral-subtle-default)\n          calc(var(--sds-base-size-s) * 2)\n      );\n      cursor: not-allowed;\n    }\n  .sds-combobox__button {\n    --button-border-radius: var(--sds-space-border-radius-minimal);\n    --button-padding: var(--sds-space-padding-minimal);\n    --button-width: calc(\n      var(--combobox-icon-size) + var(--button-padding) +\n        var(--combobox-border-width)\n    );\n\n    align-items: center;\n    background-color: var(--combobox-button-background-color);\n    border: 0 none;\n    border-radius: var(--button-border-radius);\n    color: var(--combobox-button-color);\n    cursor: pointer;\n    font-size: var(--sds-typography-body-default-fontsize);\n    font-weight: var(--sds-typography-body-default-fontweight);\n    justify-content: center;\n    line-height: var(--sds-typography-body-default-lineheight);\n    gap: var(--button-padding);\n    padding: var(--button-padding)\n      calc(var(--button-padding) + var(--button-padding));\n\n    /* INFO: override u-components styling */\n\n    /*\n    &:has(+ .sds-combobox__datalist:not([hidden])) {\n      transform: rotateY(0deg) rotate(180deg);\n    }\n    */\n  }\n  /* stylelint-disable-next-line */\n  del.sds-combobox__button {\n      pointer-events: auto;\n    }\n  .sds-combobox__button-icon {\n      align-items: center;\n      display: flex;\n      font-size: var(--combobox-icon-size);\n      justify-content: center;\n      margin-right: calc(var(--button-padding) * -1);\n      margin-left: calc(var(--button-padding) * -1);\n    }\n  .sds-combobox__button:focus-visible {\n      outline: var(--sds-focus-outline);\n    }\n  .sds-combobox__button:hover,\n    .sds-combobox__button:focus-visible {\n      --combobox-button-background-color: var(\n        --sds-color-interaction-primary-transparent-highlight\n      );\n    }\n  .sds-combobox__button:active {\n      --combobox-button-background-color: var(\n        --sds-color-interaction-primary-transparent-pressed\n      );\n    }\n  .sds-combobox__button {\n\n    align-self: center;\n    margin-left: calc(calc(var(--combobox-padding) + var(--button-width)) * -1);\n}\n  .sds-combobox__button:not([hidden]) + .sds-combobox__button {\n      display: none;\n    }\n  .sds-combobox__datalist {\n    background-color: var(--sds-color-layout-background-default);\n    box-shadow: var(--sds-effect-shadow-elevated-default);\n    border-radius: var(--sds-space-border-radius-medium);\n    inset: 100% 0 auto;\n    margin-top: var(--sds-space-gap-small);\n    margin-bottom: var(--sds-space-gap-small);\n    max-height: 15rem;\n    overflow-y: auto;\n    padding: var(--sds-space-padding-small);\n    pointer-events: auto;\n    position: absolute;\n    z-index: var(--sds-base-zindex-modal);\n  }\n  .sds-combobox__datalist:has(.sds-combobox__datalist-option:not([aria-hidden=\"false\"])) {\n      display: none;\n    }\n  .sds-combobox__datalist:not([hidden]):has(.sds-combobox__datalist-option:not([aria-hidden=\"true\"])) {\n      display: block;\n    }\n  .sds-combobox__datalist-option {\n      padding: var(--sds-space-padding-small);\n      margin: var(--sds-space-gap-tiny);\n      border-radius: var(--sds-space-border-radius-medium);\n    }\n  .sds-combobox__datalist-option:focus {\n        outline: unset;\n      }\n  .sds-combobox__datalist-option:focus-visible {\n        outline: var(--sds-focus-outline);\n      }\n  .sds-combobox__datalist-option:hover,\n      .sds-combobox__datalist-option:focus-visible {\n        background-color: var(\n          --sds-color-interaction-primary-transparent-highlight\n        );\n      }\n  .sds-combobox__datalist-option:active {\n        background-color: var(\n          --sds-color-interaction-primary-transparent-pressed\n        );\n      }\n  .sds-combobox__datalist-option[selected] {\n        background-color: var(--sds-color-interaction-primary-subtle-pressed);\n      }\n  .sds-combobox--invalid .sds-combobox__combobox {\n    --combobox-border-color: var(--sds-color-interaction-danger-strong-default);\n    --combobox-button-color: var(--sds-color-text-on-strong);\n    --combobox-button-background-color: var(\n      --sds-color-interaction-danger-strong-default\n    );\n  }\n  .sds-combobox--invalid .sds-combobox__combobox:hover,\n    .sds-combobox--invalid .sds-combobox__combobox:focus-within {\n      --combobox-border-color: var(\n        --sds-color-interaction-danger-strong-highlight\n      );\n      --combobox-button-background-color: var(\n        --sds-color-interaction-danger-strong-highlight\n      );\n    }\n  .sds-combobox--invalid .sds-combobox__combobox:active {\n      --combobox-border-color: var(\n        --sds-color-interaction-danger-strong-pressed\n      );\n      --combobox-button-background-color: var(\n        --sds-color-interaction-danger-strong-pressed\n      );\n    }\n  .sds-combobox--invalid .sds-combobox__combobox .sds-combobox__button:hover,\n      .sds-combobox--invalid .sds-combobox__combobox .sds-combobox__button:focus {\n        --combobox-border-color: var(\n          --sds-color-interaction-danger-strong-highlight\n        );\n        --combobox-button-background-color: var(\n          --sds-color-interaction-danger-strong-highlight\n        );\n      }\n"],"mappings":";AAAA,CAAC;AACC,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,sCAAoC;AACpC,sBAAoB,MAClB,IAAI,0BAA0B,EAAE,IAAI,6BAA6B,EAC/D,IAAI;AAER,wBAAsB,IAAI;AAC5B;AAEE,CAZD,aAYe;AACZ,uBAAqB,IAAI;AAEzB,eAAa;AACb,UAAQ,IAAI,mCAAmC,MAC7C,IAAI;AACN,iBAAe,IAAI;AACnB,UAAQ;AACR,WAAS;AACT,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,OAAK,IAAI;AACT,mBAAiB;AACjB,eAAa,IAAI;AACjB,WAAS,IAAI;AACb,gBAAc,IAAI;AAClB,UAAQ,EAAE,IAAI,0BAA0B,IAAI,0BAA0B;AAExE;AACA,CA/BD,aA+Be,IAAI;AACd,WAAS;AACX;AACF,CAlCD,aAkCe,IAAI;AACd,WAAS,IAAI;AACf;AACF,CArCD,aAqCe,IAAI;AAChB,CAtCH,aAsCiB,IAAI;AAChB,uBAAqB,KACnB;AAEJ;AACF,CA3CD,aA2Ce,IAAI;AACd,uBAAqB,IAAI;AAC3B;AACF,CA9CD,aA8Ce,IAAI;AACd,eAAa;AACb,oBAAkB,IAAI;AACtB,WAAS;AACT,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACjB,sBAAoB;AACZ,cAAY;AACpB,yBAAuB,OAAO;AACtB,iBAAe,OAAO;AAC9B,uBAAqB;AACb,eAAa;AACrB,qBAAmB,IAAI;AACf,aAAW,IAAI;AACvB,aAAW,QAAQ,MAAM,OAAO;AAChC,aAAW,IAAI;AACf,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,UAAQ,IAAI;AACZ,kBAAgB;AAClB;AAEF,CAAC;AACC,WAAS;AACT,aAAW;AACX,kBAAgB;AAClB;AACA,CALC,sBAKsB,KAAK,CAAC;AAC3B,CAND,sBAMwB,CAAC;AAExB;AAEF,CAVC,sBAUsB,KAAK,CAAC,gBAAgB;AAAM,CAVlD,sBAUyE,CAAC,qBAAuB;AAC5F,WAAS;AACX;AACJ,CAAC;AACC,sBAAoB;AACZ,cAAY;AACpB,oBAAkB;AAClB,oBAAkB,IAAI;AACtB,UAAQ,IAAI,yBAAyB,MAAM,IAAI;AAC/C,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,WAAS;AACT,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,WAAS,IAAI;AACb,iBAAe,KACb,IAAI,oBAAoB,EAAE,IAAI,sBAAsB,EAClD,IAAI;AAER,kBAAgB;AAChB,SAAO;AACT;AACA,CApBC,mBAoBmB;AAClB,CArBD,mBAqBqB;AAClB,2BAAyB,IAAI;AAC/B;AACF,CAxBC,mBAwBmB;AAChB,2BAAyB,IAAI;AAC/B;AACF,CA3BC,mBA2BmB;AAChB,WAAS,IAAI;AACb,kBAAgB;AAClB;AACF,CA/BC,mBA+BmB;AAChB;AAAA,IAAY;AAAA,MACV,MAAM;AAAA,MACN,IAAI,sCAAsC;AAAA,MAC1C,IAAI,uCAAuC,IAAI,kBAAkB;AAAA,MACjE,IAAI,gDACF,IAAI,kBAAkB;AAAA,MACxB,IAAI,gDACF,KAAK,IAAI,mBAAmB,EAAE;AAElC,UAAQ;AACV;AACF,CAAC;AACC,0BAAwB,IAAI;AAC5B,oBAAkB,IAAI;AACtB,kBAAgB,MACd,IAAI,sBAAsB,EAAE,IAAI,kBAAkB,EAChD,IAAI;AAGR,eAAa;AACb,oBAAkB,IAAI;AACtB,UAAQ,EAAE;AACV,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,UAAQ;AACR,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,mBAAiB;AACjB,eAAa,IAAI;AACjB,OAAK,IAAI;AACT,WAAS,IAAI,kBACX,KAAK,IAAI,kBAAkB,EAAE,IAAI;AASrC;AAEA,GAAG,CA/BF;AAgCG,kBAAgB;AAClB;AACF,CAAC;AACG,eAAa;AACb,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACjB,gBAAc,KAAK,IAAI,kBAAkB,EAAE;AAC3C,eAAa,KAAK,IAAI,kBAAkB,EAAE;AAC5C;AACF,CA1CC,oBA0CoB;AACjB,WAAS,IAAI;AACf;AACF,CA7CC,oBA6CoB;AACnB,CA9CD,oBA8CsB;AACnB,sCAAoC,KAClC;AAEJ;AACF,CAnDC,oBAmDoB;AACjB,sCAAoC,KAClC;AAEJ;AACF,CAxDC;AA0DC,cAAY;AACZ,eAAa,KAAK,KAAK,IAAI,oBAAoB,EAAE,IAAI,iBAAiB,EAAE;AAC5E;AACE,CA7DC,oBA6DoB,KAAK,CAAC,SAAS,EAAE,CA7DrC;AA8DG,WAAS;AACX;AACF,CAAC;AACC,oBAAkB,IAAI;AACtB,cAAY,IAAI;AAChB,iBAAe,IAAI;AACnB,SAAO,KAAK,EAAE;AACd,cAAY,IAAI;AAChB,iBAAe,IAAI;AACnB,cAAY;AACZ,cAAY;AACZ,WAAS,IAAI;AACb,kBAAgB;AAChB,YAAU;AACV,WAAS,IAAI;AACf;AACA,CAdC,sBAcsB,KAAK,CAAC,6BAA6B,KAAK,CAAC;AAC5D,WAAS;AACX;AACF,CAjBC,sBAiBsB,KAAK,CAAC,QAAQ,KAAK,CAHb,6BAG2C,KAAK,CAAC;AAC1E,WAAS;AACX;AACF,CAN6B;AAOzB,WAAS,IAAI;AACb,UAAQ,IAAI;AACZ,iBAAe,IAAI;AACrB;AACF,CAX6B,6BAWC;AACxB,WAAS;AACX;AACJ,CAd6B,6BAcC;AACxB,WAAS,IAAI;AACf;AACJ,CAjB6B,6BAiBC;AAC1B,CAlByB,6BAkBK;AAC5B,oBAAkB,KAChB;AAEJ;AACJ,CAvB6B,6BAuBC;AACxB,oBAAkB,KAChB;AAEJ;AACJ,CA5B6B,6BA4BC,CAAC;AACzB,oBAAkB,IAAI;AACxB;AACJ,CAAC,sBAAsB,CArKtB;AAsKC,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,sCAAoC,KAClC;AAEJ;AACA,CAPC,sBAOsB,CA5KtB,sBA4K6C;AAC5C,CARD,sBAQwB,CA7KxB,sBA6K+C;AAC5C,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;AACF,CAhBC,sBAgBsB,CArLtB,sBAqL6C;AAC1C,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;AACF,CAxBC,sBAwBsB,CA7LtB,uBA6L8C,CArI9C,oBAqImE;AAChE,CAzBH,sBAyB0B,CA9L1B,uBA8LkD,CAtIlD,oBAsIuE;AAClE,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;","names":[]}
+{"version":3,"sources":["../src/combobox.pcss"],"sourcesContent":[".sds-combobox {\n  --combobox-border-color: var(--sds-color-layout-divider-strong);\n  --combobox-border-width: var(--sds-space-border-weight-regular);\n  --combobox-button-color: var(--sds-color-text-primary);\n  --combobox-button-background-color: transparent;\n  --combobox-padding: calc(\n    var(--sds-space-padding-tiny) + var(--sds-space-padding-minimal) -\n      var(--combobox-border-width)\n  );\n  --combobox-icon-size: var(--sds-typography-fontsize-700);\n}\n  /* stylelint-disable selector-max-type */\n  .sds-combobox data {\n    --chip-border-color: var(--sds-color-interaction-primary-strong-default);\n\n    align-items: center;\n    border: var(--sds-space-border-weight-regular) solid\n      var(--chip-border-color);\n    border-radius: var(--sds-space-border-radius-full);\n    cursor: pointer;\n    display: inline-flex;\n    font-size: var(--sds-typography-body-l-fontsize);\n    font-weight: var(--sds-typography-body-l-fontweight);\n    gap: var(--sds-space-padding-minimal);\n    justify-content: center;\n    line-height: var(--sds-typography-body-l-lineheight);\n    padding: var(--sds-space-padding-minimal);\n    padding-left: var(--sds-space-padding-tiny);\n    margin: 0 var(--sds-space-padding-tiny) var(--sds-space-padding-tiny) 0;\n    /* stylelint-enable selector-max-type */\n  }\n  .sds-combobox data:focus {\n      outline: unset;\n    }\n  .sds-combobox data:focus-visible {\n      --chip-border-color: var(\n        --sds-color-interaction-primary-strong-highlight\n      );\n\n      outline: var(--sds-focus-outline);\n    }\n  @media (pointer: fine) {\n      .sds-combobox data:hover {\n        --chip-border-color: var(\n          --sds-color-interaction-primary-strong-highlight\n        );\n      }\n    }\n  .sds-combobox data:active {\n      --chip-border-color: var(--sds-color-interaction-primary-strong-pressed);\n    }\n  .sds-combobox data::after {\n      align-items: center;\n      background-color: var(--sds-color-text-primary);\n      content: \"\";\n      display: inline-block;\n      font-size: var(--combobox-icon-size);\n      justify-content: center;\n      -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z\"/></svg>');\n              mask-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z\"/></svg>');\n      -webkit-mask-position: center right;\n              mask-position: center right;\n      -webkit-mask-repeat: no-repeat;\n              mask-repeat: no-repeat;\n      -webkit-mask-size: var(--combobox-icon-size);\n              mask-size: var(--combobox-icon-size);\n      transform: rotateY(0deg) rotate(-45deg);\n      min-width: var(--combobox-icon-size);\n      min-height: var(--combobox-icon-size);\n      width: var(--combobox-icon-size);\n      height: var(--combobox-icon-size);\n      vertical-align: sub;\n    }\n  /* INFO: override u-components styling for sds-chip */\n  .sds-combobox__combobox {\n    display: flex;\n    flex-wrap: wrap;\n    pointer-events: none;\n  }\n  .sds-combobox__combobox:not([data-multiple]),\n    .sds-combobox__combobox[data-multiple=\"false\"] {\n      /* INFO: override u-components styling */\n    }\n  /* stylelint-disable-next-line */\n  .sds-combobox__combobox:not([data-multiple]) data, .sds-combobox__combobox[data-multiple=\"false\"] data {\n        display: none;\n      }\n  .sds-combobox__input {\n    -webkit-appearance: none;\n            appearance: none;\n    background-image: none;\n    background-color: var(--sds-color-layout-background-default);\n    border: var(--combobox-border-width) solid var(--combobox-border-color);\n    border-radius: var(--sds-space-border-radius-medium);\n    color: var(--sds-color-text-primary);\n    display: flex;\n    font-size: var(--sds-typography-body-default-fontsize);\n    font-weight: var(--sds-typography-body-default-fontweight);\n    line-height: var(--sds-typography-body-default-lineheight);\n    padding: var(--combobox-padding);\n    padding-right: calc(\n      var(--combobox-padding) + var(--combobox-icon-size) +\n        var(--sds-space-padding-tiny)\n    );\n    pointer-events: auto;\n    width: 100%;\n  }\n  .sds-combobox__input:focus-visible {\n      --combobox-border-color: var(--sds-color-layout-divider-strong);\n\n      outline: var(--sds-focus-outline);\n      outline-offset: 0;\n    }\n  @media (pointer: fine) {\n      .sds-combobox__input:hover {\n        --combobox-border-color: var(--sds-color-layout-divider-strong);\n      }\n    }\n  .sds-combobox__input:active {\n      --combobox-border-color: var(--sds-color-layout-divider-strong);\n    }\n  .sds-combobox__input:disabled {\n      background: repeating-linear-gradient(\n        -45deg,\n        var(--sds-color-layout-background-default),\n        var(--sds-color-layout-background-default) var(--sds-base-size-s),\n        var(--sds-color-interaction-neutral-subtle-default)\n          var(--sds-base-size-s),\n        var(--sds-color-interaction-neutral-subtle-default)\n          calc(var(--sds-base-size-s) * 2)\n      );\n      cursor: not-allowed;\n    }\n  .sds-combobox__button {\n    --button-border-radius: var(--sds-space-border-radius-minimal);\n    --button-padding: var(--sds-space-padding-minimal);\n    --button-width: calc(\n      var(--combobox-icon-size) + var(--button-padding) +\n        var(--combobox-border-width)\n    );\n\n    align-items: center;\n    background-color: var(--combobox-button-background-color);\n    border: 0 none;\n    border-radius: var(--button-border-radius);\n    color: var(--combobox-button-color);\n    cursor: pointer;\n    font-size: var(--sds-typography-body-default-fontsize);\n    font-weight: var(--sds-typography-body-default-fontweight);\n    justify-content: center;\n    line-height: var(--sds-typography-body-default-lineheight);\n    gap: var(--button-padding);\n    padding: var(--button-padding)\n      calc(var(--button-padding) + var(--button-padding));\n\n    /* INFO: override u-components styling */\n\n    /*\n    &:has(+ .sds-combobox__datalist:not([hidden])) {\n      transform: rotateY(0deg) rotate(180deg);\n    }\n    */\n  }\n  /* stylelint-disable-next-line */\n  del.sds-combobox__button {\n      pointer-events: auto;\n    }\n  .sds-combobox__button-icon {\n      align-items: center;\n      display: flex;\n      font-size: var(--combobox-icon-size);\n      justify-content: center;\n      margin-right: calc(var(--button-padding) * -1);\n      margin-left: calc(var(--button-padding) * -1);\n    }\n  .sds-combobox__button:focus-visible {\n      --combobox-button-background-color: var(\n        --sds-color-interaction-primary-transparent-highlight\n      );\n\n      outline: var(--sds-focus-outline);\n    }\n  @media (pointer: fine) {\n      .sds-combobox__button:hover {\n        --combobox-button-background-color: var(\n          --sds-color-interaction-primary-transparent-highlight\n        );\n      }\n    }\n  .sds-combobox__button:active {\n      --combobox-button-background-color: var(\n        --sds-color-interaction-primary-transparent-pressed\n      );\n    }\n  .sds-combobox__button {\n\n    align-self: center;\n    margin-left: calc(calc(var(--combobox-padding) + var(--button-width)) * -1);\n}\n  .sds-combobox__button:not([hidden]) + .sds-combobox__button {\n      display: none;\n    }\n  .sds-combobox__datalist {\n    background-color: var(--sds-color-layout-background-default);\n    box-shadow: var(--sds-effect-shadow-elevated-default);\n    border-radius: var(--sds-space-border-radius-medium);\n    inset: 100% 0 auto;\n    margin-top: var(--sds-space-gap-small);\n    margin-bottom: var(--sds-space-gap-small);\n    max-height: 15rem;\n    overflow-y: auto;\n    padding: var(--sds-space-padding-small);\n    pointer-events: auto;\n    position: absolute;\n    z-index: var(--sds-base-zindex-modal);\n  }\n  .sds-combobox__datalist:has(.sds-combobox__datalist-option:not([aria-hidden=\"false\"])) {\n      display: none;\n    }\n  .sds-combobox__datalist:not([hidden]):has(.sds-combobox__datalist-option:not([aria-hidden=\"true\"])) {\n      display: block;\n    }\n  /* Hide the group when all its options are filtered out */\n  .sds-combobox__datalist-group:not(:has(.sds-combobox__datalist-option:not([aria-hidden=\"true\"]))) {\n        display: none;\n      }\n  /* Replicate shadow DOM ::slotted styles for options nested inside a group */\n  .sds-combobox__datalist-group .sds-combobox__datalist-option {\n      cursor: pointer;\n      display: block;\n    }\n  .sds-combobox__datalist-group .sds-combobox__datalist-option[aria-hidden=\"true\"] {\n        display: none !important;\n      }\n  .sds-combobox__datalist-group-label {\n      display: block;\n      font-size: var(--sds-typography-label-default-fontsize);\n      font-weight: var(--sds-typography-label-default-fontweight);\n      line-height: var(--sds-typography-label-default-lineheight);\n      padding: var(--sds-space-padding-small);\n      margin: var(--sds-space-gap-tiny);\n      pointer-events: none;\n      -webkit-user-select: none;\n              user-select: none;\n      border-bottom: var(--sds-space-border-weight-thin) solid\n        var(--sds-color-brand-neutral-subtle);\n    }\n  .sds-combobox__datalist-option {\n      padding: var(--sds-space-padding-small);\n      margin: var(--sds-space-gap-tiny);\n      border-radius: var(--sds-space-border-radius-medium);\n    }\n  .sds-combobox__datalist-option:focus {\n        outline: unset;\n      }\n  .sds-combobox__datalist-option:focus-visible {\n        background-color: var(\n          --sds-color-interaction-primary-transparent-highlight\n        );\n        outline: var(--sds-focus-outline);\n      }\n  @media (pointer: fine) {\n        .sds-combobox__datalist-option:hover {\n          background-color: var(\n            --sds-color-interaction-primary-transparent-highlight\n          );\n        }\n      }\n  .sds-combobox__datalist-option:active {\n        background-color: var(\n          --sds-color-interaction-primary-transparent-pressed\n        );\n      }\n  .sds-combobox__datalist-option[selected] {\n        background-color: var(--sds-color-interaction-primary-subtle-pressed);\n      }\n  .sds-combobox--invalid .sds-combobox__combobox {\n    --combobox-border-color: var(--sds-color-interaction-danger-strong-default);\n    --combobox-button-color: var(--sds-color-text-on-strong);\n    --combobox-button-background-color: var(\n      --sds-color-interaction-danger-strong-default\n    );\n  }\n  .sds-combobox--invalid .sds-combobox__combobox:focus-within {\n      --combobox-border-color: var(\n        --sds-color-interaction-danger-strong-highlight\n      );\n      --combobox-button-background-color: var(\n        --sds-color-interaction-danger-strong-highlight\n      );\n    }\n  @media (pointer: fine) {\n      .sds-combobox--invalid .sds-combobox__combobox:hover {\n        --combobox-border-color: var(\n          --sds-color-interaction-danger-strong-highlight\n        );\n        --combobox-button-background-color: var(\n          --sds-color-interaction-danger-strong-highlight\n        );\n      }\n    }\n  .sds-combobox--invalid .sds-combobox__combobox:active {\n      --combobox-border-color: var(\n        --sds-color-interaction-danger-strong-pressed\n      );\n      --combobox-button-background-color: var(\n        --sds-color-interaction-danger-strong-pressed\n      );\n    }\n  .sds-combobox--invalid .sds-combobox__combobox .sds-combobox__button:focus {\n        --combobox-border-color: var(\n          --sds-color-interaction-danger-strong-highlight\n        );\n        --combobox-button-background-color: var(\n          --sds-color-interaction-danger-strong-highlight\n        );\n      }\n  @media (pointer: fine) {\n        .sds-combobox--invalid .sds-combobox__combobox .sds-combobox__button:hover {\n          --combobox-border-color: var(\n            --sds-color-interaction-danger-strong-highlight\n          );\n          --combobox-button-background-color: var(\n            --sds-color-interaction-danger-strong-highlight\n          );\n        }\n      }\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/index.js.map

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

package/dist/index.mjs

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

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Combobox.tsx"],"names":["_a"],"mappings":"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","file":"index.mjs","sourcesContent":["import { ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Label, HelpText } from \"@sikt/sds-form\";\nimport { CancelIcon, ExpandShowAltIcon } from \"@sikt/sds-icons\";\nimport type { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  InputHTMLAttributes,\n  HTMLAttributes,\n  OptionHTMLAttributes,\n  ReactNode,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\n\nexport interface 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"]}
+{"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"]}

package/package.json

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