npm - @sikt/sds-combobox - Versions diffs - 1.0.1 → 2.0.1 - Mend

@sikt/sds-combobox 1.0.1 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,32 @@
 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.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
+- **deps:** correct deps on @sikt/sds-tokens ([b47f8a4](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/b47f8a4d27e99dcc731036ccf2b7b58a27d88da6))
+- **deps:** peer deps react@19.0.0 ([17352e2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/17352e291153f79c66a9de317ca42820159aee8a))
+- **deps:** update @sikt/sds-core@4.1.1 & @sikt/sds-icons@2.0.2 ([09e97cf](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/09e97cfe35780cc239ae2b7f55f4e793ec72e479))
+- **deps:** update @sikt/sds-form@3.0.1 ([8edf559](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/8edf55939469d254e70c081c9e5153fc0b45b5f4))
+- **deps:** update react-aria-components@1.4.1 ([14c37e7](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/14c37e72df0ae3bacf7b5a8bfa02db0dd5d077d0))
+## [2.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@1.0.1...@sikt/sds-combobox@2.0.0) (2024-09-23)
+### ⚠ BREAKING CHANGES
+- allow one of label or aria-labelledby for input components
+### Features
+- allow one of label or aria-labelledby for input components ([edcfefb](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/edcfefbda41a4781ea5fbda0f24e7743c1d165e2))
+### Bug Fixes
+- **deps:** change peer deps clsx to ^2.1.0 ([9eb76f1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/9eb76f1207a2ec8d19fda646c9bc26d5922b1839))
+- **deps:** update @sikt/sds-form@3.0.0 ([6859894](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/68598941f873ffede6a5d18936279da5b98e5af2))
+- **deps:** update dependency react-aria-components to ^1.3.1 ([d691705](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/d6917053e05cc53aaddd2b1ff665b3b73a7761b2))
 ## [1.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@1.0.0...@sikt/sds-combobox@1.0.1) (2024-07-03)
 ### Bug Fixes

package/README.md CHANGED Viewed

@@ -3,7 +3,7 @@
 ## Consume
 ```sh
-npm i -s @sikt/sds-combobox
+npm i -s @sikt/sds-{combobox,form}
 ```
 ### React
@@ -12,6 +12,7 @@ npm i -s @sikt/sds-combobox
 ```js
 import { Combobox, ComboBoxItem } from "@sikt/sds-combobox";
+import "@sikt/sds-form/dist/index.css";
 import "@sikt/sds-combobox/dist/index.css";
 <Combobox
@@ -28,13 +29,10 @@ import "@sikt/sds-combobox/dist/index.css";
 #### With static content
 ```js
-import { Combobox, ComboBoxItem } from "@sikt/sds-combobox";
-import "@sikt/sds-combobox/dist/index.css";
 <Combobox label="...">
   <ComboBoxItem id="Foo">Foo</ComboBoxItem>
   <ComboBoxItem id="Baz">Baz</ComboBoxItem>
-</Combobox>;
+</Combobox>
 ```
 ### Additional information

package/dist/index.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/* combobox.pcss */
+/* src/combobox.pcss */
 .sds-combobox {
   --combobox-border-color: var(--sds-color-interaction-neutral-strong-default);
   --combobox-border-width: var(--sds-space-border-weight-regular);

package/dist/index.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../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":[]}
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":[]}

package/dist/index.d.mts CHANGED Viewed

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

package/dist/index.d.ts CHANGED Viewed

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

package/dist/index.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";var e=require("~~clsx~~"),o=require("~~react~~"),s=require("~~react-aria-components~~"),r=require("~~@sikt/sds-form~~"),c=require("~~@sikt/sds~~-~~icons~~"),t=require("react/jsx-runtime")~~;function~~ n(e)~~{return~~ e~~&&e.__esModule~~?e:{~~default~~:e}}var i=n(e);exports.Combobox=function({children:e,className:n,errorText:a,helpText:x,label:l,menuTrigger:b="focus"~~,...m~~}){const d=o.useId(),u="".concat(d,"-help-text"),[h,_]=o.useState(!1);return t.jsx(r.FormField,{className:i.~~default~~("sds-combobox",a&&"sds-combobox--invalid",n),label:l,errorText:a,helpText:h?"":x,htmlFor:d,helpTextId:u,children:t.jsxs(s.ComboBox,{menuTrigger:b,onOpenChange:function(e){_(e)},id:d,"aria-label":~~l,...m~~,children:[t.jsxs("div",{className:"sds-combobox__combobox",children:[t.jsx(s.Input,{className:"sds-combobox__combobox-input"}),t.jsx(s.Button,{className:"sds-combobox__combobox-button",children:t.jsx(c.CaretCircleDownIcon,{})})]}),t.jsx(s.Popover,{className:"sds-combobox__popover",children:t.jsx(s.ListBox,{className:"sds-combobox__listbox",children:e})})]})})},exports.ComboboxHeader=function({children:e}){return t.jsx(s.Header,{className:"sds-combobox__header",children:e})},exports.ComboboxItem=function({className:~~e,...o~~}){return t.jsx(s.ListBoxItem,{className:i.~~default~~("sds-combobox__item",e)~~,...o~~})},exports.ComboboxSection=function({children:e}){return t.jsx(s.Section,{children:e})};//# sourceMappingURL=index.js.map
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

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../Combobox.tsx"],"names":[],"mappings":"~~;AAEA~~,~~OAAO~~,~~UAAU~~;~~AACjB~~,~~SAAoB~~,~~OAAO~~,~~gBAAgB;AAC3C;AAAA~~,~~EACE~~;AAAA,~~EACA~~,~~YAAY~~;AAAA,~~EAEZ~~;AAAA,~~EACA~~;AAAA,~~EACA~~;AAAA,~~EAEA~~;AAAA,~~EACA~~;AAAA,~~EACA~~;AAAA,~~OACK;AAEP~~,~~SAAS~~,~~iBAAiB;AAC1B~~,~~SAAS~~,~~2BAA2B;AAiD5B~~,~~SACE~~,~~KADF;AArCD~~,~~SAAS~~,~~SAA2B~~;AAAA,~~EACzC~~;AAAA,~~EACA~~;AAAA,~~EACA~~;AAAA,~~EACA~~;AAAA,~~EACA~~;AAAA,~~EACA~~,~~cAAc~~;AAAA,~~EACd~~,~~GAAG~~;~~AACL~~,~~GAAqB~~;~~AACnB~~,~~QAAM~~,~~KAAK~~,~~MAAM~~;AACjB,~~QAAM~~,~~aAAa~~,GAAG,~~WAAE~~;AACxB,~~QAAM~~,CAAC,~~MAAM~~,OAAO,~~IAAI~~,~~SAAS~~,KAAK;AAEtC,~~WAAS~~,oBAAoB,~~QAAiB~~;AAC5C,~~YAAQ~~,MAAM;AAAA,~~EAChB~~;AAEA,~~SACE~~;AAAA,~~IAAC~~;AAAA;AAAA,MACC,~~WAAW~~;AAAA,QACT;AAAA,QACA,~~aAAa~~;AAAA,QACb;AAAA,~~MACF~~;AAAA,MACA;AAAA,MACA;AAAA,MACA,~~UAAU~~,OAAO,~~KAAK~~;AAAA,MACtB,~~SAAS~~;AAAA,MACT;AAAA,MAEA;AAAA,~~QAAC~~;AAAA;AAAA,UACC;AAAA,UACA,~~cAAc~~;AAAA,UACd;AAAA,UACA,~~cAAY~~;AAAA,~~UACX~~,~~GAAG~~;AAAA,~~UAEJ~~;AAAA,~~iCAAC~~,~~SAAI~~,WAAU,~~0BACb~~;AAAA,~~kCAAC~~,~~SAAM~~,WAAU,~~gCAA~~+B;AAAA,~~cAChD~~,~~oBAAC~~,~~UAAO~~,~~WAAU~~,~~iCAChB~~,~~8BAAC~~,~~uBAAoB~~,~~GACvB~~;AAAA,~~eACF~~;AAAA,~~YACA~~,~~oBAAC~~,~~WAAQ~~,~~WAAU~~,~~yBACjB~~,~~8BAAC~~,~~WAAQ~~,~~WAAU~~,~~yBAAyB~~,~~UAAS~~,~~GACvD~~;AAAA;AAAA;AAAA,~~MACF~~;AAAA;AAAA,~~EACF~~;AAEJ;AAEO,SAAS,aAAa;~~AAAA~~,EAC3B;AAAA,~~EACA~~,~~GAAG~~;~~AACL~~,~~GAA8C~~;~~AAC5C~~,~~SACE~~,~~oBAAC~~,~~eAAY~~,~~WAAW~~,~~KAAK~~,~~sBAAsB~~,SAAS,~~GAAI~~,~~GAAG~~,~~OAAO~~;AAE9E;AAEO,SAAS,~~eAAe~~,EAAE,~~SAAS~~,~~GAA4B~~;AACpE,~~SAAO~~,~~oBAAC~~,~~UAAO~~,~~WAAU~~,~~wBAAwB~~,~~UAAS~~;AAC5D;AAEO,SAAS,~~gBAAgB~~,EAAE,~~SAAS~~,~~GAA4B~~;AACrE,~~SAAO~~,~~oBAAC~~,~~WAAS~~,~~UAAS~~;AAC5B","sourcesContent":["import \"~~./combobox.pcss~~\";\n\nimport clsx from \"clsx\";\nimport { ReactNode, useId, useState } from \"react\";\nimport {\n ~~Button,\n~~ ComboBox as AriaCombobox,\n ComboBoxProps as AriaComboboxProps,\n Input,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n Popover,\n ~~Header,\n~~ Section,\n} from \"react-aria-components\";\n\nimport ~~{ FormField } from~~ \"~~@sikt/sds-form~~\";\~~nimport { CaretCircleDownIcon } from \"@sikt/sds-icons\";\~~n\~~nexport~~ ~~interface ComboboxProps~~<T extends object>\n extends Omit<AriaComboboxProps<T>, \"children\" \| \"menuTrigger\"> {\n children: React.ReactNode \| ((item: T) => React.ReactNode);\n ~~label: string;\n~~ className?: string;\n errorText?: string;\n helpText?: string;\n menuTrigger?: \"focus\" \| \"manual\" \| \"input\";\n}\n\nexport function Combobox<T extends object>({\n children,\n className,\n errorText,\n helpText,\n label,\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 {...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"]}
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"]}

package/dist/index.mjs CHANGED Viewed

	@@ -1 +1 @@
1	- import o from"clsx";import{useId as e,useState as r}from"react";import{ComboBox as s,~~Input~~ as c,~~Button~~ as m,~~Popover~~ as n,~~ListBox~~ as t,~~ListBoxItem~~ as i,~~Header~~ as l,~~Section~~ as a}from"react-aria-components";import{~~FormField~~ as b}from"~~@sikt~~/~~sds~~-~~form~~";~~import~~{~~CaretCircleDownIcon~~ as d}~~from"@sikt/sds-icons"~~;~~import~~{~~jsx~~ as x,~~jsxs~~ as h}~~from"react/jsx-runtime"~~;function p({children:i,className:l,errorText:a,helpText:p,label:u,menuTrigger:_="focus"~~,...f~~}){const N=e(),T="".concat(N,"-help-text"),[g,v]=r(!1);return x(b,{className:o("sds-combobox",a&&"sds-combobox--invalid",l),label:u,errorText:a,helpText:g?"":p,htmlFor:N,helpTextId:T,children:h(s,{menuTrigger:_,onOpenChange:function(o){v(o)},id:N,"aria-label":~~u,...f~~,children:[h("div",{className:"sds-combobox__combobox",children:[x(c,{className:"sds-combobox__combobox-input"}),x(m,{className:"sds-combobox__combobox-button",children:x(d,{})})]}),x(n,{className:"sds-combobox__popover",children:x(t,{className:"sds-combobox__listbox",children:i})})]})})}function u({className:~~e,...~~r}){return x(i,{className:o("sds-combobox__item",e)~~,...r~~})}function _({children:o}){return x(l,{className:"sds-combobox__header",children:o})}function f({children:o}){return x(a,{children:o})}export{p as Combobox,_ as ComboboxHeader,u as ComboboxItem,f as ComboboxSection};//# sourceMappingURL=index.mjs.map
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

package/dist/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../Combobox.tsx"],"names":[],"mappings":"~~;AAEA~~,~~OAAO~~,~~UAAU~~;~~AACjB~~,~~SAAoB~~,~~OAAO~~,~~gBAAgB;AAC3C;AAAA~~,~~EACE~~;AAAA,~~EACA~~,~~YAAY~~;AAAA,~~EAEZ~~;AAAA,~~EACA~~;AAAA,~~EACA~~;AAAA,~~EAEA~~;AAAA,~~EACA~~;AAAA,~~EACA~~;AAAA,~~OACK;AAEP~~,~~SAAS~~,~~iBAAiB;AAC1B~~,~~SAAS~~,~~2BAA2B;AAiD5B~~,~~SACE~~,~~KADF;AArCD~~,~~SAAS~~,~~SAA2B~~;AAAA,~~EACzC~~;AAAA,~~EACA~~;AAAA,~~EACA~~;AAAA,~~EACA~~;AAAA,~~EACA~~;AAAA,~~EACA~~,~~cAAc~~;AAAA,~~EACd~~,~~GAAG~~;~~AACL~~,~~GAAqB~~;~~AACnB~~,~~QAAM~~,KAAK,~~MAAM~~;AACjB,~~QAAM~~,~~aAAa~~,GAAG,~~WAAE~~;AACxB,~~QAAM~~,CAAC,~~MAAM~~,OAAO,~~IAAI~~,SAAS,KAAK;AAEtC,~~WAAS~~,oBAAoB,~~QAAiB~~;AAC5C,~~YAAQ~~,MAAM;AAAA,~~EAChB~~;AAEA,~~SACE~~;AAAA,IAAC;AAAA;AAAA,MACC,~~WAAW~~;AAAA,QACT;AAAA,QACA,~~aAAa~~;AAAA,QACb;AAAA,~~MACF~~;AAAA,MACA;AAAA,MACA;AAAA,MACA,~~UAAU~~,OAAO,~~KAAK~~;AAAA,MACtB,~~SAAS~~;AAAA,MACT;AAAA,MAEA;AAAA,~~QAAC~~;AAAA;AAAA,UACC;AAAA,UACA,~~cAAc~~;AAAA,UACd;AAAA,UACA,~~cAAY~~;AAAA,~~UACX~~,~~GAAG~~;AAAA,~~UAEJ~~;AAAA,~~iCAAC~~,~~SAAI~~,WAAU,~~0BACb~~;AAAA,~~kCAAC~~,~~SAAM~~,WAAU,~~gCAA~~+B;AAAA,~~cAChD~~,~~oBAAC~~,~~UAAO~~,~~WAAU~~,~~iCAChB~~,~~8BAAC~~,uBAAoB,~~GACvB~~;AAAA,~~eACF~~;AAAA,~~YACA~~,~~oBAAC~~,WAAQ,~~WAAU~~,~~yBACjB~~,8BAAC,~~WAAQ~~,~~WAAU~~,~~yBAAyB~~,~~UAAS~~,~~GACvD~~;AAAA;AAAA;AAAA,~~MACF~~;AAAA;AAAA,~~EACF~~;AAEJ;AAEO,SAAS,aAAa;~~AAAA~~,EAC3B;AAAA,~~EACA~~,~~GAAG~~;~~AACL~~,~~GAA8C~~;~~AAC5C~~,~~SACE~~,~~oBAAC~~,~~eAAY~~,~~WAAW~~,KAAK,~~sBAAsB~~,SAAS,~~GAAI~~,~~GAAG~~,~~OAAO~~;AAE9E;AAEO,SAAS,~~eAAe~~,EAAE,~~SAAS~~,~~GAA4B~~;AACpE,~~SAAO~~,~~oBAAC~~,~~UAAO~~,~~WAAU~~,~~wBAAwB~~,~~UAAS~~;AAC5D;AAEO,SAAS,~~gBAAgB~~,EAAE,~~SAAS~~,~~GAA4B~~;AACrE,~~SAAO~~,~~oBAAC~~,WAAS,~~UAAS~~;AAC5B","sourcesContent":["import \"~~./combobox.pcss~~\";\n\nimport clsx from \"clsx\";\nimport { ReactNode, useId, useState } from \"react\";\nimport {\n ~~Button,\n~~ ComboBox as AriaCombobox,\n ComboBoxProps as AriaComboboxProps,\n Input,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n Popover,\n ~~Header,\n~~ Section,\n} from \"react-aria-components\";\n\nimport ~~{ FormField } from~~ \"~~@sikt/sds-form~~\";\~~nimport { CaretCircleDownIcon } from \"@sikt/sds-icons\";\~~n\~~nexport~~ ~~interface ComboboxProps~~<T extends object>\n extends Omit<AriaComboboxProps<T>, \"children\" \| \"menuTrigger\"> {\n children: React.ReactNode \| ((item: T) => React.ReactNode);\n ~~label: string;\n~~ className?: string;\n errorText?: string;\n helpText?: string;\n menuTrigger?: \"focus\" \| \"manual\" \| \"input\";\n}\n\nexport function Combobox<T extends object>({\n children,\n className,\n errorText,\n helpText,\n label,\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 {...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"]}
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"]}

package/package.json CHANGED Viewed

@@ -1,11 +1,17 @@
 {
   "name": "@sikt/sds-combobox",
-  "version": "1.0.1",
+  "version": "2.0.1",
   "license": "UNLICENSED",
+  "homepage": "https://designsystem.sikt.no/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.sikt.no/designsystem/sds-komponentbibliotek.git"
+  },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "exports": {
     ".": {
+      "style": "./dist/index.css",
       "import": {
         "types": "./dist/index.d.mts",
         "default": "./dist/index.mjs"
@@ -13,8 +19,7 @@
       "require": {
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
-      },
-      "style": "./dist/index.css"
+      }
     },
     "./dist/*": "./dist/*"
   },
@@ -29,17 +34,16 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@sikt/sds-core": "^3.0.2",
-    "@sikt/sds-form": "^2.1.0",
-    "@sikt/sds-icons": "^1.2.0",
-    "@sikt/sds-tokens": "^1.0.1",
-    "react-aria-components": "^1.2.1"
+    "@sikt/sds-core": "^4.1.1",
+    "@sikt/sds-form": "^3.0.1",
+    "@sikt/sds-icons": "^2.0.2",
+    "react-aria-components": "^1.4.1"
   },
   "peerDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "clsx": "^1.0.0 || ^2.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^18.0.0 || ^19.0.0",
+    "clsx": "^2.1.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   }
 }