@sikt/sds-combobox 3.0.0 → 3.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.
- package/CHANGELOG.md +17 -0
- package/README.md +4 -4
- package/dist/index.css +10 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -3
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,23 @@
|
|
|
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
|
+
## [3.1.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@3.0.1...@sikt/sds-combobox@3.1.0) (2025-09-01)
|
|
6
|
+
|
|
7
|
+
### Features
|
|
8
|
+
|
|
9
|
+
- **combobox:** add disabled style ([f53c6ae](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/f53c6aee752278439dd58558689fa4afcfb0c7e7))
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
- **deps:** update dependency react-aria-components to ^1.11.0 ([09d4b8f](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/09d4b8f01b36bcc26124710a4c2ca86be0c4abaf))
|
|
14
|
+
- **deps:** update dependency react-aria-components to ^1.12.1 ([62cc507](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/62cc5079bd51b3150b9cc635d20c09fe0c07ac0c))
|
|
15
|
+
|
|
16
|
+
## [3.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@3.0.0...@sikt/sds-combobox@3.0.1) (2025-07-09)
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
- **combobox:** fix broken version 3.0.0: replace outdated deps with internal code ([bb9827e](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/bb9827ef59cbe6c6e398c97f561cd62b9a58b16f))
|
|
21
|
+
|
|
5
22
|
## [3.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@2.2.1...@sikt/sds-combobox@3.0.0) (2025-06-25)
|
|
6
23
|
|
|
7
24
|
### ⚠ BREAKING CHANGES
|
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ npm i -s @sikt/sds-{combobox,form}
|
|
|
11
11
|
#### With dynamic content
|
|
12
12
|
|
|
13
13
|
```js
|
|
14
|
-
import { Combobox,
|
|
14
|
+
import { Combobox, ComboboxItem } from "@sikt/sds-combobox";
|
|
15
15
|
import "@sikt/sds-form/dist/index.css";
|
|
16
16
|
import "@sikt/sds-combobox/dist/index.css";
|
|
17
17
|
|
|
@@ -22,7 +22,7 @@ import "@sikt/sds-combobox/dist/index.css";
|
|
|
22
22
|
{ title: "baz", id: 2 },
|
|
23
23
|
]}
|
|
24
24
|
>
|
|
25
|
-
{(item) => <
|
|
25
|
+
{(item) => <ComboboxItem>{item.title}</ComboboxItem>}
|
|
26
26
|
</Combobox>;
|
|
27
27
|
```
|
|
28
28
|
|
|
@@ -30,8 +30,8 @@ import "@sikt/sds-combobox/dist/index.css";
|
|
|
30
30
|
|
|
31
31
|
```js
|
|
32
32
|
<Combobox label="...">
|
|
33
|
-
<
|
|
34
|
-
<
|
|
33
|
+
<ComboboxItem id="Foo">Foo</ComboboxItem>
|
|
34
|
+
<ComboboxItem id="Baz">Baz</ComboboxItem>
|
|
35
35
|
</Combobox>
|
|
36
36
|
```
|
|
37
37
|
|
package/dist/index.css
CHANGED
|
@@ -40,6 +40,16 @@
|
|
|
40
40
|
outline: var(--sds-focus-outline);
|
|
41
41
|
outline-offset: 0;
|
|
42
42
|
}
|
|
43
|
+
.sds-combobox__combobox-input:disabled {
|
|
44
|
+
background:
|
|
45
|
+
repeating-linear-gradient(
|
|
46
|
+
-45deg,
|
|
47
|
+
var(--sds-color-layout-background-default),
|
|
48
|
+
var(--sds-color-layout-background-default) var(--sds-base-size-s),
|
|
49
|
+
var(--sds-color-interaction-neutral-subtle-default) var(--sds-base-size-s),
|
|
50
|
+
var(--sds-color-interaction-neutral-subtle-default) calc(var(--sds-base-size-s) * 2));
|
|
51
|
+
cursor: not-allowed;
|
|
52
|
+
}
|
|
43
53
|
.sds-combobox__combobox-button {
|
|
44
54
|
--combobox-button-font-size: var(--sds-typography-fontsize-700);
|
|
45
55
|
--combobox-button-size: calc( var(--combobox-button-font-size) + calc(var(--sds-space-padding-minimal) * 2) );
|
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-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n line-height: var(--sds-typography-body-default-lineheight);\n padding: var(--combobox-padding);\n }\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-font-size: var(--sds-typography-fontsize-700);\n --combobox-button-size: calc(\n var(--combobox-button-font-size) +\n calc(var(--sds-space-padding-minimal) * 2)\n );\n\n align-items: 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 display: flex;\n font-size: var(--combobox-button-font-size);\n justify-content: center;\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 border-bottom: var(--sds-space-border-weight-thin) solid\n var(--sds-color-brand-neutral-subtle);\n font-size: var(--sds-typography-editorial-headline-xxs-fontsize);\n font-weight: var(--sds-typography-editorial-headline-xxs-fontweight);\n line-height: var(--sds-typography-editorial-headline-xxs-lineheight);\n padding: var(--sds-space-padding-small);\n margin: var(--sds-space-gap-tiny);\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,+BAA6B,IAAI;AACjC,0BAAwB,MACtB,IAAI,6BAA6B,EAC/B,KAAK,IAAI,6BAA6B,EAAE;AAG5C,eAAa;AACb,UAAQ;AACR,oBAAkB,IAAI;AACtB,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACjB,WAAS,IAAI;AACb,YAAU;AACV,SAAO,IAAI;AACX,SAAO,IAAI;AACX,UAAQ,IAAI;AACd;AAEF,CAtBC,6BAsB6B;AAC1B,CAvBH,6BAuBiC;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,iBAAe,IAAI,gCAAgC,MACjD,IAAI;AACN,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,WAAS,IAAI;AACb,UAAQ,IAAI;AACd;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,
|
|
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-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n line-height: var(--sds-typography-body-default-lineheight);\n padding: var(--combobox-padding);\n }\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-input:disabled {\n background: repeating-linear-gradient(\n -45deg,\n var(--sds-color-layout-background-default),\n var(--sds-color-layout-background-default) var(--sds-base-size-s),\n var(--sds-color-interaction-neutral-subtle-default)\n var(--sds-base-size-s),\n var(--sds-color-interaction-neutral-subtle-default)\n calc(var(--sds-base-size-s) * 2)\n );\n cursor: not-allowed;\n }\n\n .sds-combobox__combobox-button {\n --combobox-button-font-size: var(--sds-typography-fontsize-700);\n --combobox-button-size: calc(\n var(--combobox-button-font-size) +\n calc(var(--sds-space-padding-minimal) * 2)\n );\n\n align-items: 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 display: flex;\n font-size: var(--combobox-button-font-size);\n justify-content: center;\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 border-bottom: var(--sds-space-border-weight-thin) solid\n var(--sds-color-brand-neutral-subtle);\n font-size: var(--sds-typography-editorial-headline-xxs-fontsize);\n font-weight: var(--sds-typography-editorial-headline-xxs-fontweight);\n line-height: var(--sds-typography-editorial-headline-xxs-lineheight);\n padding: var(--sds-space-padding-small);\n margin: var(--sds-space-gap-tiny);\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":"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","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
|
|
|
3
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
|
-
children:
|
|
6
|
+
children: ReactNode | ((item: T) => ReactNode);
|
|
7
7
|
className?: string;
|
|
8
8
|
errorText?: ReactNode;
|
|
9
9
|
helpText?: ReactNode;
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
|
|
|
3
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
|
-
children:
|
|
6
|
+
children: ReactNode | ((item: T) => ReactNode);
|
|
7
7
|
className?: string;
|
|
8
8
|
errorText?: ReactNode;
|
|
9
9
|
helpText?: ReactNode;
|
package/dist/index.js
CHANGED
|
@@ -1 +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
|
|
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,i=Object.defineProperties,c=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,d=(e,r,o)=>r in e?l(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,m=(e,r)=>{for(var o in r||(r={}))b.call(r,o)&&d(e,o,r[o]);if(n)for(var o of n(r))x.call(r,o)&&d(e,o,r[o]);return e},p=(e,r)=>i(e,c(r)),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},f=e=>{let r="";return"string"==typeof e?r=e:"number"==typeof e?r=e.toString():e instanceof Array?e.forEach(e=>{r+=f(e)}):s.isValidElement(e)&&(r+=f(e.props.children)),r};exports.Combobox=function(l){var i=l,{children:c,className:n,errorText:b,helpText:x,label:d,"aria-labelledby":h,menuTrigger:j="focus",popoverProps:v}=i,y=u(i,["children","className","errorText","helpText","label","aria-labelledby","menuTrigger","popoverProps"]);const _=s.useId(),g="".concat(_,"-error-text"),N="".concat(_,"-help-text"),O=f(d),T=[b&&g,x&&N].filter(Boolean).join(" ")||void 0;return a.jsx(e.FormField,{className:o.clsx("sds-combobox",b&&"sds-combobox--invalid",n),label:d,errorText:b,errorTextId:g,helpText:x,helpTextId:N,htmlFor:_,children:a.jsxs(t.ComboBox,p(m({menuTrigger:j,id:_,"aria-label":O,"aria-labelledby":h},y),{children:[a.jsxs("div",{className:"sds-combobox__combobox",children:[a.jsx(t.Input,{className:"sds-combobox__combobox-input","aria-describedby":T,"aria-invalid":Boolean(b),"aria-errormessage":b?g:void 0}),a.jsx(t.Button,{className:"sds-combobox__combobox-button",children:a.jsx(r.ExpandShowAltIcon,{})})]}),a.jsx(t.Popover,p(m({className:"sds-combobox__popover"},v),{children:a.jsx(t.ListBox,{className:"sds-combobox__listbox",children:c})}))]}))})},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,m({className:o.clsx("sds-combobox__item",s)},l))},exports.ComboboxSection=function({children:e}){return a.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","jsx","FormField","clsx","jsxs","AriaCombobox","
|
|
1
|
+
{"version":3,"sources":["../src/reactNodeToString.ts","../src/Combobox.tsx"],"names":["isValidElement","useId","jsx","FormField","clsx","jsxs","AriaCombobox","Input","Button","ExpandShowAltIcon","Popover","ListBox","ListBoxItem","Header","ListBoxSection"],"mappings":"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","file":"index.js","sourcesContent":["import { isValidElement, ReactNode } from \"react\";\n\nexport const reactNodeToString = (reactNode: ReactNode): string => {\n let string = \"\";\n if (typeof reactNode === \"string\") {\n string = reactNode;\n } else if (typeof reactNode === \"number\") {\n string = reactNode.toString();\n } else if (reactNode instanceof Array) {\n reactNode.forEach((child) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n string += reactNodeToString(child);\n });\n } else if (isValidElement(reactNode)) {\n // @ts-expect-error is of type unknown\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n string += reactNodeToString(reactNode.props.children);\n }\n return string;\n};\n","import { FormField } from \"@sikt/sds-form\";\nimport { ExpandShowAltIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, useId } 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\";\nimport { reactNodeToString } from \"./reactNodeToString\";\n\ninterface ComboboxBaseProps<T extends object>\n extends Omit<\n AriaComboboxProps<T>,\n \"children\" | \"menuTrigger\" | \"aria-label\" | \"aria-labelledby\"\n > {\n children: ReactNode | ((item: T) => ReactNode);\n className?: string;\n errorText?: ReactNode;\n helpText?: ReactNode;\n menuTrigger?: \"focus\" | \"manual\" | \"input\";\n popoverProps?: PopoverProps;\n}\n\nexport type ComboboxProps<T extends object> = ComboboxBaseProps<T> &\n (\n | {\n label: NonNullable<ReactNode>;\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 errorTextId = `${id}-error-text`;\n const helpTextId = `${id}-help-text`;\n\n const ariaLabel = reactNodeToString(label);\n const ariaDescribedBy =\n [errorText && errorTextId, helpText && helpTextId]\n .filter(Boolean)\n .join(\" \") || undefined;\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 errorTextId={errorTextId}\n helpText={helpText}\n helpTextId={helpTextId}\n htmlFor={id}\n >\n <AriaCombobox\n menuTrigger={menuTrigger}\n id={id}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n {...props}\n >\n <div className=\"sds-combobox__combobox\">\n <Input\n className=\"sds-combobox__combobox-input\"\n aria-describedby={ariaDescribedBy}\n aria-invalid={Boolean(errorText)}\n aria-errormessage={errorText ? errorTextId : undefined}\n />\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 e}from"@sikt/sds-form";import{ExpandShowAltIcon as r}from"@sikt/sds-icons";import{clsx as o}from"clsx/lite";import{useId as a}from"react";import{ComboBox as l,Input as
|
|
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 a,isValidElement as t}from"react";import{ComboBox as l,Input as i,Button as s,Popover as c,ListBox as n,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,y=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable,g=(e,r,o)=>r in e?x(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,N=(e,r)=>{for(var o in r||(r={}))y.call(r,o)&&g(e,o,r[o]);if(v)for(var o of v(r))_.call(r,o)&&g(e,o,r[o]);return e},O=(e,r)=>u(e,h(r)),T=(e,r)=>{var o={};for(var a in e)y.call(e,a)&&r.indexOf(a)<0&&(o[a]=e[a]);if(null!=e&&v)for(var a of v(e))r.indexOf(a)<0&&_.call(e,a)&&(o[a]=e[a]);return o},j=e=>{let r="";return"string"==typeof e?r=e:"number"==typeof e?r=e.toString():e instanceof Array?e.forEach(e=>{r+=j(e)}):t(e)&&(r+=j(e.props.children)),r};function P(t){var b=t,{children:m,className:d,errorText:x,helpText:u,label:h,"aria-labelledby":v,menuTrigger:y="focus",popoverProps:_}=b,g=T(b,["children","className","errorText","helpText","label","aria-labelledby","menuTrigger","popoverProps"]);const P=a(),w="".concat(P,"-error-text"),I="".concat(P,"-help-text"),k=j(h),B=[x&&w,u&&I].filter(Boolean).join(" ")||void 0;return p(e,{className:o("sds-combobox",x&&"sds-combobox--invalid",d),label:h,errorText:x,errorTextId:w,helpText:u,helpTextId:I,htmlFor:P,children:f(l,O(N({menuTrigger:y,id:P,"aria-label":k,"aria-labelledby":v},g),{children:[f("div",{className:"sds-combobox__combobox",children:[p(i,{className:"sds-combobox__combobox-input","aria-describedby":B,"aria-invalid":Boolean(x),"aria-errormessage":x?w:void 0}),p(s,{className:"sds-combobox__combobox-button",children:p(r,{})})]}),p(c,O(N({className:"sds-combobox__popover"},_),{children:p(n,{className:"sds-combobox__listbox",children:m})}))]}))})}function w(e){var r=e,{className:a}=r,t=T(r,["className"]);return p(b,N({className:o("sds-combobox__item",a)},t))}function I({children:e}){return p(m,{className:"sds-combobox__header",children:e})}function k({children:e}){return p(d,{children:e})}export{P as Combobox,I as ComboboxHeader,w 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/reactNodeToString.ts","../src/Combobox.tsx"],"names":["AriaCombobox"],"mappings":"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","file":"index.mjs","sourcesContent":["import { isValidElement, ReactNode } from \"react\";\n\nexport const reactNodeToString = (reactNode: ReactNode): string => {\n let string = \"\";\n if (typeof reactNode === \"string\") {\n string = reactNode;\n } else if (typeof reactNode === \"number\") {\n string = reactNode.toString();\n } else if (reactNode instanceof Array) {\n reactNode.forEach((child) => {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n string += reactNodeToString(child);\n });\n } else if (isValidElement(reactNode)) {\n // @ts-expect-error is of type unknown\n // eslint-disable-next-line @typescript-eslint/no-unsafe-argument\n string += reactNodeToString(reactNode.props.children);\n }\n return string;\n};\n","import { FormField } from \"@sikt/sds-form\";\nimport { ExpandShowAltIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, useId } 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\";\nimport { reactNodeToString } from \"./reactNodeToString\";\n\ninterface ComboboxBaseProps<T extends object>\n extends Omit<\n AriaComboboxProps<T>,\n \"children\" | \"menuTrigger\" | \"aria-label\" | \"aria-labelledby\"\n > {\n children: ReactNode | ((item: T) => ReactNode);\n className?: string;\n errorText?: ReactNode;\n helpText?: ReactNode;\n menuTrigger?: \"focus\" | \"manual\" | \"input\";\n popoverProps?: PopoverProps;\n}\n\nexport type ComboboxProps<T extends object> = ComboboxBaseProps<T> &\n (\n | {\n label: NonNullable<ReactNode>;\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 errorTextId = `${id}-error-text`;\n const helpTextId = `${id}-help-text`;\n\n const ariaLabel = reactNodeToString(label);\n const ariaDescribedBy =\n [errorText && errorTextId, helpText && helpTextId]\n .filter(Boolean)\n .join(\" \") || undefined;\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 errorTextId={errorTextId}\n helpText={helpText}\n helpTextId={helpTextId}\n htmlFor={id}\n >\n <AriaCombobox\n menuTrigger={menuTrigger}\n id={id}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n {...props}\n >\n <div className=\"sds-combobox__combobox\">\n <Input\n className=\"sds-combobox__combobox-input\"\n aria-describedby={ariaDescribedBy}\n aria-invalid={Boolean(errorText)}\n aria-errormessage={errorText ? errorTextId : undefined}\n />\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": "3.
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"homepage": "https://designsystem.sikt.no/",
|
|
6
6
|
"repository": {
|
|
@@ -37,8 +37,7 @@
|
|
|
37
37
|
"@sikt/sds-core": "^4.6.0",
|
|
38
38
|
"@sikt/sds-form": "^4.0.1",
|
|
39
39
|
"@sikt/sds-icons": "^3.0.0",
|
|
40
|
-
"react-aria-components": "^1.
|
|
41
|
-
"react-node-to-string": "^0.1.2"
|
|
40
|
+
"react-aria-components": "^1.12.1"
|
|
42
41
|
},
|
|
43
42
|
"peerDependencies": {
|
|
44
43
|
"@types/react": "^18.0.0 || ^19.0.0",
|