@sikt/sds-combobox 2.0.1 → 2.1.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 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.
 
+## [2.1.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@2.0.1...@sikt/sds-combobox@2.1.0) (2025-03-12)
+
+### Features
+
+- allow sending props to internal Popover ([ecdde11](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/ecdde11b6162f2c142e195cb1fa87ae0b5e4a71e))
+
+### Bug Fixes
+
+- **deps:** update @sikt/sds-core to 4.4.0 ([9dd6147](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/9dd6147cd902975653f03b29db9f580ec19c261c))
+- **deps:** update @sikt/sds-form to 3.0.2 ([a6939a0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/a6939a0b59aed1f9ae0200aff61e67c0abd0cfb7))
+- **deps:** update dependency react-aria-components to ^1.7.0 ([f6ba505](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/f6ba5057c7ff465f2b90368333b076b8642d1ccb))
+- **form:** change text color on invalid state due to color contrast ([b84bf20](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/b84bf20c87bc0ab0995fccbdb65b98d85e741058))
+
 ## [2.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@2.0.0...@sikt/sds-combobox@2.0.1) (2024-11-20)
 
 ### Bug Fixes

package/dist/index.css

@@ -58,7 +58,7 @@
 }
 .sds-combobox__combobox-button:hover,
 .sds-combobox__combobox-button:focus-visible {
-  background-color: var( --sds-color-interaction-primary-transparent-highlight );
+  --combobox-button-background-color: var( --sds-color-interaction-primary-transparent-highlight );
 }
 .sds-combobox__listbox {
   display: block;
@@ -120,4 +120,9 @@
   --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-button:hover,
+.sds-combobox--invalid .sds-combobox__combobox-button:focus {
+  --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-interaction-neutral-strong-default);\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\n  display: inline-flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n  .sds-combobox__combobox {\n    align-items: center;\n    display: flex;\n    position: relative;\n  }\n\n  .sds-combobox__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      flex: 1;\n      font-size: var(--sds-typography-body-fontsize-regular);\n      font-weight: var(--sds-typography-weight-regular);\n      line-height: var(--sds-typography-body-lineheight-regular);\n      padding: var(--combobox-padding);\n    }\n\n  .sds-combobox__combobox-input:hover,\n      .sds-combobox__combobox-input:focus-visible {\n        --combobox-border-color: var(\n          --sds-color-interaction-neutral-strong-highlight\n        );\n      }\n\n  .sds-combobox__combobox-input:active {\n        --combobox-border-color: var(\n          --sds-color-interaction-neutral-strong-pressed\n        );\n      }\n\n  .sds-combobox__combobox-input[data-focus-visible],\n      .sds-combobox__combobox-input:focus-visible {\n        outline: var(--sds-focus-outline);\n        outline-offset: 0;\n      }\n\n  .sds-combobox__combobox-button {\n      --combobox-button-size: calc(\n        var(--sds-base-size-m) + calc(var(--sds-space-padding-minimal) * 2)\n      );\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 0;\n      background-color: var(--combobox-button-background-color);\n      border-radius: var(--sds-space-border-radius-minimal);\n      color: var(--combobox-button-color);\n      font-size: var(--sds-base-size-m);\n      padding: var(--sds-space-padding-minimal);\n      position: absolute;\n      right: var(--combobox-padding);\n      width: var(--combobox-button-size);\n      height: var(--combobox-button-size);\n    }\n\n  .sds-combobox__combobox-button:hover,\n      .sds-combobox__combobox-button:focus-visible {\n        background-color: var(\n          --sds-color-interaction-primary-transparent-highlight\n        );\n      }\n\n  .sds-combobox__listbox {\n    display: block;\n    width: unset;\n    max-height: 15rem;\n    min-height: unset;\n    overflow: auto;\n  }\n\n  .sds-combobox__popover {\n    padding: var(--sds-space-padding-small);\n    margin-top: var(--sds-space-gap-small);\n    margin-bottom: var(--sds-space-gap-small);\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\n    /* INFO: this custom property is set by React Aria */\n    width: var(--trigger-width);\n  }\n\n  .sds-combobox__header {\n    padding: var(--sds-space-padding-small);\n    margin: var(--sds-space-gap-tiny);\n    font-size: var(--sds-typography-body-fontsize-regular);\n    font-weight: var(--sds-typography-weight-bold);\n    border-bottom: var(--sds-space-border-weight-thin) solid\n      var(--sds-color-brand-neutral-subtle);\n  }\n\n  .sds-combobox__item {\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\n  .sds-combobox__item[data-focus-visible],\n    .sds-combobox__item:focus-visible {\n      outline: var(--sds-focus-outline);\n    }\n\n  .sds-combobox__item[data-hovered],\n    .sds-combobox__item[data-focus-visible],\n    .sds-combobox__item:hover,\n    .sds-combobox__item:focus-visible {\n      background-color: var(\n        --sds-color-interaction-primary-transparent-highlight\n      );\n    }\n\n  .sds-combobox__item[data-pressed],\n    .sds-combobox__item:active {\n      background-color: var(\n        --sds-color-interaction-primary-transparent-pressed\n      );\n    }\n\n  .sds-combobox__item[data-selected] {\n      background-color: var(--sds-color-interaction-primary-strong-pressed);\n      color: var(--sds-color-text-on-strong);\n    }\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\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\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"],"mappings":";AAAA,CAAC;AACC,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,sCAAoC;AACpC,sBAAoB,MAClB,IAAI,0BAA0B,EAAE,IAAI,6BAA6B,EAC/D,IAAI;AAGR,WAAS;AACT,kBAAgB;AAChB,SAAO;AACT;AAEE,CAAC;AACC,eAAa;AACb,WAAS;AACT,YAAU;AACZ;AAEA,CAAC;AACG,sBAAoB;AACZ,cAAY;AACpB,oBAAkB;AAClB,oBAAkB,IAAI;AACtB,UAAQ,IAAI,yBAAyB,MAAM,IAAI;AAC/C,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,QAAM;AACN,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,WAAS,IAAI;AACf;AAEF,CAfC,4BAe4B;AACzB,CAhBH,4BAgBgC;AAC3B,2BAAyB,KACvB;AAEJ;AAEJ,CAtBC,4BAsB4B;AACvB,2BAAyB,KACvB;AAEJ;AAEJ,CA5BC,4BA4B4B,CAAC;AAC1B,CA7BH,4BA6BgC;AAC3B,WAAS,IAAI;AACb,kBAAgB;AAClB;AAEJ,CAAC;AACG,0BAAwB,MACtB,IAAI,mBAAmB,EAAE,KAAK,IAAI,6BAA6B,EAAE;AAGnE,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,UAAQ;AACR,oBAAkB,IAAI;AACtB,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,aAAW,IAAI;AACf,WAAS,IAAI;AACb,YAAU;AACV,SAAO,IAAI;AACX,SAAO,IAAI;AACX,UAAQ,IAAI;AACd;AAEF,CApBC,6BAoB6B;AAC1B,CArBH,6BAqBiC;AAC5B,oBAAkB,KAChB;AAEJ;AAEJ,CAAC;AACC,WAAS;AACT,SAAO;AACP,cAAY;AACZ,cAAY;AACZ,YAAU;AACZ;AAEA,CAAC;AACC,WAAS,IAAI;AACb,cAAY,IAAI;AAChB,iBAAe,IAAI;AACnB,oBAAkB,IAAI;AACtB,cAAY,IAAI;AAChB,iBAAe,IAAI;AAGnB,SAAO,IAAI;AACb;AAEA,CAAC;AACC,WAAS,IAAI;AACb,UAAQ,IAAI;AACZ,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,iBAAe,IAAI,gCAAgC,MACjD,IAAI;AACR;AAEA,CAAC;AACC,WAAS,IAAI;AACb,UAAQ,IAAI;AACZ,iBAAe,IAAI;AACrB;AAEA,CANC,kBAMkB,CAAC;AAClB,CAPD,kBAOoB;AACjB,WAAS,IAAI;AACf;AAEF,CAXC,kBAWkB,CAAC;AAClB,CAZD,kBAYoB,CAAC;AACpB,CAbD,kBAaoB;AACnB,CAdD,kBAcoB;AACjB,oBAAkB,KAChB;AAEJ;AAEF,CApBC,kBAoBkB,CAAC;AAClB,CArBD,kBAqBoB;AACjB,oBAAkB,KAChB;AAEJ;AAEF,CA3BC,kBA2BkB,CAAC;AAChB,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACb;AAEF,CAAC,sBAAsB,CAhItB;AAiIC,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,sCAAoC,KAClC;AAEJ;AAEA,CARC,sBAQsB,CAxItB,sBAwI6C;AAC5C,CATD,sBASwB,CAzIxB,sBAyI+C;AAC5C,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;AAEF,CAlBC,sBAkBsB,CAlJtB,sBAkJ6C;AAC1C,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;","names":[]}
+{"version":3,"sources":["../src/combobox.pcss"],"sourcesContent":[".sds-combobox {\n  --combobox-border-color: var(--sds-color-interaction-neutral-strong-default);\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\n  display: inline-flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n  .sds-combobox__combobox {\n    align-items: center;\n    display: flex;\n    position: relative;\n  }\n\n  .sds-combobox__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      flex: 1;\n      font-size: var(--sds-typography-body-fontsize-regular);\n      font-weight: var(--sds-typography-weight-regular);\n      line-height: var(--sds-typography-body-lineheight-regular);\n      padding: var(--combobox-padding);\n    }\n\n  .sds-combobox__combobox-input:hover,\n      .sds-combobox__combobox-input:focus-visible {\n        --combobox-border-color: var(\n          --sds-color-interaction-neutral-strong-highlight\n        );\n      }\n\n  .sds-combobox__combobox-input:active {\n        --combobox-border-color: var(\n          --sds-color-interaction-neutral-strong-pressed\n        );\n      }\n\n  .sds-combobox__combobox-input[data-focus-visible],\n      .sds-combobox__combobox-input:focus-visible {\n        outline: var(--sds-focus-outline);\n        outline-offset: 0;\n      }\n\n  .sds-combobox__combobox-button {\n      --combobox-button-size: calc(\n        var(--sds-base-size-m) + calc(var(--sds-space-padding-minimal) * 2)\n      );\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 0;\n      background-color: var(--combobox-button-background-color);\n      border-radius: var(--sds-space-border-radius-minimal);\n      color: var(--combobox-button-color);\n      font-size: var(--sds-base-size-m);\n      padding: var(--sds-space-padding-minimal);\n      position: absolute;\n      right: var(--combobox-padding);\n      width: var(--combobox-button-size);\n      height: var(--combobox-button-size);\n    }\n\n  .sds-combobox__combobox-button:hover,\n      .sds-combobox__combobox-button:focus-visible {\n        --combobox-button-background-color: var(\n          --sds-color-interaction-primary-transparent-highlight\n        );\n      }\n\n  .sds-combobox__listbox {\n    display: block;\n    width: unset;\n    max-height: 15rem;\n    min-height: unset;\n    overflow: auto;\n  }\n\n  .sds-combobox__popover {\n    padding: var(--sds-space-padding-small);\n    margin-top: var(--sds-space-gap-small);\n    margin-bottom: var(--sds-space-gap-small);\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\n    /* INFO: this custom property is set by React Aria */\n    width: var(--trigger-width);\n  }\n\n  .sds-combobox__header {\n    padding: var(--sds-space-padding-small);\n    margin: var(--sds-space-gap-tiny);\n    font-size: var(--sds-typography-body-fontsize-regular);\n    font-weight: var(--sds-typography-weight-bold);\n    border-bottom: var(--sds-space-border-weight-thin) solid\n      var(--sds-color-brand-neutral-subtle);\n  }\n\n  .sds-combobox__item {\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\n  .sds-combobox__item[data-focus-visible],\n    .sds-combobox__item:focus-visible {\n      outline: var(--sds-focus-outline);\n    }\n\n  .sds-combobox__item[data-hovered],\n    .sds-combobox__item[data-focus-visible],\n    .sds-combobox__item:hover,\n    .sds-combobox__item:focus-visible {\n      background-color: var(\n        --sds-color-interaction-primary-transparent-highlight\n      );\n    }\n\n  .sds-combobox__item[data-pressed],\n    .sds-combobox__item:active {\n      background-color: var(\n        --sds-color-interaction-primary-transparent-pressed\n      );\n    }\n\n  .sds-combobox__item[data-selected] {\n      background-color: var(--sds-color-interaction-primary-strong-pressed);\n      color: var(--sds-color-text-on-strong);\n    }\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\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\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\n  .sds-combobox--invalid .sds-combobox__combobox-button:hover,\n      .sds-combobox--invalid .sds-combobox__combobox-button:focus {\n        --combobox-border-color: var(\n          --sds-color-interaction-danger-strong-highlight\n        );\n        --combobox-button-background-color: var(\n          --sds-color-interaction-danger-strong-highlight\n        );\n      }\n"],"mappings":";AAAA,CAAC;AACC,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,sCAAoC;AACpC,sBAAoB,MAClB,IAAI,0BAA0B,EAAE,IAAI,6BAA6B,EAC/D,IAAI;AAGR,WAAS;AACT,kBAAgB;AAChB,SAAO;AACT;AAEE,CAAC;AACC,eAAa;AACb,WAAS;AACT,YAAU;AACZ;AAEA,CAAC;AACG,sBAAoB;AACZ,cAAY;AACpB,oBAAkB;AAClB,oBAAkB,IAAI;AACtB,UAAQ,IAAI,yBAAyB,MAAM,IAAI;AAC/C,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,QAAM;AACN,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,WAAS,IAAI;AACf;AAEF,CAfC,4BAe4B;AACzB,CAhBH,4BAgBgC;AAC3B,2BAAyB,KACvB;AAEJ;AAEJ,CAtBC,4BAsB4B;AACvB,2BAAyB,KACvB;AAEJ;AAEJ,CA5BC,4BA4B4B,CAAC;AAC1B,CA7BH,4BA6BgC;AAC3B,WAAS,IAAI;AACb,kBAAgB;AAClB;AAEJ,CAAC;AACG,0BAAwB,MACtB,IAAI,mBAAmB,EAAE,KAAK,IAAI,6BAA6B,EAAE;AAGnE,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,UAAQ;AACR,oBAAkB,IAAI;AACtB,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,aAAW,IAAI;AACf,WAAS,IAAI;AACb,YAAU;AACV,SAAO,IAAI;AACX,SAAO,IAAI;AACX,UAAQ,IAAI;AACd;AAEF,CApBC,6BAoB6B;AAC1B,CArBH,6BAqBiC;AAC5B,sCAAoC,KAClC;AAEJ;AAEJ,CAAC;AACC,WAAS;AACT,SAAO;AACP,cAAY;AACZ,cAAY;AACZ,YAAU;AACZ;AAEA,CAAC;AACC,WAAS,IAAI;AACb,cAAY,IAAI;AAChB,iBAAe,IAAI;AACnB,oBAAkB,IAAI;AACtB,cAAY,IAAI;AAChB,iBAAe,IAAI;AAGnB,SAAO,IAAI;AACb;AAEA,CAAC;AACC,WAAS,IAAI;AACb,UAAQ,IAAI;AACZ,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,iBAAe,IAAI,gCAAgC,MACjD,IAAI;AACR;AAEA,CAAC;AACC,WAAS,IAAI;AACb,UAAQ,IAAI;AACZ,iBAAe,IAAI;AACrB;AAEA,CANC,kBAMkB,CAAC;AAClB,CAPD,kBAOoB;AACjB,WAAS,IAAI;AACf;AAEF,CAXC,kBAWkB,CAAC;AAClB,CAZD,kBAYoB,CAAC;AACpB,CAbD,kBAaoB;AACnB,CAdD,kBAcoB;AACjB,oBAAkB,KAChB;AAEJ;AAEF,CApBC,kBAoBkB,CAAC;AAClB,CArBD,kBAqBoB;AACjB,oBAAkB,KAChB;AAEJ;AAEF,CA3BC,kBA2BkB,CAAC;AAChB,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACb;AAEF,CAAC,sBAAsB,CAhItB;AAiIC,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,sCAAoC,KAClC;AAEJ;AAEA,CARC,sBAQsB,CAxItB,sBAwI6C;AAC5C,CATD,sBASwB,CAzIxB,sBAyI+C;AAC5C,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;AAEF,CAlBC,sBAkBsB,CAlJtB,sBAkJ6C;AAC1C,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;AAEF,CA3BC,sBA2BsB,CAnHtB,6BAmHoD;AACjD,CA5BH,sBA4B0B,CApH1B,6BAoHwD;AACnD,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;","names":[]}

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { ListBoxItemProps, ComboBoxProps } from 'react-aria-components';
+import { ComboBoxProps, PopoverProps, ListBoxItemProps } from 'react-aria-components';
 
 interface ComboboxBaseProps<T extends object> extends Omit<ComboBoxProps<T>, "children" | "menuTrigger" | "aria-label" | "aria-labelledby"> {
     children: React.ReactNode | ((item: T) => React.ReactNode);
@@ -8,6 +8,7 @@ interface ComboboxBaseProps<T extends object> extends Omit<ComboBoxProps<T>, "ch
     errorText?: string;
     helpText?: string;
     menuTrigger?: "focus" | "manual" | "input";
+    popoverProps?: PopoverProps;
 }
 type ComboboxProps<T extends object> = ComboboxBaseProps<T> & ({
     label: string;
@@ -16,7 +17,7 @@ type ComboboxProps<T extends object> = ComboboxBaseProps<T> & ({
     label?: never;
     "aria-labelledby": string;
 });
-declare function Combobox<T extends object>({ children, className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, menuTrigger, ...props }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
+declare function Combobox<T extends object>({ children, className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, menuTrigger, popoverProps, ...props }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
 declare function ComboboxItem({ className, ...props }: ListBoxItemProps & {
     className?: string;
 }): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { ListBoxItemProps, ComboBoxProps } from 'react-aria-components';
+import { ComboBoxProps, PopoverProps, ListBoxItemProps } from 'react-aria-components';
 
 interface ComboboxBaseProps<T extends object> extends Omit<ComboBoxProps<T>, "children" | "menuTrigger" | "aria-label" | "aria-labelledby"> {
     children: React.ReactNode | ((item: T) => React.ReactNode);
@@ -8,6 +8,7 @@ interface ComboboxBaseProps<T extends object> extends Omit<ComboBoxProps<T>, "ch
     errorText?: string;
     helpText?: string;
     menuTrigger?: "focus" | "manual" | "input";
+    popoverProps?: PopoverProps;
 }
 type ComboboxProps<T extends object> = ComboboxBaseProps<T> & ({
     label: string;
@@ -16,7 +17,7 @@ type ComboboxProps<T extends object> = ComboboxBaseProps<T> & ({
     label?: never;
     "aria-labelledby": string;
 });
-declare function Combobox<T extends object>({ children, className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, menuTrigger, ...props }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
+declare function Combobox<T extends object>({ children, className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, menuTrigger, popoverProps, ...props }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
 declare function ComboboxItem({ className, ...props }: ListBoxItemProps & {
     className?: string;
 }): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("@sikt/sds-form"),r=require("@sikt/sds-icons"),o=require("clsx/lite"),s=require("react"),t=require("react-aria-components"),a=require("react/jsx-runtime"),l=Object.defineProperty,c=Object.defineProperties,i=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,m=(e,r,o)=>r in e?l(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,d=(e,r)=>{for(var o in r||(r={}))b.call(r,o)&&m(e,o,r[o]);if(n)for(var o of n(r))x.call(r,o)&&m(e,o,r[o]);return e},u=(e,r)=>{var o={};for(var s in e)b.call(e,s)&&r.indexOf(s)<0&&(o[s]=e[s]);if(null!=e&&n)for(var s of n(e))r.indexOf(s)<0&&x.call(e,s)&&(o[s]=e[s]);return o};exports.Combobox=function(l){var n=l,{children:b,className:x,errorText:m,helpText:p,label:h,"aria-labelledby":f,menuTrigger:j="focus"}=n,v=u(n,["children","className","errorText","helpText","label","aria-labelledby","menuTrigger"]);const _=s.useId(),N="".concat(_,"-help-text"),[O,y]=s.useState(!1);return a.jsx(e.FormField,{className:o.clsx("sds-combobox",m&&"sds-combobox--invalid",x),label:h,errorText:m,helpText:O?"":p,htmlFor:_,helpTextId:N,children:a.jsxs(t.ComboBox,(g=d({menuTrigger:j,onOpenChange:function(e){y(e)},id:_,"aria-label":h,"aria-labelledby":f},v),T={children:[a.jsxs("div",{className:"sds-combobox__combobox",children:[a.jsx(t.Input,{className:"sds-combobox__combobox-input"}),a.jsx(t.Button,{className:"sds-combobox__combobox-button",children:a.jsx(r.CaretCircleDownIcon,{})})]}),a.jsx(t.Popover,{className:"sds-combobox__popover",children:a.jsx(t.ListBox,{className:"sds-combobox__listbox",children:b})})]},c(g,i(T))))});var g,T},exports.ComboboxHeader=function({children:e}){return a.jsx(t.Header,{className:"sds-combobox__header",children:e})},exports.ComboboxItem=function(e){var r=e,{className:s}=r,l=u(r,["className"]);return a.jsx(t.ListBoxItem,d({className:o.clsx("sds-combobox__item",s)},l))},exports.ComboboxSection=function({children:e}){return a.jsx(t.Section,{children:e})};//# sourceMappingURL=index.js.map
+"use strict";var e=require("@sikt/sds-form"),o=require("@sikt/sds-icons"),r=require("clsx/lite"),s=require("react"),t=require("react-aria-components"),l=require("react/jsx-runtime"),a=Object.defineProperty,c=Object.defineProperties,i=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,m=(e,o,r)=>o in e?a(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r,d=(e,o)=>{for(var r in o||(o={}))b.call(o,r)&&m(e,r,o[r]);if(n)for(var r of n(o))x.call(o,r)&&m(e,r,o[r]);return e},p=(e,o)=>c(e,i(o)),u=(e,o)=>{var r={};for(var s in e)b.call(e,s)&&o.indexOf(s)<0&&(r[s]=e[s]);if(null!=e&&n)for(var s of n(e))o.indexOf(s)<0&&x.call(e,s)&&(r[s]=e[s]);return r};exports.Combobox=function(a){var c=a,{children:i,className:n,errorText:b,helpText:x,label:m,"aria-labelledby":h,menuTrigger:f="focus",popoverProps:j}=c,v=u(c,["children","className","errorText","helpText","label","aria-labelledby","menuTrigger","popoverProps"]);const _=s.useId(),N="".concat(_,"-help-text"),[O,y]=s.useState(!1);return l.jsx(e.FormField,{className:r.clsx("sds-combobox",b&&"sds-combobox--invalid",n),label:m,errorText:b,helpText:O?"":x,htmlFor:_,helpTextId:N,children:l.jsxs(t.ComboBox,p(d({menuTrigger:f,onOpenChange:function(e){y(e)},id:_,"aria-label":m,"aria-labelledby":h},v),{children:[l.jsxs("div",{className:"sds-combobox__combobox",children:[l.jsx(t.Input,{className:"sds-combobox__combobox-input"}),l.jsx(t.Button,{className:"sds-combobox__combobox-button",children:l.jsx(o.ExpandShowAltIcon,{})})]}),l.jsx(t.Popover,p(d({className:"sds-combobox__popover"},j),{children:l.jsx(t.ListBox,{className:"sds-combobox__listbox",children:i})}))]}))})},exports.ComboboxHeader=function({children:e}){return l.jsx(t.Header,{className:"sds-combobox__header",children:e})},exports.ComboboxItem=function(e){var o=e,{className:s}=o,a=u(o,["className"]);return l.jsx(t.ListBoxItem,d({className:r.clsx("sds-combobox__item",s)},a))},exports.ComboboxSection=function({children:e}){return l.jsx(t.ListBoxSection,{children:e})};//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Combobox.tsx"],"names":["useId","useState","jsx","FormField","clsx","jsxs","AriaCombobox","Input","Button","CaretCircleDownIcon","Popover","ListBox","ListBoxItem","Header","Section"],"mappings":"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","file":"index.js","sourcesContent":["import { FormField } from \"@sikt/sds-form\";\nimport { CaretCircleDownIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, useId, useState } from \"react\";\nimport {\n  ComboBox as AriaCombobox,\n  ComboBoxProps as AriaComboboxProps,\n  Button,\n  Header,\n  Input,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  Popover,\n  Section,\n} from \"react-aria-components\";\nimport \"./combobox.pcss\";\n\ninterface ComboboxBaseProps<T extends object>\n  extends Omit<\n    AriaComboboxProps<T>,\n    \"children\" | \"menuTrigger\" | \"aria-label\" | \"aria-labelledby\"\n  > {\n  children: React.ReactNode | ((item: T) => React.ReactNode);\n  className?: string;\n  errorText?: string;\n  helpText?: string;\n  menuTrigger?: \"focus\" | \"manual\" | \"input\";\n}\n\nexport type ComboboxProps<T extends object> = ComboboxBaseProps<T> &\n  (\n    | {\n        label: string;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        \"aria-labelledby\": string;\n      }\n  );\n\nexport function Combobox<T extends object>({\n  children,\n  className,\n  errorText,\n  helpText,\n  label,\n  \"aria-labelledby\": ariaLabelledBy,\n  menuTrigger = \"focus\",\n  ...props\n}: ComboboxProps<T>) {\n  const id = useId();\n  const helpTextId = `${id}-help-text`;\n  const [open, setOpen] = useState(false);\n\n  function onOpenChangeHandler(isOpen: boolean) {\n    setOpen(isOpen);\n  }\n\n  return (\n    <FormField\n      className={clsx(\n        \"sds-combobox\",\n        errorText && \"sds-combobox--invalid\",\n        className,\n      )}\n      label={label}\n      errorText={errorText}\n      helpText={open ? \"\" : helpText}\n      htmlFor={id}\n      helpTextId={helpTextId}\n    >\n      <AriaCombobox\n        menuTrigger={menuTrigger}\n        onOpenChange={onOpenChangeHandler}\n        id={id}\n        aria-label={label}\n        aria-labelledby={ariaLabelledBy}\n        {...props}\n      >\n        <div className=\"sds-combobox__combobox\">\n          <Input className=\"sds-combobox__combobox-input\" />\n          <Button className=\"sds-combobox__combobox-button\">\n            <CaretCircleDownIcon />\n          </Button>\n        </div>\n        <Popover className=\"sds-combobox__popover\">\n          <ListBox className=\"sds-combobox__listbox\">{children}</ListBox>\n        </Popover>\n      </AriaCombobox>\n    </FormField>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  ...props\n}: ListBoxItemProps & { className?: string }) {\n  return (\n    <ListBoxItem className={clsx(\"sds-combobox__item\", className)} {...props} />\n  );\n}\n\nexport function ComboboxHeader({ children }: { children: ReactNode }) {\n  return <Header className=\"sds-combobox__header\">{children}</Header>;\n}\n\nexport function ComboboxSection({ children }: { children: ReactNode }) {\n  return <Section>{children}</Section>;\n}\n"]}
+{"version":3,"sources":["../src/Combobox.tsx"],"names":["useId","useState","jsx","FormField","clsx","jsxs","AriaCombobox","Input","Button","ExpandShowAltIcon","Popover","ListBox","ListBoxItem","Header","ListBoxSection"],"mappings":"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","file":"index.js","sourcesContent":["import { FormField } from \"@sikt/sds-form\";\nimport { ExpandShowAltIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, useId, useState } from \"react\";\nimport {\n  ComboBox as AriaCombobox,\n  ComboBoxProps as AriaComboboxProps,\n  Button,\n  Header,\n  Input,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxSection,\n  Popover,\n  PopoverProps,\n} from \"react-aria-components\";\nimport \"./combobox.pcss\";\n\ninterface ComboboxBaseProps<T extends object>\n  extends Omit<\n    AriaComboboxProps<T>,\n    \"children\" | \"menuTrigger\" | \"aria-label\" | \"aria-labelledby\"\n  > {\n  children: React.ReactNode | ((item: T) => React.ReactNode);\n  className?: string;\n  errorText?: string;\n  helpText?: string;\n  menuTrigger?: \"focus\" | \"manual\" | \"input\";\n  popoverProps?: PopoverProps;\n}\n\nexport type ComboboxProps<T extends object> = ComboboxBaseProps<T> &\n  (\n    | {\n        label: string;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        \"aria-labelledby\": string;\n      }\n  );\n\nexport function Combobox<T extends object>({\n  children,\n  className,\n  errorText,\n  helpText,\n  label,\n  \"aria-labelledby\": ariaLabelledBy,\n  menuTrigger = \"focus\",\n  popoverProps,\n  ...props\n}: ComboboxProps<T>) {\n  const id = useId();\n  const helpTextId = `${id}-help-text`;\n  const [open, setOpen] = useState(false);\n\n  function onOpenChangeHandler(isOpen: boolean) {\n    setOpen(isOpen);\n  }\n\n  return (\n    <FormField\n      className={clsx(\n        \"sds-combobox\",\n        errorText && \"sds-combobox--invalid\",\n        className,\n      )}\n      label={label}\n      errorText={errorText}\n      helpText={open ? \"\" : helpText}\n      htmlFor={id}\n      helpTextId={helpTextId}\n    >\n      <AriaCombobox\n        menuTrigger={menuTrigger}\n        onOpenChange={onOpenChangeHandler}\n        id={id}\n        aria-label={label}\n        aria-labelledby={ariaLabelledBy}\n        {...props}\n      >\n        <div className=\"sds-combobox__combobox\">\n          <Input className=\"sds-combobox__combobox-input\" />\n          <Button className=\"sds-combobox__combobox-button\">\n            <ExpandShowAltIcon />\n          </Button>\n        </div>\n        <Popover className=\"sds-combobox__popover\" {...popoverProps}>\n          <ListBox className=\"sds-combobox__listbox\">{children}</ListBox>\n        </Popover>\n      </AriaCombobox>\n    </FormField>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  ...props\n}: ListBoxItemProps & { className?: string }) {\n  return (\n    <ListBoxItem className={clsx(\"sds-combobox__item\", className)} {...props} />\n  );\n}\n\nexport function ComboboxHeader({ children }: { children: ReactNode }) {\n  return <Header className=\"sds-combobox__header\">{children}</Header>;\n}\n\nexport function ComboboxSection({ children }: { children: ReactNode }) {\n  return <ListBoxSection>{children}</ListBoxSection>;\n}\n"]}

package/dist/index.mjs

@@ -1 +1 @@
-import{FormField as e}from"@sikt/sds-form";import{CaretCircleDownIcon as r}from"@sikt/sds-icons";import{clsx as o}from"clsx/lite";import{useId as a,useState as l}from"react";import{ComboBox as c,ListBoxItem as t,Header as s,Section as n,Input as i,Button as b,Popover as m,ListBox as d}from"react-aria-components";import{jsx as p,jsxs as f}from"react/jsx-runtime";var x=Object.defineProperty,u=Object.defineProperties,h=Object.getOwnPropertyDescriptors,_=Object.getOwnPropertySymbols,v=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable,O=(e,r,o)=>r in e?x(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,y=(e,r)=>{for(var o in r||(r={}))v.call(r,o)&&O(e,o,r[o]);if(_)for(var o of _(r))N.call(r,o)&&O(e,o,r[o]);return e},g=(e,r)=>{var o={};for(var a in e)v.call(e,a)&&r.indexOf(a)<0&&(o[a]=e[a]);if(null!=e&&_)for(var a of _(e))r.indexOf(a)<0&&N.call(e,a)&&(o[a]=e[a]);return o};function T(t){var s=t,{children:n,className:x,errorText:_,helpText:v,label:N,"aria-labelledby":O,menuTrigger:T="focus"}=s,j=g(s,["children","className","errorText","helpText","label","aria-labelledby","menuTrigger"]);const P=a(),w="".concat(P,"-help-text"),[k,I]=l(!1);return p(e,{className:o("sds-combobox",_&&"sds-combobox--invalid",x),label:N,errorText:_,helpText:k?"":v,htmlFor:P,helpTextId:w,children:f(c,(C=y({menuTrigger:T,onOpenChange:function(e){I(e)},id:P,"aria-label":N,"aria-labelledby":O},j),D={children:[f("div",{className:"sds-combobox__combobox",children:[p(i,{className:"sds-combobox__combobox-input"}),p(b,{className:"sds-combobox__combobox-button",children:p(r,{})})]}),p(m,{className:"sds-combobox__popover",children:p(d,{className:"sds-combobox__listbox",children:n})})]},u(C,h(D))))});var C,D}function j(e){var r=e,{className:a}=r,l=g(r,["className"]);return p(t,y({className:o("sds-combobox__item",a)},l))}function P({children:e}){return p(s,{className:"sds-combobox__header",children:e})}function w({children:e}){return p(n,{children:e})}export{T as Combobox,P as ComboboxHeader,j as ComboboxItem,w as ComboboxSection};//# sourceMappingURL=index.mjs.map
+import{FormField as e}from"@sikt/sds-form";import{ExpandShowAltIcon as r}from"@sikt/sds-icons";import{clsx as o}from"clsx/lite";import{useId as l,useState as a}from"react";import{ComboBox as c,Input as s,Button as t,Popover as n,ListBox as i,ListBoxItem as b,Header as m,ListBoxSection as d}from"react-aria-components";import{jsx as p,jsxs as f}from"react/jsx-runtime";var x=Object.defineProperty,u=Object.defineProperties,h=Object.getOwnPropertyDescriptors,v=Object.getOwnPropertySymbols,_=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable,O=(e,r,o)=>r in e?x(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,y=(e,r)=>{for(var o in r||(r={}))_.call(r,o)&&O(e,o,r[o]);if(v)for(var o of v(r))N.call(r,o)&&O(e,o,r[o]);return e},g=(e,r)=>u(e,h(r)),T=(e,r)=>{var o={};for(var l in e)_.call(e,l)&&r.indexOf(l)<0&&(o[l]=e[l]);if(null!=e&&v)for(var l of v(e))r.indexOf(l)<0&&N.call(e,l)&&(o[l]=e[l]);return o};function j(b){var m=b,{children:d,className:x,errorText:u,helpText:h,label:v,"aria-labelledby":_,menuTrigger:N="focus",popoverProps:O}=m,j=T(m,["children","className","errorText","helpText","label","aria-labelledby","menuTrigger","popoverProps"]);const P=l(),w="".concat(P,"-help-text"),[k,I]=a(!1);return p(e,{className:o("sds-combobox",u&&"sds-combobox--invalid",x),label:v,errorText:u,helpText:k?"":h,htmlFor:P,helpTextId:w,children:f(c,g(y({menuTrigger:N,onOpenChange:function(e){I(e)},id:P,"aria-label":v,"aria-labelledby":_},j),{children:[f("div",{className:"sds-combobox__combobox",children:[p(s,{className:"sds-combobox__combobox-input"}),p(t,{className:"sds-combobox__combobox-button",children:p(r,{})})]}),p(n,g(y({className:"sds-combobox__popover"},O),{children:p(i,{className:"sds-combobox__listbox",children:d})}))]}))})}function P(e){var r=e,{className:l}=r,a=T(r,["className"]);return p(b,y({className:o("sds-combobox__item",l)},a))}function w({children:e}){return p(m,{className:"sds-combobox__header",children:e})}function k({children:e}){return p(d,{children:e})}export{j as Combobox,w as ComboboxHeader,P as ComboboxItem,k as ComboboxSection};//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Combobox.tsx"],"names":["AriaCombobox"],"mappings":"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","file":"index.mjs","sourcesContent":["import { FormField } from \"@sikt/sds-form\";\nimport { CaretCircleDownIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, useId, useState } from \"react\";\nimport {\n  ComboBox as AriaCombobox,\n  ComboBoxProps as AriaComboboxProps,\n  Button,\n  Header,\n  Input,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  Popover,\n  Section,\n} from \"react-aria-components\";\nimport \"./combobox.pcss\";\n\ninterface ComboboxBaseProps<T extends object>\n  extends Omit<\n    AriaComboboxProps<T>,\n    \"children\" | \"menuTrigger\" | \"aria-label\" | \"aria-labelledby\"\n  > {\n  children: React.ReactNode | ((item: T) => React.ReactNode);\n  className?: string;\n  errorText?: string;\n  helpText?: string;\n  menuTrigger?: \"focus\" | \"manual\" | \"input\";\n}\n\nexport type ComboboxProps<T extends object> = ComboboxBaseProps<T> &\n  (\n    | {\n        label: string;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        \"aria-labelledby\": string;\n      }\n  );\n\nexport function Combobox<T extends object>({\n  children,\n  className,\n  errorText,\n  helpText,\n  label,\n  \"aria-labelledby\": ariaLabelledBy,\n  menuTrigger = \"focus\",\n  ...props\n}: ComboboxProps<T>) {\n  const id = useId();\n  const helpTextId = `${id}-help-text`;\n  const [open, setOpen] = useState(false);\n\n  function onOpenChangeHandler(isOpen: boolean) {\n    setOpen(isOpen);\n  }\n\n  return (\n    <FormField\n      className={clsx(\n        \"sds-combobox\",\n        errorText && \"sds-combobox--invalid\",\n        className,\n      )}\n      label={label}\n      errorText={errorText}\n      helpText={open ? \"\" : helpText}\n      htmlFor={id}\n      helpTextId={helpTextId}\n    >\n      <AriaCombobox\n        menuTrigger={menuTrigger}\n        onOpenChange={onOpenChangeHandler}\n        id={id}\n        aria-label={label}\n        aria-labelledby={ariaLabelledBy}\n        {...props}\n      >\n        <div className=\"sds-combobox__combobox\">\n          <Input className=\"sds-combobox__combobox-input\" />\n          <Button className=\"sds-combobox__combobox-button\">\n            <CaretCircleDownIcon />\n          </Button>\n        </div>\n        <Popover className=\"sds-combobox__popover\">\n          <ListBox className=\"sds-combobox__listbox\">{children}</ListBox>\n        </Popover>\n      </AriaCombobox>\n    </FormField>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  ...props\n}: ListBoxItemProps & { className?: string }) {\n  return (\n    <ListBoxItem className={clsx(\"sds-combobox__item\", className)} {...props} />\n  );\n}\n\nexport function ComboboxHeader({ children }: { children: ReactNode }) {\n  return <Header className=\"sds-combobox__header\">{children}</Header>;\n}\n\nexport function ComboboxSection({ children }: { children: ReactNode }) {\n  return <Section>{children}</Section>;\n}\n"]}
+{"version":3,"sources":["../src/Combobox.tsx"],"names":["AriaCombobox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CO,SAAS,SAA2B,EAUtB,EAAA;AAVsB,EACzC,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,iBAAmB,EAAA,cAAA;AAAA,IACnB,WAAc,GAAA,OAAA;AAAA,IACd;AAAA,GApDF,GA4C2C,EAStC,EAAA,KAAA,GAAA,SAAA,CATsC,EAStC,EAAA;AAAA,IARH,UAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,iBAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,MAAM,KAAK,KAAM,EAAA;AACjB,EAAM,MAAA,UAAA,GAAa,GAAG,MAAE,CAAA,EAAA,EAAA,YAAA,CAAA;AACxB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AAEtC,EAAA,SAAS,oBAAoB,MAAiB,EAAA;AAC5C,IAAA,OAAA,CAAQ,MAAM,CAAA;AAAA;AAGhB,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,cAAA;AAAA,QACA,SAAa,IAAA,uBAAA;AAAA,QACb;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA,EAAU,OAAO,EAAK,GAAA,QAAA;AAAA,MACtB,OAAS,EAAA,EAAA;AAAA,MACT,UAAA;AAAA,MAEA,QAAA,kBAAA,IAAA;AAAA,QAACA,QAAA;AAAA,QAAA,aAAA,CAAA,cAAA,CAAA;AAAA,UACC,WAAA;AAAA,UACA,YAAc,EAAA,mBAAA;AAAA,UACd,EAAA;AAAA,UACA,YAAY,EAAA,KAAA;AAAA,UACZ,iBAAiB,EAAA;AAAA,SAAA,EACb,KANL,CAAA,EAAA;AAAA,UAQC,QAAA,EAAA;AAAA,4BAAC,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,wBACb,EAAA,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,KAAA,EAAA,EAAM,WAAU,8BAA+B,EAAA,CAAA;AAAA,kCAC/C,MAAO,EAAA,EAAA,SAAA,EAAU,+BAChB,EAAA,QAAA,kBAAA,GAAA,CAAC,qBAAkB,CACrB,EAAA;AAAA,aACF,EAAA,CAAA;AAAA,4BACA,GAAA,CAAC,OAAQ,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,SAAA,EAAU,uBAA4B,EAAA,EAAA,YAAA,CAAA,EAA9C,EACC,QAAA,kBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,SAAA,EAAU,uBAAyB,EAAA,QAAA,EAAS,CACvD,EAAA,CAAA;AAAA;AAAA,SAAA;AAAA;AACF;AAAA,GACF;AAEJ;AAEO,SAAS,aAAa,EAGiB,EAAA;AAHjB,EAC3B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA;AAAA,GAnGF,GAkG6B,EAExB,EAAA,KAAA,GAAA,SAAA,CAFwB,EAExB,EAAA;AAAA,IADH;AAAA,GAAA,CAAA;AAGA,EAAA,2BACG,WAAY,EAAA,cAAA,CAAA,EAAA,SAAA,EAAW,KAAK,oBAAsB,EAAA,SAAS,KAAO,KAAO,CAAA,CAAA;AAE9E;AAEO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAqC,EAAA;AACpE,EAAA,uBAAQ,GAAA,CAAA,MAAA,EAAA,EAAO,SAAU,EAAA,sBAAA,EAAwB,QAAS,EAAA,CAAA;AAC5D;AAEO,SAAS,eAAA,CAAgB,EAAE,QAAA,EAAqC,EAAA;AACrE,EAAO,uBAAA,GAAA,CAAC,kBAAgB,QAAS,EAAA,CAAA;AACnC","file":"index.mjs","sourcesContent":["import { FormField } from \"@sikt/sds-form\";\nimport { ExpandShowAltIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, useId, useState } from \"react\";\nimport {\n  ComboBox as AriaCombobox,\n  ComboBoxProps as AriaComboboxProps,\n  Button,\n  Header,\n  Input,\n  ListBox,\n  ListBoxItem,\n  ListBoxItemProps,\n  ListBoxSection,\n  Popover,\n  PopoverProps,\n} from \"react-aria-components\";\nimport \"./combobox.pcss\";\n\ninterface ComboboxBaseProps<T extends object>\n  extends Omit<\n    AriaComboboxProps<T>,\n    \"children\" | \"menuTrigger\" | \"aria-label\" | \"aria-labelledby\"\n  > {\n  children: React.ReactNode | ((item: T) => React.ReactNode);\n  className?: string;\n  errorText?: string;\n  helpText?: string;\n  menuTrigger?: \"focus\" | \"manual\" | \"input\";\n  popoverProps?: PopoverProps;\n}\n\nexport type ComboboxProps<T extends object> = ComboboxBaseProps<T> &\n  (\n    | {\n        label: string;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        \"aria-labelledby\": string;\n      }\n  );\n\nexport function Combobox<T extends object>({\n  children,\n  className,\n  errorText,\n  helpText,\n  label,\n  \"aria-labelledby\": ariaLabelledBy,\n  menuTrigger = \"focus\",\n  popoverProps,\n  ...props\n}: ComboboxProps<T>) {\n  const id = useId();\n  const helpTextId = `${id}-help-text`;\n  const [open, setOpen] = useState(false);\n\n  function onOpenChangeHandler(isOpen: boolean) {\n    setOpen(isOpen);\n  }\n\n  return (\n    <FormField\n      className={clsx(\n        \"sds-combobox\",\n        errorText && \"sds-combobox--invalid\",\n        className,\n      )}\n      label={label}\n      errorText={errorText}\n      helpText={open ? \"\" : helpText}\n      htmlFor={id}\n      helpTextId={helpTextId}\n    >\n      <AriaCombobox\n        menuTrigger={menuTrigger}\n        onOpenChange={onOpenChangeHandler}\n        id={id}\n        aria-label={label}\n        aria-labelledby={ariaLabelledBy}\n        {...props}\n      >\n        <div className=\"sds-combobox__combobox\">\n          <Input className=\"sds-combobox__combobox-input\" />\n          <Button className=\"sds-combobox__combobox-button\">\n            <ExpandShowAltIcon />\n          </Button>\n        </div>\n        <Popover className=\"sds-combobox__popover\" {...popoverProps}>\n          <ListBox className=\"sds-combobox__listbox\">{children}</ListBox>\n        </Popover>\n      </AriaCombobox>\n    </FormField>\n  );\n}\n\nexport function ComboboxItem({\n  className,\n  ...props\n}: ListBoxItemProps & { className?: string }) {\n  return (\n    <ListBoxItem className={clsx(\"sds-combobox__item\", className)} {...props} />\n  );\n}\n\nexport function ComboboxHeader({ children }: { children: ReactNode }) {\n  return <Header className=\"sds-combobox__header\">{children}</Header>;\n}\n\nexport function ComboboxSection({ children }: { children: ReactNode }) {\n  return <ListBoxSection>{children}</ListBoxSection>;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikt/sds-combobox",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "license": "UNLICENSED",
   "homepage": "https://designsystem.sikt.no/",
   "repository": {
@@ -34,10 +34,10 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@sikt/sds-core": "^4.1.1",
-    "@sikt/sds-form": "^3.0.1",
-    "@sikt/sds-icons": "^2.0.2",
-    "react-aria-components": "^1.4.1"
+    "@sikt/sds-core": "^4.4.0",
+    "@sikt/sds-form": "^3.0.2",
+    "@sikt/sds-icons": "^3.0.0",
+    "react-aria-components": "^1.7.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",