@sikt/sds-combobox 2.0.0 → 2.1.0

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
  1. package/CHANGELOG.md +23 -0
  2. package/README.md +3 -5
  3. package/dist/index.css +6 -1
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.d.mts +3 -2
  6. package/dist/index.d.ts +3 -2
  7. package/dist/index.js +1 -1
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.mjs +1 -1
  10. package/dist/index.mjs.map +1 -1
  11. package/package.json +11 -12
package/CHANGELOG.md CHANGED
@@ -2,6 +2,29 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
4
4
 
5
+ ## [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)
6
+
7
+ ### Features
8
+
9
+ - allow sending props to internal Popover ([ecdde11](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/ecdde11b6162f2c142e195cb1fa87ae0b5e4a71e))
10
+
11
+ ### Bug Fixes
12
+
13
+ - **deps:** update @sikt/sds-core to 4.4.0 ([9dd6147](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/9dd6147cd902975653f03b29db9f580ec19c261c))
14
+ - **deps:** update @sikt/sds-form to 3.0.2 ([a6939a0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/a6939a0b59aed1f9ae0200aff61e67c0abd0cfb7))
15
+ - **deps:** update dependency react-aria-components to ^1.7.0 ([f6ba505](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/f6ba5057c7ff465f2b90368333b076b8642d1ccb))
16
+ - **form:** change text color on invalid state due to color contrast ([b84bf20](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/b84bf20c87bc0ab0995fccbdb65b98d85e741058))
17
+
18
+ ## [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)
19
+
20
+ ### Bug Fixes
21
+
22
+ - **deps:** correct deps on @sikt/sds-tokens ([b47f8a4](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/b47f8a4d27e99dcc731036ccf2b7b58a27d88da6))
23
+ - **deps:** peer deps react@19.0.0 ([17352e2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/17352e291153f79c66a9de317ca42820159aee8a))
24
+ - **deps:** update @sikt/sds-core@4.1.1 & @sikt/sds-icons@2.0.2 ([09e97cf](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/09e97cfe35780cc239ae2b7f55f4e793ec72e479))
25
+ - **deps:** update @sikt/sds-form@3.0.1 ([8edf559](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/8edf55939469d254e70c081c9e5153fc0b45b5f4))
26
+ - **deps:** update react-aria-components@1.4.1 ([14c37e7](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/14c37e72df0ae3bacf7b5a8bfa02db0dd5d077d0))
27
+
5
28
  ## [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)
6
29
 
7
30
  ### ⚠ BREAKING CHANGES
package/README.md CHANGED
@@ -3,7 +3,7 @@
3
3
  ## Consume
4
4
 
5
5
  ```sh
6
- npm i -s @sikt/sds-combobox
6
+ npm i -s @sikt/sds-{combobox,form}
7
7
  ```
8
8
 
9
9
  ### React
@@ -12,6 +12,7 @@ npm i -s @sikt/sds-combobox
12
12
 
13
13
  ```js
14
14
  import { Combobox, ComboBoxItem } from "@sikt/sds-combobox";
15
+ import "@sikt/sds-form/dist/index.css";
15
16
  import "@sikt/sds-combobox/dist/index.css";
16
17
 
17
18
  <Combobox
@@ -28,13 +29,10 @@ import "@sikt/sds-combobox/dist/index.css";
28
29
  #### With static content
29
30
 
30
31
  ```js
31
- import { Combobox, ComboBoxItem } from "@sikt/sds-combobox";
32
- import "@sikt/sds-combobox/dist/index.css";
33
-
34
32
  <Combobox label="...">
35
33
  <ComboBoxItem id="Foo">Foo</ComboBoxItem>
36
34
  <ComboBoxItem id="Baz">Baz</ComboBoxItem>
37
- </Combobox>;
35
+ </Combobox>
38
36
  ```
39
37
 
40
38
  ### Additional information
package/dist/index.css CHANGED
@@ -58,7 +58,7 @@
58
58
  }
59
59
  .sds-combobox__combobox-button:hover,
60
60
  .sds-combobox__combobox-button:focus-visible {
61
- background-color: var( --sds-color-interaction-primary-transparent-highlight );
61
+ --combobox-button-background-color: var( --sds-color-interaction-primary-transparent-highlight );
62
62
  }
63
63
  .sds-combobox__listbox {
64
64
  display: block;
@@ -120,4 +120,9 @@
120
120
  --combobox-border-color: var( --sds-color-interaction-danger-strong-pressed );
121
121
  --combobox-button-background-color: var( --sds-color-interaction-danger-strong-pressed );
122
122
  }
123
+ .sds-combobox--invalid .sds-combobox__combobox-button:hover,
124
+ .sds-combobox--invalid .sds-combobox__combobox-button:focus {
125
+ --combobox-border-color: var( --sds-color-interaction-danger-strong-highlight );
126
+ --combobox-button-background-color: var( --sds-color-interaction-danger-strong-highlight );
127
+ }
123
128
  /*# sourceMappingURL=index.css.map */
package/dist/index.css.map CHANGED
@@ -1 +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":[]}
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 --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 CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ReactNode } from 'react';
3
- import { ListBoxItemProps, ComboBoxProps } from 'react-aria-components';
3
+ import { ComboBoxProps, PopoverProps, ListBoxItemProps } from 'react-aria-components';
4
4
 
5
5
  interface ComboboxBaseProps<T extends object> extends Omit<ComboBoxProps<T>, "children" | "menuTrigger" | "aria-label" | "aria-labelledby"> {
6
6
  children: React.ReactNode | ((item: T) => React.ReactNode);
@@ -8,6 +8,7 @@ interface ComboboxBaseProps<T extends object> extends Omit<ComboBoxProps<T>, "ch
8
8
  errorText?: string;
9
9
  helpText?: string;
10
10
  menuTrigger?: "focus" | "manual" | "input";
11
+ popoverProps?: PopoverProps;
11
12
  }
12
13
  type ComboboxProps<T extends object> = ComboboxBaseProps<T> & ({
13
14
  label: string;
@@ -16,7 +17,7 @@ type ComboboxProps<T extends object> = ComboboxBaseProps<T> & ({
16
17
  label?: never;
17
18
  "aria-labelledby": string;
18
19
  });
19
- declare function Combobox<T extends object>({ children, className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, menuTrigger, ...props }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
20
+ declare function Combobox<T extends object>({ children, className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, menuTrigger, popoverProps, ...props }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
20
21
  declare function ComboboxItem({ className, ...props }: ListBoxItemProps & {
21
22
  className?: string;
22
23
  }): react_jsx_runtime.JSX.Element;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ReactNode } from 'react';
3
- import { ListBoxItemProps, ComboBoxProps } from 'react-aria-components';
3
+ import { ComboBoxProps, PopoverProps, ListBoxItemProps } from 'react-aria-components';
4
4
 
5
5
  interface ComboboxBaseProps<T extends object> extends Omit<ComboBoxProps<T>, "children" | "menuTrigger" | "aria-label" | "aria-labelledby"> {
6
6
  children: React.ReactNode | ((item: T) => React.ReactNode);
@@ -8,6 +8,7 @@ interface ComboboxBaseProps<T extends object> extends Omit<ComboBoxProps<T>, "ch
8
8
  errorText?: string;
9
9
  helpText?: string;
10
10
  menuTrigger?: "focus" | "manual" | "input";
11
+ popoverProps?: PopoverProps;
11
12
  }
12
13
  type ComboboxProps<T extends object> = ComboboxBaseProps<T> & ({
13
14
  label: string;
@@ -16,7 +17,7 @@ type ComboboxProps<T extends object> = ComboboxBaseProps<T> & ({
16
17
  label?: never;
17
18
  "aria-labelledby": string;
18
19
  });
19
- declare function Combobox<T extends object>({ children, className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, menuTrigger, ...props }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
20
+ declare function Combobox<T extends object>({ children, className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, menuTrigger, popoverProps, ...props }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
20
21
  declare function ComboboxItem({ className, ...props }: ListBoxItemProps & {
21
22
  className?: string;
22
23
  }): react_jsx_runtime.JSX.Element;
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";var e=require("@sikt/sds-form"),o=require("@sikt/sds-icons"),s=require("clsx/lite"),r=require("react"),c=require("react-aria-components"),t=require("react/jsx-runtime");exports.Combobox=function({children:i,className:l,errorText:a,helpText:n,label:x,"aria-labelledby":b,menuTrigger:m="focus",...d}){const u=r.useId(),h="".concat(u,"-help-text"),[p,_]=r.useState(!1);return t.jsx(e.FormField,{className:s.clsx("sds-combobox",a&&"sds-combobox--invalid",l),label:x,errorText:a,helpText:p?"":n,htmlFor:u,helpTextId:h,children:t.jsxs(c.ComboBox,{menuTrigger:m,onOpenChange:function(e){_(e)},id:u,"aria-label":x,"aria-labelledby":b,...d,children:[t.jsxs("div",{className:"sds-combobox__combobox",children:[t.jsx(c.Input,{className:"sds-combobox__combobox-input"}),t.jsx(c.Button,{className:"sds-combobox__combobox-button",children:t.jsx(o.CaretCircleDownIcon,{})})]}),t.jsx(c.Popover,{className:"sds-combobox__popover",children:t.jsx(c.ListBox,{className:"sds-combobox__listbox",children:i})})]})})},exports.ComboboxHeader=function({children:e}){return t.jsx(c.Header,{className:"sds-combobox__header",children:e})},exports.ComboboxItem=function({className:e,...o}){return t.jsx(c.ListBoxItem,{className:s.clsx("sds-combobox__item",e),...o})},exports.ComboboxSection=function({children:e}){return t.jsx(c.Section,{children:e})};//# sourceMappingURL=index.js.map
1
+ "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 CHANGED
@@ -1 +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":";;;;;;;;;;AA0CO,SAAS,QAA2B,CAAA;AAAA,EACzC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,iBAAmB,EAAA,cAAA;AAAA,EACnB,WAAc,GAAA,OAAA;AAAA,EACd,GAAG,KAAA;AACL,CAAqB,EAAA;AACnB,EAAA,MAAM,KAAKA,WAAM,EAAA,CAAA;AACjB,EAAM,MAAA,UAAA,GAAa,GAAG,MAAE,CAAA,EAAA,EAAA,YAAA,CAAA,CAAA;AACxB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAEtC,EAAA,SAAS,oBAAoB,MAAiB,EAAA;AAC5C,IAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAAA,GAChB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,cAAA;AAAA,QACA,SAAa,IAAA,uBAAA;AAAA,QACb,SAAA;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,kBAAAC,eAAA;AAAA,QAACC,4BAAA;AAAA,QAAA;AAAA,UACC,WAAA;AAAA,UACA,YAAc,EAAA,mBAAA;AAAA,UACd,EAAA;AAAA,UACA,YAAY,EAAA,KAAA;AAAA,UACZ,iBAAiB,EAAA,cAAA;AAAA,UAChB,GAAG,KAAA;AAAA,UAEJ,QAAA,EAAA;AAAA,4BAACD,eAAA,CAAA,KAAA,EAAA,EAAI,WAAU,wBACb,EAAA,QAAA,EAAA;AAAA,8BAACH,cAAA,CAAAK,yBAAA,EAAA,EAAM,WAAU,8BAA+B,EAAA,CAAA;AAAA,6CAC/CC,0BAAO,EAAA,EAAA,SAAA,EAAU,+BAChB,EAAA,QAAA,kBAAAN,cAAA,CAACO,gCAAoB,CACvB,EAAA,CAAA;AAAA,aACF,EAAA,CAAA;AAAA,4BACAP,cAAA,CAACQ,+BAAQ,SAAU,EAAA,uBAAA,EACjB,yCAACC,2BAAQ,EAAA,EAAA,SAAA,EAAU,uBAAyB,EAAA,QAAA,EAAS,CACvD,EAAA,CAAA;AAAA,WAAA;AAAA,SAAA;AAAA,OACF;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAA;AAEO,SAAS,YAAa,CAAA;AAAA,EAC3B,SAAA;AAAA,EACA,GAAG,KAAA;AACL,CAA8C,EAAA;AAC5C,EACE,uBAAAT,cAAA,CAACU,mCAAY,SAAW,EAAAR,SAAA,CAAK,sBAAsB,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA,CAAA,CAAA;AAE9E,CAAA;AAEO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAqC,EAAA;AACpE,EAAA,uBAAQF,cAAA,CAAAW,0BAAA,EAAA,EAAO,SAAU,EAAA,sBAAA,EAAwB,QAAS,EAAA,CAAA,CAAA;AAC5D,CAAA;AAEO,SAAS,eAAA,CAAgB,EAAE,QAAA,EAAqC,EAAA;AACrE,EAAO,uBAAAX,cAAA,CAACY,+BAAS,QAAS,EAAA,CAAA,CAAA;AAC5B","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"]}
1
+ {"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 CHANGED
@@ -1 +1 @@
1
- import{FormField as o}from"@sikt/sds-form";import{CaretCircleDownIcon as e}from"@sikt/sds-icons";import{clsx as r}from"clsx/lite";import{useId as s,useState as c}from"react";import{ComboBox as l,Input as m,Button as a,Popover as i,ListBox as n,ListBoxItem as t,Header as b,Section as d}from"react-aria-components";import{jsx as x,jsxs as h}from"react/jsx-runtime";function p({children:t,className:b,errorText:d,helpText:p,label:u,"aria-labelledby":_,menuTrigger:f="focus",...N}){const T=s(),g="".concat(T,"-help-text"),[v,k]=c(!1);return x(o,{className:r("sds-combobox",d&&"sds-combobox--invalid",b),label:u,errorText:d,helpText:v?"":p,htmlFor:T,helpTextId:g,children:h(l,{menuTrigger:f,onOpenChange:function(o){k(o)},id:T,"aria-label":u,"aria-labelledby":_,...N,children:[h("div",{className:"sds-combobox__combobox",children:[x(m,{className:"sds-combobox__combobox-input"}),x(a,{className:"sds-combobox__combobox-button",children:x(e,{})})]}),x(i,{className:"sds-combobox__popover",children:x(n,{className:"sds-combobox__listbox",children:t})})]})})}function u({className:o,...e}){return x(t,{className:r("sds-combobox__item",o),...e})}function _({children:o}){return x(b,{className:"sds-combobox__header",children:o})}function f({children:o}){return x(d,{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{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 CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Combobox.tsx"],"names":["AriaCombobox"],"mappings":";;;;;;;;AA0CO,SAAS,QAA2B,CAAA;AAAA,EACzC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,iBAAmB,EAAA,cAAA;AAAA,EACnB,WAAc,GAAA,OAAA;AAAA,EACd,GAAG,KAAA;AACL,CAAqB,EAAA;AACnB,EAAA,MAAM,KAAK,KAAM,EAAA,CAAA;AACjB,EAAM,MAAA,UAAA,GAAa,GAAG,MAAE,CAAA,EAAA,EAAA,YAAA,CAAA,CAAA;AACxB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAEtC,EAAA,SAAS,oBAAoB,MAAiB,EAAA;AAC5C,IAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAAA,GAChB;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,cAAA;AAAA,QACA,SAAa,IAAA,uBAAA;AAAA,QACb,SAAA;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,UACC,WAAA;AAAA,UACA,YAAc,EAAA,mBAAA;AAAA,UACd,EAAA;AAAA,UACA,YAAY,EAAA,KAAA;AAAA,UACZ,iBAAiB,EAAA,cAAA;AAAA,UAChB,GAAG,KAAA;AAAA,UAEJ,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,uBAAoB,CACvB,EAAA,CAAA;AAAA,aACF,EAAA,CAAA;AAAA,4BACA,GAAA,CAAC,WAAQ,SAAU,EAAA,uBAAA,EACjB,8BAAC,OAAQ,EAAA,EAAA,SAAA,EAAU,uBAAyB,EAAA,QAAA,EAAS,CACvD,EAAA,CAAA;AAAA,WAAA;AAAA,SAAA;AAAA,OACF;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAA;AAEO,SAAS,YAAa,CAAA;AAAA,EAC3B,SAAA;AAAA,EACA,GAAG,KAAA;AACL,CAA8C,EAAA;AAC5C,EACE,uBAAA,GAAA,CAAC,eAAY,SAAW,EAAA,IAAA,CAAK,sBAAsB,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA,CAAA,CAAA;AAE9E,CAAA;AAEO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAqC,EAAA;AACpE,EAAA,uBAAQ,GAAA,CAAA,MAAA,EAAA,EAAO,SAAU,EAAA,sBAAA,EAAwB,QAAS,EAAA,CAAA,CAAA;AAC5D,CAAA;AAEO,SAAS,eAAA,CAAgB,EAAE,QAAA,EAAqC,EAAA;AACrE,EAAO,uBAAA,GAAA,CAAC,WAAS,QAAS,EAAA,CAAA,CAAA;AAC5B","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"]}
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 { 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikt/sds-combobox",
3
- "version": "2.0.0",
3
+ "version": "2.1.0",
4
4
  "license": "UNLICENSED",
5
5
  "homepage": "https://designsystem.sikt.no/",
6
6
  "repository": {
@@ -11,6 +11,7 @@
11
11
  "module": "dist/index.mjs",
12
12
  "exports": {
13
13
  ".": {
14
+ "style": "./dist/index.css",
14
15
  "import": {
15
16
  "types": "./dist/index.d.mts",
16
17
  "default": "./dist/index.mjs"
@@ -18,8 +19,7 @@
18
19
  "require": {
19
20
  "types": "./dist/index.d.ts",
20
21
  "default": "./dist/index.js"
21
- },
22
- "style": "./dist/index.css"
22
+ }
23
23
  },
24
24
  "./dist/*": "./dist/*"
25
25
  },
@@ -34,17 +34,16 @@
34
34
  "build": "tsup"
35
35
  },
36
36
  "dependencies": {
37
- "@sikt/sds-core": "^3.0.2",
38
- "@sikt/sds-form": "^3.0.0",
39
- "@sikt/sds-icons": "^1.2.0",
40
- "@sikt/sds-tokens": "^1.0.1",
41
- "react-aria-components": "^1.3.3"
37
+ "@sikt/sds-core": "^4.4.0",
38
+ "@sikt/sds-form": "^3.0.2",
39
+ "@sikt/sds-icons": "^3.0.0",
40
+ "react-aria-components": "^1.7.0"
42
41
  },
43
42
  "peerDependencies": {
44
- "@types/react": "^18.0.0",
45
- "@types/react-dom": "^18.0.0",
43
+ "@types/react": "^18.0.0 || ^19.0.0",
44
+ "@types/react-dom": "^18.0.0 || ^19.0.0",
46
45
  "clsx": "^2.1.0",
47
- "react": "^18.0.0",
48
- "react-dom": "^18.0.0"
46
+ "react": "^18.0.0 || ^19.0.0",
47
+ "react-dom": "^18.0.0 || ^19.0.0"
49
48
  }
50
49
  }