@sikt/sds-combobox 5.0.0 → 5.1.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.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
+
+- **combobox:** prevent double badges and crash in multiselect ([9b44a53](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/9b44a5382a0667655f628b0556a84ac08735c9c1))
+- **deps:** update dependency @u-elements/u-combobox to ^1.0.7 ([6738a3c](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/6738a3cfcfe6d3676795929349cfdea8acfd7f9a))
+- **deps:** update dependency @u-elements/u-datalist to ^1.1.0 ([e5940c7](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/e5940c7d4d601034ab21bb2a6001634de404487e))
+
 ## [5.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@4.0.1...@sikt/sds-combobox@5.0.0) (2026-01-26)
 
 ### ⚠ BREAKING CHANGES

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":"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","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

@@ -2,6 +2,17 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { UHTMLComboboxElement } from '@u-elements/u-combobox';
 import { HTMLAttributes, ReactNode, OptionHTMLAttributes, InputHTMLAttributes } from 'react';
 
+interface ComboboxOptionGroupProps {
+    /**
+     * Label for the section heading.
+     */
+    label: string;
+    /**
+     * Options within this section.
+     */
+    options: OptionHTMLAttributes<HTMLOptionElement>[];
+}
+type ComboboxOption = OptionHTMLAttributes<HTMLOptionElement> | ComboboxOptionGroupProps;
 interface ComboboxBaseProps extends Omit<HTMLAttributes<UHTMLComboboxElement>, "onChange"> {
     className?: string;
     /**
@@ -13,12 +24,13 @@ 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.
+     * 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).
+     * - **options** Grouped options within a section (sections only).
      */
-    options: OptionHTMLAttributes<HTMLOptionElement>[];
+    options: ComboboxOption[];
     /**
      * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.
      *
@@ -60,4 +72,4 @@ declare const Combobox: {
     displayName: string;
 };
 
-export { Combobox, type ComboboxProps };
+export { Combobox, type ComboboxOption, type ComboboxOptionGroupProps, type ComboboxProps };

package/dist/index.d.ts

@@ -2,6 +2,17 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { UHTMLComboboxElement } from '@u-elements/u-combobox';
 import { HTMLAttributes, ReactNode, OptionHTMLAttributes, InputHTMLAttributes } from 'react';
 
+interface ComboboxOptionGroupProps {
+    /**
+     * Label for the section heading.
+     */
+    label: string;
+    /**
+     * Options within this section.
+     */
+    options: OptionHTMLAttributes<HTMLOptionElement>[];
+}
+type ComboboxOption = OptionHTMLAttributes<HTMLOptionElement> | ComboboxOptionGroupProps;
 interface ComboboxBaseProps extends Omit<HTMLAttributes<UHTMLComboboxElement>, "onChange"> {
     className?: string;
     /**
@@ -13,12 +24,13 @@ 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.
+     * 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).
+     * - **options** Grouped options within a section (sections only).
      */
-    options: OptionHTMLAttributes<HTMLOptionElement>[];
+    options: ComboboxOption[];
     /**
      * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.
      *
@@ -60,4 +72,4 @@ declare const Combobox: {
     displayName: string;
 };
 
-export { Combobox, type ComboboxProps };
+export { Combobox, type ComboboxOption, type ComboboxOptionGroupProps, type ComboboxProps };

package/dist/index.js

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

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Combobox.tsx"],"names":["useRef","useId","useEffect","_a","jsxs","clsx","jsx","Label","ScreenReaderOnly","CancelIcon","ExpandShowAltIcon","HelpText"],"mappings":"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","file":"index.js","sourcesContent":["import { ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Label, HelpText } from \"@sikt/sds-form\";\nimport { CancelIcon, ExpandShowAltIcon } from \"@sikt/sds-icons\";\nimport type { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  InputHTMLAttributes,\n  HTMLAttributes,\n  OptionHTMLAttributes,\n  ReactNode,\n  useEffect,\n  useId,\n  useRef,\n} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\n\nexport interface ComboboxBaseProps extends Omit<\n  HTMLAttributes<UHTMLComboboxElement>,\n  \"onChange\"\n> {\n  className?: string;\n  /**\n   * Text to show when the input is invalid to help the user enter correct value. This also sets `aria-invalid` &  `aria-errormessage`.\n   */\n  errorText?: ReactNode;\n  /**\n   * Text to show to help the user enter correct value. It's a better pattern to have enough information in the `label`.\n   */\n  helpText?: ReactNode;\n  /**\n   * A list of option objects:\n   * - **label** This attribute is text for the label indicating the meaning of the option.\n   * - **value** The content of this attribute represents the value to be submitted with the form, should this option be selected.\n   * - **selected** If present, this Boolean attribute indicates that the option is initially selected.\n   */\n  options: OptionHTMLAttributes<HTMLOptionElement>[];\n  /**\n   * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.\n   *\n   * @default undefined\n   */\n  multiple?: boolean;\n  /**\n   * Name of the form control. Submitted with the form as part of a name/value pair.\n   *\n   * @default undefined\n   */\n  name?: string;\n  /**\n   * Function when a user changes the selected option.\n   *\n   * @default undefined\n   */\n  onChange?: (\n    event: CustomEvent<HTMLDataElement>,\n    newValue: OptionHTMLAttributes<HTMLOptionElement>[],\n  ) => void;\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\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 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  useEffect(() => {\n    const handleOnChange = (e: CustomEvent<HTMLDataElement>) => {\n      e.preventDefault();\n\n      const index = options.findIndex((item) => item.value === e.detail.value);\n      const newOption = options[index];\n      if (e.detail.isConnected) {\n        newOption.selected = e.detail.isConnected;\n      } else {\n        delete newOption.selected;\n      }\n      onChange?.(e, options);\n    };\n\n    comboboxRef.current?.addEventListener(\n      \"comboboxafterselect\",\n      handleOnChange,\n    );\n    return () => {\n      comboboxRef.current?.removeEventListener(\n        \"comboboxafterselect\",\n        handleOnChange,\n      );\n    };\n  }, [options, onChange]);\n\n  return (\n    <div\n      className={clsx(\n        \"sds-form-field\",\n        errorText && \"sds-form-field--error\",\n        \"sds-combobox\",\n        errorText && \"sds-combobox--invalid\",\n        className,\n      )}\n    >\n      <div className=\"sds-form-field__label-wrapper\">\n        {label !== undefined && (\n          <Label text={label} error={Boolean(errorText)} htmlFor={id} />\n        )}\n        <u-combobox\n          className=\"sds-combobox__combobox\"\n          data-multiple={multiple}\n          ref={comboboxRef}\n          {...textProps}\n          {...rest}\n        >\n          {options\n            .filter((option) => option.selected)\n            .map((option) => (\n              <data key={option.value?.toString()} value={option.value}>\n                {option.label}\n              </data>\n            ))}\n          <input\n            className=\"sds-combobox__input\"\n            id={id}\n            list={listId}\n            {...inputProps}\n            aria-labelledby={ariaLabelledBy}\n          />\n          <del className=\"sds-combobox__button\">\n            <ScreenReaderOnly>{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/Combobox.tsx"],"names":["useId","jsxs","jsx","useRef","useState","useEffect","flattenedOptions","_a","clsx","Label","ScreenReaderOnly","CancelIcon","ExpandShowAltIcon","HelpText"],"mappings":"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","file":"index.js","sourcesContent":["import { ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Label, HelpText } from \"@sikt/sds-form\";\nimport { CancelIcon, ExpandShowAltIcon } from \"@sikt/sds-icons\";\nimport type { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  InputHTMLAttributes,\n  HTMLAttributes,\n  OptionHTMLAttributes,\n  ReactNode,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\n\nexport interface ComboboxOptionGroupProps {\n  /**\n   * Label for the section heading.\n   */\n  label: string;\n  /**\n   * Options within this section.\n   */\n  options: OptionHTMLAttributes<HTMLOptionElement>[];\n}\n\nexport type ComboboxOption =\n  | OptionHTMLAttributes<HTMLOptionElement>\n  | ComboboxOptionGroupProps;\n\nconst isOptionGroup = (\n  item: ComboboxOption,\n): item is ComboboxOptionGroupProps =>\n  \"options\" in item && Array.isArray(item.options);\n\nconst flattenOptions = (\n  items: ComboboxOption[],\n): OptionHTMLAttributes<HTMLOptionElement>[] =>\n  items.flatMap((item) => (isOptionGroup(item) ? item.options : [item]));\n\nexport interface ComboboxBaseProps extends Omit<\n  HTMLAttributes<UHTMLComboboxElement>,\n  \"onChange\"\n> {\n  className?: string;\n  /**\n   * Text to show when the input is invalid to help the user enter correct value. This also sets `aria-invalid` &  `aria-errormessage`.\n   */\n  errorText?: ReactNode;\n  /**\n   * Text to show to help the user enter correct value. It's a better pattern to have enough information in the `label`.\n   */\n  helpText?: ReactNode;\n  /**\n   * A list of option objects or section objects containing grouped options:\n   * - **label** Text for the option label or section heading.\n   * - **value** The value submitted with the form (options only).\n   * - **selected** Whether the option is initially selected (options only).\n   * - **options** Grouped options within a section (sections only).\n   */\n  options: ComboboxOption[];\n  /**\n   * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.\n   *\n   * @default undefined\n   */\n  multiple?: boolean;\n  /**\n   * Name of the form control. Submitted with the form as part of a name/value pair.\n   *\n   * @default undefined\n   */\n  name?: string;\n  /**\n   * Function when a user changes the selected option.\n   *\n   * @default undefined\n   */\n  onChange?: (\n    event: CustomEvent<HTMLDataElement>,\n    newValue: OptionHTMLAttributes<HTMLOptionElement>[],\n  ) => void;\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Sets language for accessible texts.\n   *\n   * @default \"nb\"\n   */\n  lang?: \"nb\" | \"nn\" | \"en\";\n}\n\nexport type ComboboxProps = ComboboxBaseProps &\n  (\n    | {\n        label: NonNullable<ReactNode>;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        /**\n         * Id (or id's) that identifies the element (or elements) that labels the element it is applied to. For accessibility these should NOT be visually hidden.\n         */\n        \"aria-labelledby\": string;\n      }\n  );\n\nconst i18n = {\n  nb: {\n    \"data-sr-added\": \"Lagt til\",\n    \"data-sr-removed\": \"Fjernet\",\n    \"data-sr-remove\": \"Trykk for å fjerne\",\n    \"data-sr-empty\": \"Ingen valgte\",\n    \"data-sr-found\": \"Naviger til venstre for å finne %d valgte\",\n    \"data-sr-invalid\": \"Ugyldig verdi\",\n    \"data-sr-of\": \"av\",\n    \"data-sr-singular\": \"%d treff\",\n    \"data-sr-plural\": \"%d treff\",\n    \"data-sr-clear\": \"Fjern tekst\",\n  },\n  nn: {\n    \"data-sr-added\": \"Lagt til\",\n    \"data-sr-removed\": \"Fjerna\",\n    \"data-sr-remove\": \"Trykk for å fjerne\",\n    \"data-sr-empty\": \"Ingen valde\",\n    \"data-sr-found\": \"Naviger til venstre for å finne %d valde\",\n    \"data-sr-invalid\": \"Ugyldig verdi\",\n    \"data-sr-of\": \"av\",\n    \"data-sr-singular\": \"%d treff\",\n    \"data-sr-plural\": \"%d treff\",\n    \"data-sr-clear\": \"Fjern tekst\",\n  },\n  en: {\n    \"data-sr-added\": \"Added\",\n    \"data-sr-removed\": \"Removed\",\n    \"data-sr-remove\": \"Press to remove\",\n    \"data-sr-empty\": \"No selected\",\n    \"data-sr-found\": \"Navigate left to find %d selected\",\n    \"data-sr-invalid\": \"Invalid value\",\n    \"data-sr-of\": \"of\",\n    \"data-sr-singular\": \"%d hit\",\n    \"data-sr-plural\": \"%d hits\",\n    \"data-sr-clear\": \"Clear text\",\n  },\n};\n\nconst getTextProps = (lang: keyof typeof i18n) => i18n[lang];\n\nconst Option = ({\n  label,\n  value,\n  ...rest\n}: OptionHTMLAttributes<HTMLOptionElement>) => {\n  return (\n    <u-option className=\"sds-combobox__datalist-option\" value={value} {...rest}>\n      {label}\n    </u-option>\n  );\n};\n\nconst OptionGroup = ({ label, options }: ComboboxOptionGroupProps) => {\n  const id = useId();\n\n  return (\n    <div className=\"sds-combobox__datalist-group\" role=\"group\">\n      <span className=\"sds-combobox__datalist-group-label\" id={id}>\n        {label}\n      </span>\n      {options.map((option) => (\n        <Option\n          key={option.value?.toString()}\n          aria-describedby={id}\n          {...option}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport const Combobox = ({\n  className,\n  errorText,\n  helpText,\n  label,\n  \"aria-labelledby\": ariaLabelledBy,\n  multiple = false,\n  options,\n  name,\n  onChange,\n  inputProps,\n  lang = \"nb\",\n  ...rest\n}: ComboboxProps) => {\n  const flattenedOptions = flattenOptions(options);\n  const comboboxRef = useRef<UHTMLComboboxElement>(null);\n  const optionsRef = useRef(flattenedOptions);\n  const onChangeRef = useRef(onChange);\n  const hasInteracted = useRef(false);\n  const id = useId();\n  const errorTextId = `${id}-error-text`;\n  const helpTextId = `${id}-help-text`;\n  const listId = `${id}-list`;\n  const textProps = getTextProps(lang);\n\n  const [initialSelectedOptions, setInitialSelectedOptions] = useState(() =>\n    flattenedOptions.filter((option) => option.selected),\n  );\n\n  useEffect(() => {\n    const flattenedOptions = flattenOptions(options);\n    optionsRef.current = flattenedOptions;\n    if (initialSelectedOptions.length === 0 && !hasInteracted.current) {\n      const selected = flattenedOptions.filter((option) => option.selected);\n      if (selected.length > 0) {\n        // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: sync async-arriving selected options into initial badge state before user interaction\n        setInitialSelectedOptions(selected);\n      }\n    }\n  }, [options, initialSelectedOptions.length]);\n\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  useEffect(() => {\n    const currentRef = comboboxRef.current;\n\n    const handleOnChange = (e: CustomEvent<HTMLDataElement>) => {\n      e.preventDefault();\n      hasInteracted.current = true;\n\n      const currentOptions = optionsRef.current;\n      const index = currentOptions.findIndex(\n        (item) => item.value === e.detail.value,\n      );\n      if (index === -1) return;\n      const newOption = currentOptions[index];\n      if (e.detail.isConnected) {\n        newOption.selected = true;\n      } else {\n        delete newOption.selected;\n      }\n      onChangeRef.current?.(e, currentOptions);\n    };\n\n    currentRef?.addEventListener(\"comboboxafterselect\", handleOnChange);\n    return () => {\n      currentRef?.removeEventListener(\"comboboxafterselect\", handleOnChange);\n    };\n  }, []);\n\n  return (\n    <div\n      className={clsx(\n        \"sds-form-field\",\n        errorText && \"sds-form-field--error\",\n        \"sds-combobox\",\n        errorText && \"sds-combobox--invalid\",\n        className,\n      )}\n    >\n      <div className=\"sds-form-field__label-wrapper\">\n        {label !== undefined && (\n          <Label text={label} error={Boolean(errorText)} htmlFor={id} />\n        )}\n        <u-combobox\n          className=\"sds-combobox__combobox\"\n          data-multiple={multiple}\n          ref={comboboxRef}\n          {...textProps}\n          {...rest}\n        >\n          {initialSelectedOptions.map((option) => (\n            <data key={option.value?.toString()} value={option.value}>\n              {option.label}\n            </data>\n          ))}\n          <input\n            className=\"sds-combobox__input\"\n            id={id}\n            list={listId}\n            {...inputProps}\n            aria-labelledby={ariaLabelledBy}\n          />\n          <del className=\"sds-combobox__button\">\n            <ScreenReaderOnly>{textProps[\"data-sr-clear\"]}</ScreenReaderOnly>\n            <span className=\"sds-combobox__button-icon\">\n              <CancelIcon />\n            </span>\n          </del>\n          <span className=\"sds-combobox__button\">\n            <span className=\"sds-combobox__button-icon\">\n              <ExpandShowAltIcon />\n            </span>\n          </span>\n          <u-datalist\n            className=\"sds-combobox__datalist\"\n            id={listId}\n            data-sr-singular={textProps[\"data-sr-singular\"]}\n            data-sr-plural={textProps[\"data-sr-plural\"]}\n          >\n            {options.map((option) =>\n              isOptionGroup(option) ? (\n                <OptionGroup\n                  key={option.label}\n                  label={option.label}\n                  options={option.options}\n                />\n              ) : (\n                <Option key={option.value?.toString()} {...option} />\n              ),\n            )}\n          </u-datalist>\n          {!!name && <select name={name} aria-hidden hidden />}\n        </u-combobox>\n      </div>\n      {helpText && <HelpText id={helpTextId}>{helpText}</HelpText>}\n      {errorText && (\n        <HelpText id={errorTextId} error>\n          {errorText}\n        </HelpText>\n      )}\n    </div>\n  );\n};\n\nCombobox.displayName = \"Combobox\";\n"]}

package/dist/index.mjs

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

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Combobox.tsx"],"names":["_a"],"mappings":"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","file":"index.mjs","sourcesContent":["import { ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Label, HelpText } from \"@sikt/sds-form\";\nimport { CancelIcon, ExpandShowAltIcon } from \"@sikt/sds-icons\";\nimport type { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  InputHTMLAttributes,\n  HTMLAttributes,\n  OptionHTMLAttributes,\n  ReactNode,\n  useEffect,\n  useId,\n  useRef,\n} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\n\nexport interface ComboboxBaseProps extends Omit<\n  HTMLAttributes<UHTMLComboboxElement>,\n  \"onChange\"\n> {\n  className?: string;\n  /**\n   * Text to show when the input is invalid to help the user enter correct value. This also sets `aria-invalid` &  `aria-errormessage`.\n   */\n  errorText?: ReactNode;\n  /**\n   * Text to show to help the user enter correct value. It's a better pattern to have enough information in the `label`.\n   */\n  helpText?: ReactNode;\n  /**\n   * A list of option objects:\n   * - **label** This attribute is text for the label indicating the meaning of the option.\n   * - **value** The content of this attribute represents the value to be submitted with the form, should this option be selected.\n   * - **selected** If present, this Boolean attribute indicates that the option is initially selected.\n   */\n  options: OptionHTMLAttributes<HTMLOptionElement>[];\n  /**\n   * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.\n   *\n   * @default undefined\n   */\n  multiple?: boolean;\n  /**\n   * Name of the form control. Submitted with the form as part of a name/value pair.\n   *\n   * @default undefined\n   */\n  name?: string;\n  /**\n   * Function when a user changes the selected option.\n   *\n   * @default undefined\n   */\n  onChange?: (\n    event: CustomEvent<HTMLDataElement>,\n    newValue: OptionHTMLAttributes<HTMLOptionElement>[],\n  ) => void;\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\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 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  useEffect(() => {\n    const handleOnChange = (e: CustomEvent<HTMLDataElement>) => {\n      e.preventDefault();\n\n      const index = options.findIndex((item) => item.value === e.detail.value);\n      const newOption = options[index];\n      if (e.detail.isConnected) {\n        newOption.selected = e.detail.isConnected;\n      } else {\n        delete newOption.selected;\n      }\n      onChange?.(e, options);\n    };\n\n    comboboxRef.current?.addEventListener(\n      \"comboboxafterselect\",\n      handleOnChange,\n    );\n    return () => {\n      comboboxRef.current?.removeEventListener(\n        \"comboboxafterselect\",\n        handleOnChange,\n      );\n    };\n  }, [options, onChange]);\n\n  return (\n    <div\n      className={clsx(\n        \"sds-form-field\",\n        errorText && \"sds-form-field--error\",\n        \"sds-combobox\",\n        errorText && \"sds-combobox--invalid\",\n        className,\n      )}\n    >\n      <div className=\"sds-form-field__label-wrapper\">\n        {label !== undefined && (\n          <Label text={label} error={Boolean(errorText)} htmlFor={id} />\n        )}\n        <u-combobox\n          className=\"sds-combobox__combobox\"\n          data-multiple={multiple}\n          ref={comboboxRef}\n          {...textProps}\n          {...rest}\n        >\n          {options\n            .filter((option) => option.selected)\n            .map((option) => (\n              <data key={option.value?.toString()} value={option.value}>\n                {option.label}\n              </data>\n            ))}\n          <input\n            className=\"sds-combobox__input\"\n            id={id}\n            list={listId}\n            {...inputProps}\n            aria-labelledby={ariaLabelledBy}\n          />\n          <del className=\"sds-combobox__button\">\n            <ScreenReaderOnly>{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/Combobox.tsx"],"names":["flattenedOptions","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,IAAM,aAAA,GAAgB,CACpB,IAAA,KAEA,SAAA,IAAa,QAAQ,KAAA,CAAM,OAAA,CAAQ,KAAK,OAAO,CAAA;AAEjD,IAAM,cAAA,GAAiB,CACrB,KAAA,KAEA,KAAA,CAAM,QAAQ,CAAC,IAAA,KAAU,aAAA,CAAc,IAAI,CAAA,GAAI,IAAA,CAAK,OAAA,GAAU,CAAC,IAAI,CAAE,CAAA;AAoEvE,IAAM,IAAA,GAAO;AAAA,EACX,EAAA,EAAI;AAAA,IACF,eAAA,EAAiB,UAAA;AAAA,IACjB,iBAAA,EAAmB,SAAA;AAAA,IACnB,gBAAA,EAAkB,uBAAA;AAAA,IAClB,eAAA,EAAiB,cAAA;AAAA,IACjB,eAAA,EAAiB,8CAAA;AAAA,IACjB,iBAAA,EAAmB,eAAA;AAAA,IACnB,YAAA,EAAc,IAAA;AAAA,IACd,kBAAA,EAAoB,UAAA;AAAA,IACpB,gBAAA,EAAkB,UAAA;AAAA,IAClB,eAAA,EAAiB;AAAA,GACnB;AAAA,EACA,EAAA,EAAI;AAAA,IACF,eAAA,EAAiB,UAAA;AAAA,IACjB,iBAAA,EAAmB,QAAA;AAAA,IACnB,gBAAA,EAAkB,uBAAA;AAAA,IAClB,eAAA,EAAiB,aAAA;AAAA,IACjB,eAAA,EAAiB,6CAAA;AAAA,IACjB,iBAAA,EAAmB,eAAA;AAAA,IACnB,YAAA,EAAc,IAAA;AAAA,IACd,kBAAA,EAAoB,UAAA;AAAA,IACpB,gBAAA,EAAkB,UAAA;AAAA,IAClB,eAAA,EAAiB;AAAA,GACnB;AAAA,EACA,EAAA,EAAI;AAAA,IACF,eAAA,EAAiB,OAAA;AAAA,IACjB,iBAAA,EAAmB,SAAA;AAAA,IACnB,gBAAA,EAAkB,iBAAA;AAAA,IAClB,eAAA,EAAiB,aAAA;AAAA,IACjB,eAAA,EAAiB,mCAAA;AAAA,IACjB,iBAAA,EAAmB,eAAA;AAAA,IACnB,YAAA,EAAc,IAAA;AAAA,IACd,kBAAA,EAAoB,QAAA;AAAA,IACpB,gBAAA,EAAkB,SAAA;AAAA,IAClB,eAAA,EAAiB;AAAA;AAErB,CAAA;AAEA,IAAM,YAAA,GAAe,CAAC,IAAA,KAA4B,IAAA,CAAK,IAAI,CAAA;AAE3D,IAAM,MAAA,GAAS,CAAC,EAAA,KAI+B;AAJ/B,EAAA,IAAA,EAAA,GAAA,EAAA,EACd;AAAA,IAAA,KAAA;AAAA,IACA;AAAA,GAzJF,GAuJgB,EAAA,EAGX,IAAA,GAAA,SAAA,CAHW,EAAA,EAGX;AAAA,IAFH,OAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,2BACG,UAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAS,SAAA,EAAU,iCAAgC,KAAA,EAAA,EAAkB,IAAA,CAAA,EAArE,EACE,QAAA,EAAA,KAAA,EAAA,CACH,CAAA;AAEJ,CAAA;AAEA,IAAM,WAAA,GAAc,CAAC,EAAE,KAAA,EAAO,SAAQ,KAAgC;AACpE,EAAA,MAAM,KAAK,KAAA,EAAM;AAEjB,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EAA+B,MAAK,OAAA,EACjD,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oCAAA,EAAqC,EAAA,EAClD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IACC,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,KAAQ;AA3K5B,MAAA,IAAA,EAAA;AA4KQ,MAAA,uBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA,cAAA,CAAA;AAAA,UAEC,kBAAA,EAAkB;AAAA,SAAA,EACd,MAAA,CAAA;AAAA,QAAA,CAFC,EAAA,GAAA,MAAA,CAAO,UAAP,IAAA,GAAA,MAAA,GAAA,EAAA,CAAc,QAAA;AAAA,OAGrB;AAAA,IAAA,CACD;AAAA,GAAA,EACH,CAAA;AAEJ,CAAA;AAEO,IAAM,QAAA,GAAW,CAAC,EAAA,KAaJ;AAbI,EAAA,IAAA,EAAA,GAAA,EAAA,EACvB;AAAA,IAAA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,iBAAA,EAAmB,cAAA;AAAA,IACnB,QAAA,GAAW,KAAA;AAAA,IACX,OAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA,GAAO;AAAA,GAjMT,GAsLyB,EAAA,EAYpB,IAAA,GAAA,SAAA,CAZoB,EAAA,EAYpB;AAAA,IAXH,WAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,MAAM,gBAAA,GAAmB,eAAe,OAAO,CAAA;AAC/C,EAAA,MAAM,WAAA,GAAc,OAA6B,IAAI,CAAA;AACrD,EAAA,MAAM,UAAA,GAAa,OAAO,gBAAgB,CAAA;AAC1C,EAAA,MAAM,WAAA,GAAc,OAAO,QAAQ,CAAA;AACnC,EAAA,MAAM,aAAA,GAAgB,OAAO,KAAK,CAAA;AAClC,EAAA,MAAM,KAAK,KAAA,EAAM;AACjB,EAAA,MAAM,WAAA,GAAc,GAAG,MAAA,CAAA,EAAA,EAAE,aAAA,CAAA;AACzB,EAAA,MAAM,UAAA,GAAa,GAAG,MAAA,CAAA,EAAA,EAAE,YAAA,CAAA;AACxB,EAAA,MAAM,MAAA,GAAS,GAAG,MAAA,CAAA,EAAA,EAAE,OAAA,CAAA;AACpB,EAAA,MAAM,SAAA,GAAY,aAAa,IAAI,CAAA;AAEnC,EAAA,MAAM,CAAC,sBAAA,EAAwB,yBAAyB,CAAA,GAAI,QAAA;AAAA,IAAS,MACnE,gBAAA,CAAiB,MAAA,CAAO,CAAC,MAAA,KAAW,OAAO,QAAQ;AAAA,GACrD;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAMA,iBAAAA,GAAmB,eAAe,OAAO,CAAA;AAC/C,IAAA,UAAA,CAAW,OAAA,GAAUA,iBAAAA;AACrB,IAAA,IAAI,sBAAA,CAAuB,MAAA,KAAW,CAAA,IAAK,CAAC,cAAc,OAAA,EAAS;AACjE,MAAA,MAAM,WAAWA,iBAAAA,CAAiB,MAAA,CAAO,CAAC,MAAA,KAAW,OAAO,QAAQ,CAAA;AACpE,MAAA,IAAI,QAAA,CAAS,SAAS,CAAA,EAAG;AAEvB,QAAA,yBAAA,CAA0B,QAAQ,CAAA;AAAA,MACpC;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,sBAAA,CAAuB,MAAM,CAAC,CAAA;AAE3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,OAAA,GAAU,QAAA;AAAA,EACxB,CAAA,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,aAAa,WAAA,CAAY,OAAA;AAE/B,IAAA,MAAM,cAAA,GAAiB,CAAC,CAAA,KAAoC;AAtOhE,MAAA,IAAAC,GAAAA;AAuOM,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,aAAA,CAAc,OAAA,GAAU,IAAA;AAExB,MAAA,MAAM,iBAAiB,UAAA,CAAW,OAAA;AAClC,MAAA,MAAM,QAAQ,cAAA,CAAe,SAAA;AAAA,QAC3B,CAAC,IAAA,KAAS,IAAA,CAAK,KAAA,KAAU,EAAE,MAAA,CAAO;AAAA,OACpC;AACA,MAAA,IAAI,UAAU,EAAA,EAAI;AAClB,MAAA,MAAM,SAAA,GAAY,eAAe,KAAK,CAAA;AACtC,MAAA,IAAI,CAAA,CAAE,OAAO,WAAA,EAAa;AACxB,QAAA,SAAA,CAAU,QAAA,GAAW,IAAA;AAAA,MACvB,CAAA,MAAO;AACL,QAAA,OAAO,SAAA,CAAU,QAAA;AAAA,MACnB;AACA,MAAA,CAAAA,MAAA,WAAA,CAAY,OAAA,KAAZ,IAAA,GAAA,MAAA,GAAAA,GAAAA,CAAA,kBAAsB,CAAA,EAAG,cAAA,CAAA;AAAA,IAC3B,CAAA;AAEA,IAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,iBAAiB,qBAAA,EAAuB,cAAA,CAAA;AACpD,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,oBAAoB,qBAAA,EAAuB,cAAA,CAAA;AAAA,IACzD,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,gBAAA;AAAA,QACA,SAAA,IAAa,uBAAA;AAAA,QACb,cAAA;AAAA,QACA,SAAA,IAAa,uBAAA;AAAA,QACb;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,+BAAA,EACZ,QAAA,EAAA;AAAA,UAAA,KAAA,KAAU,MAAA,oBACT,GAAA,CAAC,KAAA,EAAA,EAAM,IAAA,EAAM,KAAA,EAAO,OAAO,OAAA,CAAQ,SAAS,CAAA,EAAG,OAAA,EAAS,EAAA,EAAI,CAAA;AAAA,0BAE9D,IAAA;AAAA,YAAC,YAAA;AAAA,YAAA,aAAA,CAAA,cAAA,CAAA,cAAA,CAAA;AAAA,cACC,SAAA,EAAU,wBAAA;AAAA,cACV,eAAA,EAAe,QAAA;AAAA,cACf,GAAA,EAAK;AAAA,aAAA,EACD,YACA,IAAA,CAAA,EALL;AAAA,cAOE,QAAA,EAAA;AAAA,gBAAA,sBAAA,CAAuB,GAAA,CAAI,CAAC,MAAA,KAAQ;AAnR/C,kBAAA,IAAAA,GAAAA;AAoRY,kBAAA,uBAAA,GAAA,CAAC,MAAA,EAAA,EAAoC,KAAA,EAAO,MAAA,CAAO,KAAA,EAChD,QAAA,EAAA,MAAA,CAAO,KAAA,EAAA,EAAA,CADCA,GAAAA,GAAA,MAAA,CAAO,KAAA,KAAP,IAAA,GAAA,MAAA,GAAAA,GAAAA,CAAc,QAAA,EAEzB,CAAA;AAAA,gBAAA,CACD,CAAA;AAAA,gCACD,GAAA;AAAA,kBAAC,OAAA;AAAA,kBAAA,aAAA,CAAA,cAAA,CAAA;AAAA,oBACC,SAAA,EAAU,qBAAA;AAAA,oBACV,EAAA;AAAA,oBACA,IAAA,EAAM;AAAA,mBAAA,EACF,UAAA,CAAA,EAJL;AAAA,oBAKC,iBAAA,EAAiB;AAAA,mBAAA;AAAA,iBACnB;AAAA,gCACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sBAAA,EACb,QAAA,EAAA;AAAA,kCAAA,GAAA,CAAC,gBAAA,EAAA,EAAkB,QAAA,EAAA,SAAA,CAAU,eAAe,CAAA,EAAE,CAAA;AAAA,sCAC7C,MAAA,EAAA,EAAK,SAAA,EAAU,2BAAA,EACd,QAAA,kBAAA,GAAA,CAAC,cAAW,CAAA,EACd;AAAA,iBAAA,EACF,CAAA;AAAA,gCACA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,sBAAA,EACd,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2BAAA,EACd,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,CAAA,EACrB,CAAA,EACF,CAAA;AAAA,gCACA,GAAA;AAAA,kBAAC,YAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAU,wBAAA;AAAA,oBACV,EAAA,EAAI,MAAA;AAAA,oBACJ,kBAAA,EAAkB,UAAU,kBAAkB,CAAA;AAAA,oBAC9C,gBAAA,EAAgB,UAAU,gBAAgB,CAAA;AAAA,oBAEzC,QAAA,EAAA,OAAA,CAAQ,GAAA;AAAA,sBAAI,CAAC,MAAA,KAAQ;AAhTlC,wBAAA,IAAAA,GAAAA;AAiTc,wBAAA,OAAA,aAAA,CAAc,MAAM,CAAA,mBAClB,GAAA;AAAA,0BAAC,WAAA;AAAA,0BAAA;AAAA,4BAEC,OAAO,MAAA,CAAO,KAAA;AAAA,4BACd,SAAS,MAAA,CAAO;AAAA,2BAAA;AAAA,0BAFX,MAAA,CAAO;AAAA,yBAGd,uBAEC,MAAA,EAAA,cAAA,CAAA,EAAA,EAA0C,MAAA,CAAA,EAAA,CAA9BA,MAAA,MAAA,CAAO,KAAA,KAAP,IAAA,GAAA,MAAA,GAAAA,GAAAA,CAAc,QAAA,EAAwB,CAAA;AAAA,sBAAA;AAAA;AAEvD;AAAA,iBACF;AAAA,gBACC,CAAC,CAAC,IAAA,oBAAQ,GAAA,CAAC,YAAO,IAAA,EAAY,aAAA,EAAW,IAAA,EAAC,MAAA,EAAM,IAAA,EAAC;AAAA;AAAA,aAAA;AAAA;AACpD,SAAA,EACF,CAAA;AAAA,QACC,QAAA,oBAAY,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAI,YAAa,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,QAChD,6BACC,GAAA,CAAC,QAAA,EAAA,EAAS,IAAI,WAAA,EAAa,KAAA,EAAK,MAC7B,QAAA,EAAA,SAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"index.mjs","sourcesContent":["import { ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Label, HelpText } from \"@sikt/sds-form\";\nimport { CancelIcon, ExpandShowAltIcon } from \"@sikt/sds-icons\";\nimport type { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  InputHTMLAttributes,\n  HTMLAttributes,\n  OptionHTMLAttributes,\n  ReactNode,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\n\nexport interface ComboboxOptionGroupProps {\n  /**\n   * Label for the section heading.\n   */\n  label: string;\n  /**\n   * Options within this section.\n   */\n  options: OptionHTMLAttributes<HTMLOptionElement>[];\n}\n\nexport type ComboboxOption =\n  | OptionHTMLAttributes<HTMLOptionElement>\n  | ComboboxOptionGroupProps;\n\nconst isOptionGroup = (\n  item: ComboboxOption,\n): item is ComboboxOptionGroupProps =>\n  \"options\" in item && Array.isArray(item.options);\n\nconst flattenOptions = (\n  items: ComboboxOption[],\n): OptionHTMLAttributes<HTMLOptionElement>[] =>\n  items.flatMap((item) => (isOptionGroup(item) ? item.options : [item]));\n\nexport interface ComboboxBaseProps extends Omit<\n  HTMLAttributes<UHTMLComboboxElement>,\n  \"onChange\"\n> {\n  className?: string;\n  /**\n   * Text to show when the input is invalid to help the user enter correct value. This also sets `aria-invalid` &  `aria-errormessage`.\n   */\n  errorText?: ReactNode;\n  /**\n   * Text to show to help the user enter correct value. It's a better pattern to have enough information in the `label`.\n   */\n  helpText?: ReactNode;\n  /**\n   * A list of option objects or section objects containing grouped options:\n   * - **label** Text for the option label or section heading.\n   * - **value** The value submitted with the form (options only).\n   * - **selected** Whether the option is initially selected (options only).\n   * - **options** Grouped options within a section (sections only).\n   */\n  options: ComboboxOption[];\n  /**\n   * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.\n   *\n   * @default undefined\n   */\n  multiple?: boolean;\n  /**\n   * Name of the form control. Submitted with the form as part of a name/value pair.\n   *\n   * @default undefined\n   */\n  name?: string;\n  /**\n   * Function when a user changes the selected option.\n   *\n   * @default undefined\n   */\n  onChange?: (\n    event: CustomEvent<HTMLDataElement>,\n    newValue: OptionHTMLAttributes<HTMLOptionElement>[],\n  ) => void;\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Sets language for accessible texts.\n   *\n   * @default \"nb\"\n   */\n  lang?: \"nb\" | \"nn\" | \"en\";\n}\n\nexport type ComboboxProps = ComboboxBaseProps &\n  (\n    | {\n        label: NonNullable<ReactNode>;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        /**\n         * Id (or id's) that identifies the element (or elements) that labels the element it is applied to. For accessibility these should NOT be visually hidden.\n         */\n        \"aria-labelledby\": string;\n      }\n  );\n\nconst i18n = {\n  nb: {\n    \"data-sr-added\": \"Lagt til\",\n    \"data-sr-removed\": \"Fjernet\",\n    \"data-sr-remove\": \"Trykk for å fjerne\",\n    \"data-sr-empty\": \"Ingen valgte\",\n    \"data-sr-found\": \"Naviger til venstre for å finne %d valgte\",\n    \"data-sr-invalid\": \"Ugyldig verdi\",\n    \"data-sr-of\": \"av\",\n    \"data-sr-singular\": \"%d treff\",\n    \"data-sr-plural\": \"%d treff\",\n    \"data-sr-clear\": \"Fjern tekst\",\n  },\n  nn: {\n    \"data-sr-added\": \"Lagt til\",\n    \"data-sr-removed\": \"Fjerna\",\n    \"data-sr-remove\": \"Trykk for å fjerne\",\n    \"data-sr-empty\": \"Ingen valde\",\n    \"data-sr-found\": \"Naviger til venstre for å finne %d valde\",\n    \"data-sr-invalid\": \"Ugyldig verdi\",\n    \"data-sr-of\": \"av\",\n    \"data-sr-singular\": \"%d treff\",\n    \"data-sr-plural\": \"%d treff\",\n    \"data-sr-clear\": \"Fjern tekst\",\n  },\n  en: {\n    \"data-sr-added\": \"Added\",\n    \"data-sr-removed\": \"Removed\",\n    \"data-sr-remove\": \"Press to remove\",\n    \"data-sr-empty\": \"No selected\",\n    \"data-sr-found\": \"Navigate left to find %d selected\",\n    \"data-sr-invalid\": \"Invalid value\",\n    \"data-sr-of\": \"of\",\n    \"data-sr-singular\": \"%d hit\",\n    \"data-sr-plural\": \"%d hits\",\n    \"data-sr-clear\": \"Clear text\",\n  },\n};\n\nconst getTextProps = (lang: keyof typeof i18n) => i18n[lang];\n\nconst Option = ({\n  label,\n  value,\n  ...rest\n}: OptionHTMLAttributes<HTMLOptionElement>) => {\n  return (\n    <u-option className=\"sds-combobox__datalist-option\" value={value} {...rest}>\n      {label}\n    </u-option>\n  );\n};\n\nconst OptionGroup = ({ label, options }: ComboboxOptionGroupProps) => {\n  const id = useId();\n\n  return (\n    <div className=\"sds-combobox__datalist-group\" role=\"group\">\n      <span className=\"sds-combobox__datalist-group-label\" id={id}>\n        {label}\n      </span>\n      {options.map((option) => (\n        <Option\n          key={option.value?.toString()}\n          aria-describedby={id}\n          {...option}\n        />\n      ))}\n    </div>\n  );\n};\n\nexport const Combobox = ({\n  className,\n  errorText,\n  helpText,\n  label,\n  \"aria-labelledby\": ariaLabelledBy,\n  multiple = false,\n  options,\n  name,\n  onChange,\n  inputProps,\n  lang = \"nb\",\n  ...rest\n}: ComboboxProps) => {\n  const flattenedOptions = flattenOptions(options);\n  const comboboxRef = useRef<UHTMLComboboxElement>(null);\n  const optionsRef = useRef(flattenedOptions);\n  const onChangeRef = useRef(onChange);\n  const hasInteracted = useRef(false);\n  const id = useId();\n  const errorTextId = `${id}-error-text`;\n  const helpTextId = `${id}-help-text`;\n  const listId = `${id}-list`;\n  const textProps = getTextProps(lang);\n\n  const [initialSelectedOptions, setInitialSelectedOptions] = useState(() =>\n    flattenedOptions.filter((option) => option.selected),\n  );\n\n  useEffect(() => {\n    const flattenedOptions = flattenOptions(options);\n    optionsRef.current = flattenedOptions;\n    if (initialSelectedOptions.length === 0 && !hasInteracted.current) {\n      const selected = flattenedOptions.filter((option) => option.selected);\n      if (selected.length > 0) {\n        // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: sync async-arriving selected options into initial badge state before user interaction\n        setInitialSelectedOptions(selected);\n      }\n    }\n  }, [options, initialSelectedOptions.length]);\n\n  useEffect(() => {\n    onChangeRef.current = onChange;\n  }, [onChange]);\n\n  useEffect(() => {\n    const currentRef = comboboxRef.current;\n\n    const handleOnChange = (e: CustomEvent<HTMLDataElement>) => {\n      e.preventDefault();\n      hasInteracted.current = true;\n\n      const currentOptions = optionsRef.current;\n      const index = currentOptions.findIndex(\n        (item) => item.value === e.detail.value,\n      );\n      if (index === -1) return;\n      const newOption = currentOptions[index];\n      if (e.detail.isConnected) {\n        newOption.selected = true;\n      } else {\n        delete newOption.selected;\n      }\n      onChangeRef.current?.(e, currentOptions);\n    };\n\n    currentRef?.addEventListener(\"comboboxafterselect\", handleOnChange);\n    return () => {\n      currentRef?.removeEventListener(\"comboboxafterselect\", handleOnChange);\n    };\n  }, []);\n\n  return (\n    <div\n      className={clsx(\n        \"sds-form-field\",\n        errorText && \"sds-form-field--error\",\n        \"sds-combobox\",\n        errorText && \"sds-combobox--invalid\",\n        className,\n      )}\n    >\n      <div className=\"sds-form-field__label-wrapper\">\n        {label !== undefined && (\n          <Label text={label} error={Boolean(errorText)} htmlFor={id} />\n        )}\n        <u-combobox\n          className=\"sds-combobox__combobox\"\n          data-multiple={multiple}\n          ref={comboboxRef}\n          {...textProps}\n          {...rest}\n        >\n          {initialSelectedOptions.map((option) => (\n            <data key={option.value?.toString()} value={option.value}>\n              {option.label}\n            </data>\n          ))}\n          <input\n            className=\"sds-combobox__input\"\n            id={id}\n            list={listId}\n            {...inputProps}\n            aria-labelledby={ariaLabelledBy}\n          />\n          <del className=\"sds-combobox__button\">\n            <ScreenReaderOnly>{textProps[\"data-sr-clear\"]}</ScreenReaderOnly>\n            <span className=\"sds-combobox__button-icon\">\n              <CancelIcon />\n            </span>\n          </del>\n          <span className=\"sds-combobox__button\">\n            <span className=\"sds-combobox__button-icon\">\n              <ExpandShowAltIcon />\n            </span>\n          </span>\n          <u-datalist\n            className=\"sds-combobox__datalist\"\n            id={listId}\n            data-sr-singular={textProps[\"data-sr-singular\"]}\n            data-sr-plural={textProps[\"data-sr-plural\"]}\n          >\n            {options.map((option) =>\n              isOptionGroup(option) ? (\n                <OptionGroup\n                  key={option.label}\n                  label={option.label}\n                  options={option.options}\n                />\n              ) : (\n                <Option key={option.value?.toString()} {...option} />\n              ),\n            )}\n          </u-datalist>\n          {!!name && <select name={name} aria-hidden hidden />}\n        </u-combobox>\n      </div>\n      {helpText && <HelpText id={helpTextId}>{helpText}</HelpText>}\n      {errorText && (\n        <HelpText id={errorTextId} error>\n          {errorText}\n        </HelpText>\n      )}\n    </div>\n  );\n};\n\nCombobox.displayName = \"Combobox\";\n"]}

package/package.json

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