@sikt/sds-combobox 3.3.0 → 4.0.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 +14 -0
  2. package/README.md +27 -25
  3. package/dist/index.css +132 -56
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.d.mts +44 -30
  6. package/dist/index.d.ts +44 -30
  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 +5 -4
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
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
+ ## [4.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@3.3.0...@sikt/sds-combobox@4.0.0) (2026-01-21)
6
+
7
+ ### ⚠ BREAKING CHANGES
8
+
9
+ - **combobox:** add new combobox component with multiple option
10
+
11
+ #### Migration
12
+
13
+ Read API documentation in [README](./README.md), Storybook & [diff](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/80582a2f849f361d0d89e192af245d537f4440d6). GLHF!
14
+
15
+ ### Features
16
+
17
+ - **combobox:** add new combobox component with multiple option ([80582a2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/80582a2f849f361d0d89e192af245d537f4440d6))
18
+
5
19
  ## [3.3.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@3.2.1...@sikt/sds-combobox@3.3.0) (2026-01-14)
6
20
 
7
21
  ### Features
package/README.md CHANGED
@@ -3,49 +3,51 @@
3
3
  ## Consume
4
4
 
5
5
  ```sh
6
- npm i -s @sikt/sds-{combobox,form}
6
+ npm i -s @sikt/sds-{combobox,form,icons}
7
7
  ```
8
8
 
9
9
  ### React
10
10
 
11
- #### With dynamic content
11
+ This component is build on top of [u-elements](https://u-elements.github.io/u-elements/elements/u-combobox).
12
12
 
13
13
  ```js
14
- import { Combobox, ComboboxItem } from "@sikt/sds-combobox";
14
+ import { Combobox } from "@sikt/sds-combobox";
15
15
  import "@sikt/sds-form/dist/index.css";
16
+ import "@sikt/sds-icons/dist/index.css";
16
17
  import "@sikt/sds-combobox/dist/index.css";
17
18
 
18
19
  <Combobox
19
- label="..."
20
- defaultItems={[
21
- { title: "foo", id: 1 },
22
- { title: "baz", id: 2 },
23
- ]}
24
- >
25
- {(item) => <ComboboxItem>{item.title}</ComboboxItem>}
26
- </Combobox>;
20
+ label="Label"
21
+ onChange={() => {}}
22
+ options={[{ label: "Value 1", value: "1" }]}
23
+ />;
27
24
  ```
28
25
 
29
- #### With static content
26
+ i18n are set with the following props from [u-elements](https://u-elements.github.io/u-elements/elements/u-combobox#u-combobox):
30
27
 
31
- ```js
32
- <Combobox label="...">
33
- <ComboboxItem id="Foo">Foo</ComboboxItem>
34
- <ComboboxItem id="Baz">Baz</ComboboxItem>
35
- </Combobox>
36
- ```
37
-
38
- ### Additional information
39
-
40
- For any additional details, troubleshooting, or advanced features, please consult the React Aria ComboBox documentation.
28
+ - `data-sr-added="Added"` prefixes announcements about additions.
29
+ - `data-sr-removed="Removed"` prefixes announcements about removals.
30
+ - `data-sr-remove="Press to remove"` announces ability to remove.
31
+ - `data-sr-empty="No selected"` announces no selected items.
32
+ - `data-sr-found="Navigate left to find %d selected"` announces where to find amount of selected items.
33
+ - `data-sr-invalid="Invalid value"` announces if trying to select invalid value.
34
+ - `data-sr-of="of"` separates "number of total" in announcements.
35
+ - `data-sr-singular="%d hit"` announces single hit
36
+ - `data-sr-plural="%d hits"` announces multiple hits
37
+ - `data-sr-clear="Clear text"` announces clear button.
41
38
 
42
- [https://react-spectrum.adobe.com/react-aria/ComboBox.html](https://react-spectrum.adobe.com/react-aria/ComboBox.html)
43
-
44
- ### Stylesheets
39
+ ### Stylesheets & custom markup
45
40
 
46
41
  Import stylesheet:
47
42
 
48
43
  ```css
49
44
  @import url("@sikt/sds-form");
45
+ @import url("@sikt/sds-icons");
50
46
  @import url("@sikt/sds-combobox");
51
47
  ```
48
+
49
+ Create custom markup:
50
+
51
+ ```html
52
+ <!-- see html example in Storybook -->
53
+ ```
package/dist/index.css CHANGED
@@ -5,16 +5,72 @@
5
5
  --combobox-button-color: var(--sds-color-text-primary);
6
6
  --combobox-button-background-color: transparent;
7
7
  --combobox-padding: calc( var(--sds-space-padding-tiny) + var(--sds-space-padding-minimal) - var(--combobox-border-width) );
8
+ --combobox-icon-size: var(--sds-typography-fontsize-700);
9
+ }
10
+ .sds-combobox data {
11
+ --chip-border-color: var(--sds-color-interaction-primary-strong-default);
12
+ align-items: center;
13
+ border: var(--sds-space-border-weight-regular) solid var(--chip-border-color);
14
+ border-radius: var(--sds-space-border-radius-full);
15
+ cursor: pointer;
8
16
  display: inline-flex;
9
- flex-direction: column;
10
- width: 100%;
17
+ font-size: var(--sds-typography-body-l-fontsize);
18
+ font-weight: var(--sds-typography-body-l-fontweight);
19
+ gap: var(--sds-space-padding-minimal);
20
+ justify-content: center;
21
+ line-height: var(--sds-typography-body-l-lineheight);
22
+ padding: var(--sds-space-padding-minimal);
23
+ padding-left: var(--sds-space-padding-tiny);
24
+ margin: 0 var(--sds-space-padding-tiny) var(--sds-space-padding-tiny) 0;
11
25
  }
12
- .sds-combobox__combobox {
26
+ .sds-combobox data:focus {
27
+ outline: unset;
28
+ }
29
+ .sds-combobox data:focus-visible {
30
+ outline: var(--sds-focus-outline);
31
+ }
32
+ .sds-combobox data:hover,
33
+ .sds-combobox data:focus-visible {
34
+ --chip-border-color: var( --sds-color-interaction-primary-subtle-highlight );
35
+ }
36
+ .sds-combobox data:active {
37
+ --chip-border-color: var(--sds-color-interaction-primary-subtle-pressed);
38
+ }
39
+ .sds-combobox data::after {
13
40
  align-items: center;
41
+ background-color: var(--sds-color-text-primary);
42
+ content: "";
43
+ display: inline-block;
44
+ font-size: var(--combobox-icon-size);
45
+ justify-content: center;
46
+ -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z"/></svg>');
47
+ mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z"/></svg>');
48
+ -webkit-mask-position: center right;
49
+ mask-position: center right;
50
+ -webkit-mask-repeat: no-repeat;
51
+ mask-repeat: no-repeat;
52
+ -webkit-mask-size: var(--combobox-icon-size);
53
+ mask-size: var(--combobox-icon-size);
54
+ transform: rotateY(0deg) rotate(-45deg);
55
+ min-width: var(--combobox-icon-size);
56
+ min-height: var(--combobox-icon-size);
57
+ width: var(--combobox-icon-size);
58
+ height: var(--combobox-icon-size);
59
+ vertical-align: sub;
60
+ }
61
+ .sds-combobox__combobox {
14
62
  display: flex;
15
- position: relative;
63
+ flex-wrap: wrap;
64
+ pointer-events: none;
65
+ }
66
+ .sds-combobox__combobox:not([data-multiple]),
67
+ .sds-combobox__combobox[data-multiple=false] {
16
68
  }
17
- .sds-combobox__combobox-input {
69
+ .sds-combobox__combobox:not([data-multiple]) data,
70
+ .sds-combobox__combobox[data-multiple=false] data {
71
+ display: none;
72
+ }
73
+ .sds-combobox__input {
18
74
  -webkit-appearance: none;
19
75
  appearance: none;
20
76
  background-image: none;
@@ -22,25 +78,27 @@
22
78
  border: var(--combobox-border-width) solid var(--combobox-border-color);
23
79
  border-radius: var(--sds-space-border-radius-medium);
24
80
  color: var(--sds-color-text-primary);
25
- flex: 1;
81
+ display: flex;
26
82
  font-size: var(--sds-typography-body-default-fontsize);
27
83
  font-weight: var(--sds-typography-body-default-fontweight);
28
84
  line-height: var(--sds-typography-body-default-lineheight);
29
85
  padding: var(--combobox-padding);
86
+ padding-right: calc(var(--combobox-padding) + var(--combobox-icon-size) + var(--sds-space-padding-tiny));
87
+ pointer-events: auto;
88
+ width: 100%;
30
89
  }
31
- .sds-combobox__combobox-input:hover,
32
- .sds-combobox__combobox-input:focus-visible {
90
+ .sds-combobox__input:hover,
91
+ .sds-combobox__input:focus-visible {
33
92
  --combobox-border-color: var(--sds-color-layout-divider-strong);
34
93
  }
35
- .sds-combobox__combobox-input:active {
94
+ .sds-combobox__input:active {
36
95
  --combobox-border-color: var(--sds-color-layout-divider-strong);
37
96
  }
38
- .sds-combobox__combobox-input[data-focus-visible],
39
- .sds-combobox__combobox-input:focus-visible {
97
+ .sds-combobox__input:focus-visible {
40
98
  outline: var(--sds-focus-outline);
41
99
  outline-offset: 0;
42
100
  }
43
- .sds-combobox__combobox-input:disabled {
101
+ .sds-combobox__input:disabled {
44
102
  background:
45
103
  repeating-linear-gradient(
46
104
  -45deg,
@@ -50,73 +108,91 @@
50
108
  var(--sds-color-interaction-neutral-subtle-default) calc(var(--sds-base-size-s) * 2));
51
109
  cursor: not-allowed;
52
110
  }
53
- .sds-combobox__combobox-button {
54
- --combobox-button-font-size: var(--sds-typography-fontsize-700);
55
- --combobox-button-size: calc( var(--combobox-button-font-size) + calc(var(--sds-space-padding-minimal) * 2) );
111
+ .sds-combobox__button {
112
+ --button-border-radius: var(--sds-space-border-radius-minimal);
113
+ --button-padding: var(--sds-space-padding-minimal);
114
+ --button-width: calc( var(--combobox-icon-size) + var(--button-padding) + var(--combobox-border-width) );
56
115
  align-items: center;
57
- border: 0;
58
116
  background-color: var(--combobox-button-background-color);
59
- border-radius: var(--sds-space-border-radius-minimal);
117
+ border: 0 none;
118
+ border-radius: var(--button-border-radius);
60
119
  color: var(--combobox-button-color);
120
+ cursor: pointer;
121
+ font-size: var(--sds-typography-body-default-fontsize);
122
+ font-weight: var(--sds-typography-body-default-fontweight);
123
+ justify-content: center;
124
+ line-height: var(--sds-typography-body-default-lineheight);
125
+ gap: var(--button-padding);
126
+ padding: var(--button-padding) calc(var(--button-padding) + var(--button-padding));
127
+ }
128
+ del.sds-combobox__button {
129
+ pointer-events: auto;
130
+ }
131
+ .sds-combobox__button-icon {
132
+ align-items: center;
61
133
  display: flex;
62
- font-size: var(--combobox-button-font-size);
134
+ font-size: var(--combobox-icon-size);
63
135
  justify-content: center;
64
- padding: var(--sds-space-padding-minimal);
65
- position: absolute;
66
- right: var(--combobox-padding);
67
- width: var(--combobox-button-size);
68
- height: var(--combobox-button-size);
136
+ margin-right: calc(var(--button-padding) * -1);
137
+ margin-left: calc(var(--button-padding) * -1);
69
138
  }
70
- .sds-combobox__combobox-button:hover,
71
- .sds-combobox__combobox-button:focus-visible {
72
- --combobox-button-background-color: var( --sds-color-interaction-primary-transparent-highlight );
139
+ .sds-combobox__button:focus-visible {
140
+ outline: var(--sds-focus-outline);
73
141
  }
74
- .sds-combobox__listbox {
75
- display: block;
76
- width: unset;
77
- max-height: 15rem;
78
- min-height: unset;
79
- overflow: auto;
142
+ .sds-combobox__button:hover,
143
+ .sds-combobox__button:focus-visible {
144
+ background-color: var( --sds-color-interaction-primary-transparent-highlight );
80
145
  }
81
- .sds-combobox__popover {
82
- padding: var(--sds-space-padding-small);
83
- margin-top: var(--sds-space-gap-small);
84
- margin-bottom: var(--sds-space-gap-small);
146
+ .sds-combobox__button:active {
147
+ background-color: var( --sds-color-interaction-primary-transparent-pressed );
148
+ }
149
+ .sds-combobox__button {
150
+ align-self: center;
151
+ margin-left: calc(calc(var(--combobox-padding) + var(--button-width)) * -1);
152
+ }
153
+ .sds-combobox__button:not([hidden]) + .sds-combobox__button {
154
+ display: none;
155
+ }
156
+ .sds-combobox__datalist {
85
157
  background-color: var(--sds-color-layout-background-default);
86
158
  box-shadow: var(--sds-effect-shadow-elevated-default);
87
159
  border-radius: var(--sds-space-border-radius-medium);
88
- width: var(--trigger-width);
89
- }
90
- .sds-combobox__header {
91
- border-bottom: var(--sds-space-border-weight-thin) solid var(--sds-color-layout-divider-subtle);
92
- font-size: var(--sds-typography-editorial-headline-xxs-fontsize);
93
- font-weight: var(--sds-typography-editorial-headline-xxs-fontweight);
94
- line-height: var(--sds-typography-editorial-headline-xxs-lineheight);
160
+ inset: 100% 0 auto;
161
+ margin-top: var(--sds-space-gap-small);
162
+ margin-bottom: var(--sds-space-gap-small);
163
+ max-height: 15rem;
164
+ overflow-y: auto;
95
165
  padding: var(--sds-space-padding-small);
96
- margin: var(--sds-space-gap-tiny);
166
+ pointer-events: auto;
167
+ position: absolute;
168
+ z-index: var(--sds-base-zindex-modal);
169
+ }
170
+ .sds-combobox__datalist:has(.sds-combobox__datalist-option:not([aria-hidden=false])) {
171
+ display: none;
97
172
  }
98
- .sds-combobox__item {
173
+ .sds-combobox__datalist:not([hidden]):has(.sds-combobox__datalist-option:not([aria-hidden=true])) {
174
+ display: block;
175
+ }
176
+ .sds-combobox__datalist-option {
99
177
  padding: var(--sds-space-padding-small);
100
178
  margin: var(--sds-space-gap-tiny);
101
179
  border-radius: var(--sds-space-border-radius-medium);
102
180
  }
103
- .sds-combobox__item[data-focus-visible],
104
- .sds-combobox__item:focus-visible {
181
+ .sds-combobox__datalist-option:focus {
182
+ outline: unset;
183
+ }
184
+ .sds-combobox__datalist-option:focus-visible {
105
185
  outline: var(--sds-focus-outline);
106
186
  }
107
- .sds-combobox__item[data-hovered],
108
- .sds-combobox__item[data-focus-visible],
109
- .sds-combobox__item:hover,
110
- .sds-combobox__item:focus-visible {
187
+ .sds-combobox__datalist-option:hover,
188
+ .sds-combobox__datalist-option:focus-visible {
111
189
  background-color: var( --sds-color-interaction-primary-transparent-highlight );
112
190
  }
113
- .sds-combobox__item[data-pressed],
114
- .sds-combobox__item:active {
191
+ .sds-combobox__datalist-option:active {
115
192
  background-color: var( --sds-color-interaction-primary-transparent-pressed );
116
193
  }
117
- .sds-combobox__item[data-selected] {
118
- background-color: var(--sds-color-interaction-primary-strong-pressed);
119
- color: var(--sds-color-text-on-strong);
194
+ .sds-combobox__datalist-option[selected] {
195
+ background-color: var(--sds-color-interaction-primary-subtle-pressed);
120
196
  }
121
197
  .sds-combobox--invalid .sds-combobox__combobox {
122
198
  --combobox-border-color: var(--sds-color-interaction-danger-strong-default);
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-layout-divider-strong);\n --combobox-border-width: var(--sds-space-border-weight-regular);\n --combobox-button-color: var(--sds-color-text-primary);\n --combobox-button-background-color: transparent;\n --combobox-padding: calc(\n var(--sds-space-padding-tiny) + var(--sds-space-padding-minimal) -\n var(--combobox-border-width)\n );\n\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(--sds-color-layout-divider-strong);\n }\n\n .sds-combobox__combobox-input:active {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\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-layout-divider-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":[]}
1
+ {"version":3,"sources":["../src/combobox.pcss"],"sourcesContent":[".sds-combobox {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\n --combobox-border-width: var(--sds-space-border-weight-regular);\n --combobox-button-color: var(--sds-color-text-primary);\n --combobox-button-background-color: transparent;\n --combobox-padding: calc(\n var(--sds-space-padding-tiny) + var(--sds-space-padding-minimal) -\n var(--combobox-border-width)\n );\n --combobox-icon-size: var(--sds-typography-fontsize-700);\n}\n /* stylelint-disable selector-max-type */\n .sds-combobox data {\n --chip-border-color: var(--sds-color-interaction-primary-strong-default);\n\n align-items: center;\n border: var(--sds-space-border-weight-regular) solid\n var(--chip-border-color);\n border-radius: var(--sds-space-border-radius-full);\n cursor: pointer;\n display: inline-flex;\n font-size: var(--sds-typography-body-l-fontsize);\n font-weight: var(--sds-typography-body-l-fontweight);\n gap: var(--sds-space-padding-minimal);\n justify-content: center;\n line-height: var(--sds-typography-body-l-lineheight);\n padding: var(--sds-space-padding-minimal);\n padding-left: var(--sds-space-padding-tiny);\n margin: 0 var(--sds-space-padding-tiny) var(--sds-space-padding-tiny) 0;\n /* stylelint-enable selector-max-type */\n }\n .sds-combobox data:focus {\n outline: unset;\n }\n .sds-combobox data:focus-visible {\n outline: var(--sds-focus-outline);\n }\n .sds-combobox data:hover,\n .sds-combobox data:focus-visible {\n --chip-border-color: var(\n --sds-color-interaction-primary-subtle-highlight\n );\n }\n .sds-combobox data:active {\n --chip-border-color: var(--sds-color-interaction-primary-subtle-pressed);\n }\n .sds-combobox data::after {\n align-items: center;\n background-color: var(--sds-color-text-primary);\n content: \"\";\n display: inline-block;\n font-size: var(--combobox-icon-size);\n justify-content: center;\n -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z\"/></svg>');\n mask-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm48-88a8,8,0,0,1-8,8H136v32a8,8,0,0,1-16,0V136H88a8,8,0,0,1,0-16h32V88a8,8,0,0,1,16,0v32h32A8,8,0,0,1,176,128Z\"/></svg>');\n -webkit-mask-position: center right;\n mask-position: center right;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n -webkit-mask-size: var(--combobox-icon-size);\n mask-size: var(--combobox-icon-size);\n transform: rotateY(0deg) rotate(-45deg);\n min-width: var(--combobox-icon-size);\n min-height: var(--combobox-icon-size);\n width: var(--combobox-icon-size);\n height: var(--combobox-icon-size);\n vertical-align: sub;\n }\n /* INFO: override u-components styling for sds-chip */\n .sds-combobox__combobox {\n display: flex;\n flex-wrap: wrap;\n pointer-events: none;\n }\n .sds-combobox__combobox:not([data-multiple]),\n .sds-combobox__combobox[data-multiple=\"false\"] {\n /* INFO: override u-components styling */\n }\n /* stylelint-disable-next-line */\n .sds-combobox__combobox:not([data-multiple]) data, .sds-combobox__combobox[data-multiple=\"false\"] data {\n display: none;\n }\n .sds-combobox__input {\n -webkit-appearance: none;\n appearance: none;\n background-image: none;\n background-color: var(--sds-color-layout-background-default);\n border: var(--combobox-border-width) solid var(--combobox-border-color);\n border-radius: var(--sds-space-border-radius-medium);\n color: var(--sds-color-text-primary);\n display: flex;\n font-size: var(--sds-typography-body-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n line-height: var(--sds-typography-body-default-lineheight);\n padding: var(--combobox-padding);\n padding-right: calc(\n var(--combobox-padding) + var(--combobox-icon-size) +\n var(--sds-space-padding-tiny)\n );\n pointer-events: auto;\n width: 100%;\n }\n .sds-combobox__input:hover,\n .sds-combobox__input:focus-visible {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\n }\n .sds-combobox__input:active {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\n }\n .sds-combobox__input:focus-visible {\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n .sds-combobox__input:disabled {\n background: repeating-linear-gradient(\n -45deg,\n var(--sds-color-layout-background-default),\n var(--sds-color-layout-background-default) var(--sds-base-size-s),\n var(--sds-color-interaction-neutral-subtle-default)\n var(--sds-base-size-s),\n var(--sds-color-interaction-neutral-subtle-default)\n calc(var(--sds-base-size-s) * 2)\n );\n cursor: not-allowed;\n }\n .sds-combobox__button {\n --button-border-radius: var(--sds-space-border-radius-minimal);\n --button-padding: var(--sds-space-padding-minimal);\n --button-width: calc(\n var(--combobox-icon-size) + var(--button-padding) +\n var(--combobox-border-width)\n );\n\n align-items: center;\n background-color: var(--combobox-button-background-color);\n border: 0 none;\n border-radius: var(--button-border-radius);\n color: var(--combobox-button-color);\n cursor: pointer;\n font-size: var(--sds-typography-body-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n justify-content: center;\n line-height: var(--sds-typography-body-default-lineheight);\n gap: var(--button-padding);\n padding: var(--button-padding)\n calc(var(--button-padding) + var(--button-padding));\n\n /* INFO: override u-components styling */\n\n /*\n &:has(+ .sds-combobox__datalist:not([hidden])) {\n transform: rotateY(0deg) rotate(180deg);\n }\n */\n }\n /* stylelint-disable-next-line */\n del.sds-combobox__button {\n pointer-events: auto;\n }\n .sds-combobox__button-icon {\n align-items: center;\n display: flex;\n font-size: var(--combobox-icon-size);\n justify-content: center;\n margin-right: calc(var(--button-padding) * -1);\n margin-left: calc(var(--button-padding) * -1);\n }\n .sds-combobox__button:focus-visible {\n outline: var(--sds-focus-outline);\n }\n .sds-combobox__button:hover,\n .sds-combobox__button:focus-visible {\n background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n }\n .sds-combobox__button:active {\n background-color: var(\n --sds-color-interaction-primary-transparent-pressed\n );\n }\n .sds-combobox__button {\n\n align-self: center;\n margin-left: calc(calc(var(--combobox-padding) + var(--button-width)) * -1);\n}\n .sds-combobox__button:not([hidden]) + .sds-combobox__button {\n display: none;\n }\n .sds-combobox__datalist {\n background-color: var(--sds-color-layout-background-default);\n box-shadow: var(--sds-effect-shadow-elevated-default);\n border-radius: var(--sds-space-border-radius-medium);\n inset: 100% 0 auto;\n margin-top: var(--sds-space-gap-small);\n margin-bottom: var(--sds-space-gap-small);\n max-height: 15rem;\n overflow-y: auto;\n padding: var(--sds-space-padding-small);\n pointer-events: auto;\n position: absolute;\n z-index: var(--sds-base-zindex-modal);\n }\n .sds-combobox__datalist:has(.sds-combobox__datalist-option:not([aria-hidden=\"false\"])) {\n display: none;\n }\n .sds-combobox__datalist:not([hidden]):has(.sds-combobox__datalist-option:not([aria-hidden=\"true\"])) {\n display: block;\n }\n .sds-combobox__datalist-option {\n padding: var(--sds-space-padding-small);\n margin: var(--sds-space-gap-tiny);\n border-radius: var(--sds-space-border-radius-medium);\n }\n .sds-combobox__datalist-option:focus {\n outline: unset;\n }\n .sds-combobox__datalist-option:focus-visible {\n outline: var(--sds-focus-outline);\n }\n .sds-combobox__datalist-option:hover,\n .sds-combobox__datalist-option:focus-visible {\n background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n }\n .sds-combobox__datalist-option:active {\n background-color: var(\n --sds-color-interaction-primary-transparent-pressed\n );\n }\n .sds-combobox__datalist-option[selected] {\n background-color: var(--sds-color-interaction-primary-subtle-pressed);\n }\n .sds-combobox--invalid .sds-combobox__combobox {\n --combobox-border-color: var(--sds-color-interaction-danger-strong-default);\n --combobox-button-color: var(--sds-color-text-on-strong);\n --combobox-button-background-color: var(\n --sds-color-interaction-danger-strong-default\n );\n }\n .sds-combobox--invalid .sds-combobox__combobox:hover,\n .sds-combobox--invalid .sds-combobox__combobox:focus-within {\n --combobox-border-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --combobox-button-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n }\n .sds-combobox--invalid .sds-combobox__combobox:active {\n --combobox-border-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n --combobox-button-background-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n }\n .sds-combobox--invalid .sds-combobox__combobox-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
@@ -1,9 +1,8 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { ReactNode, InputHTMLAttributes } from 'react';
3
- import { ComboBoxProps, PopoverProps, ListBoxItemProps } from 'react-aria-components';
2
+ import { UHTMLComboboxElement } from '@u-elements/u-combobox';
3
+ import { HTMLAttributes, ReactNode, OptionHTMLAttributes, InputHTMLAttributes } from 'react';
4
4
 
5
- interface ComboboxBaseProps<T extends object> extends Omit<ComboBoxProps<T>, "children" | "menuTrigger" | "aria-label" | "aria-labelledby"> {
6
- children: ReactNode | ((item: T) => ReactNode);
5
+ interface ComboboxBaseProps extends Omit<HTMLAttributes<UHTMLComboboxElement>, "onChange"> {
7
6
  className?: string;
8
7
  /**
9
8
  * Text to show when the input is invalid to help the user enter correct value. This also sets `aria-invalid` & `aria-errormessage`.
@@ -13,11 +12,44 @@ interface ComboboxBaseProps<T extends object> extends Omit<ComboBoxProps<T>, "ch
13
12
  * Text to show to help the user enter correct value. It's a better pattern to have enough information in the `label`.
14
13
  */
15
14
  helpText?: ReactNode;
16
- menuTrigger?: "focus" | "manual" | "input";
17
- popoverProps?: PopoverProps;
15
+ /**
16
+ * A list of option objects:
17
+ * - **label** This attribute is text for the label indicating the meaning of the option.
18
+ * - **value** The content of this attribute represents the value to be submitted with the form, should this option be selected.
19
+ * - **selected** If present, this Boolean attribute indicates that the option is initially selected.
20
+ */
21
+ options: OptionHTMLAttributes<HTMLOptionElement>[];
22
+ /**
23
+ * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.
24
+ *
25
+ * @default undefined
26
+ */
27
+ multiple?: boolean;
28
+ /**
29
+ * Name of the form control. Submitted with the form as part of a name/value pair.
30
+ *
31
+ * @default undefined
32
+ */
33
+ name?: string;
34
+ /**
35
+ * Function when a user changes the selected option.
36
+ *
37
+ * @default undefined
38
+ */
39
+ onChange?: (event: CustomEvent<HTMLDataElement>, newValue: OptionHTMLAttributes<HTMLOptionElement>[]) => void;
18
40
  inputProps?: InputHTMLAttributes<HTMLInputElement>;
41
+ "data-sr-added"?: string;
42
+ "data-sr-removed"?: string;
43
+ "data-sr-remove"?: string;
44
+ "data-sr-empty"?: string;
45
+ "data-sr-found"?: string;
46
+ "data-sr-invalid"?: string;
47
+ "data-sr-of"?: string;
48
+ "data-sr-singular"?: string;
49
+ "data-sr-plural"?: string;
50
+ "data-sr-clear"?: string;
19
51
  }
20
- type ComboboxProps<T extends object> = ComboboxBaseProps<T> & ({
52
+ type ComboboxProps = ComboboxBaseProps & ({
21
53
  label: NonNullable<ReactNode>;
22
54
  "aria-labelledby"?: never;
23
55
  } | {
@@ -27,27 +59,9 @@ type ComboboxProps<T extends object> = ComboboxBaseProps<T> & ({
27
59
  */
28
60
  "aria-labelledby": string;
29
61
  });
30
- declare function Combobox<T extends object>({ children, className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, menuTrigger, popoverProps, inputProps, ...props }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
31
- declare namespace Combobox {
32
- var displayName: string;
33
- }
34
- declare function ComboboxItem({ className, ...props }: ListBoxItemProps & {
35
- className?: string;
36
- }): react_jsx_runtime.JSX.Element;
37
- declare namespace ComboboxItem {
38
- var displayName: string;
39
- }
40
- declare function ComboboxHeader({ children }: {
41
- children: ReactNode;
42
- }): react_jsx_runtime.JSX.Element;
43
- declare namespace ComboboxHeader {
44
- var displayName: string;
45
- }
46
- declare function ComboboxSection({ children }: {
47
- children: ReactNode;
48
- }): react_jsx_runtime.JSX.Element;
49
- declare namespace ComboboxSection {
50
- var displayName: string;
51
- }
62
+ declare const Combobox: {
63
+ ({ className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, multiple, options, name, onChange, inputProps, "data-sr-added": dataSrAdded, "data-sr-removed": dataSrRemoved, "data-sr-remove": dataSrRemove, "data-sr-empty": dataSrEmpty, "data-sr-found": dataSrFound, "data-sr-invalid": dataSrInvalid, "data-sr-of": dataSrOf, "data-sr-singular": dataSrSingular, "data-sr-plural": dataSrPlural, "data-sr-clear": dataSrClear, ...rest }: ComboboxProps): react_jsx_runtime.JSX.Element;
64
+ displayName: string;
65
+ };
52
66
 
53
- export { Combobox, ComboboxHeader, ComboboxItem, type ComboboxProps, ComboboxSection };
67
+ export { Combobox, type ComboboxProps };
package/dist/index.d.ts CHANGED
@@ -1,9 +1,8 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { ReactNode, InputHTMLAttributes } from 'react';
3
- import { ComboBoxProps, PopoverProps, ListBoxItemProps } from 'react-aria-components';
2
+ import { UHTMLComboboxElement } from '@u-elements/u-combobox';
3
+ import { HTMLAttributes, ReactNode, OptionHTMLAttributes, InputHTMLAttributes } from 'react';
4
4
 
5
- interface ComboboxBaseProps<T extends object> extends Omit<ComboBoxProps<T>, "children" | "menuTrigger" | "aria-label" | "aria-labelledby"> {
6
- children: ReactNode | ((item: T) => ReactNode);
5
+ interface ComboboxBaseProps extends Omit<HTMLAttributes<UHTMLComboboxElement>, "onChange"> {
7
6
  className?: string;
8
7
  /**
9
8
  * Text to show when the input is invalid to help the user enter correct value. This also sets `aria-invalid` & `aria-errormessage`.
@@ -13,11 +12,44 @@ interface ComboboxBaseProps<T extends object> extends Omit<ComboBoxProps<T>, "ch
13
12
  * Text to show to help the user enter correct value. It's a better pattern to have enough information in the `label`.
14
13
  */
15
14
  helpText?: ReactNode;
16
- menuTrigger?: "focus" | "manual" | "input";
17
- popoverProps?: PopoverProps;
15
+ /**
16
+ * A list of option objects:
17
+ * - **label** This attribute is text for the label indicating the meaning of the option.
18
+ * - **value** The content of this attribute represents the value to be submitted with the form, should this option be selected.
19
+ * - **selected** If present, this Boolean attribute indicates that the option is initially selected.
20
+ */
21
+ options: OptionHTMLAttributes<HTMLOptionElement>[];
22
+ /**
23
+ * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.
24
+ *
25
+ * @default undefined
26
+ */
27
+ multiple?: boolean;
28
+ /**
29
+ * Name of the form control. Submitted with the form as part of a name/value pair.
30
+ *
31
+ * @default undefined
32
+ */
33
+ name?: string;
34
+ /**
35
+ * Function when a user changes the selected option.
36
+ *
37
+ * @default undefined
38
+ */
39
+ onChange?: (event: CustomEvent<HTMLDataElement>, newValue: OptionHTMLAttributes<HTMLOptionElement>[]) => void;
18
40
  inputProps?: InputHTMLAttributes<HTMLInputElement>;
41
+ "data-sr-added"?: string;
42
+ "data-sr-removed"?: string;
43
+ "data-sr-remove"?: string;
44
+ "data-sr-empty"?: string;
45
+ "data-sr-found"?: string;
46
+ "data-sr-invalid"?: string;
47
+ "data-sr-of"?: string;
48
+ "data-sr-singular"?: string;
49
+ "data-sr-plural"?: string;
50
+ "data-sr-clear"?: string;
19
51
  }
20
- type ComboboxProps<T extends object> = ComboboxBaseProps<T> & ({
52
+ type ComboboxProps = ComboboxBaseProps & ({
21
53
  label: NonNullable<ReactNode>;
22
54
  "aria-labelledby"?: never;
23
55
  } | {
@@ -27,27 +59,9 @@ type ComboboxProps<T extends object> = ComboboxBaseProps<T> & ({
27
59
  */
28
60
  "aria-labelledby": string;
29
61
  });
30
- declare function Combobox<T extends object>({ children, className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, menuTrigger, popoverProps, inputProps, ...props }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
31
- declare namespace Combobox {
32
- var displayName: string;
33
- }
34
- declare function ComboboxItem({ className, ...props }: ListBoxItemProps & {
35
- className?: string;
36
- }): react_jsx_runtime.JSX.Element;
37
- declare namespace ComboboxItem {
38
- var displayName: string;
39
- }
40
- declare function ComboboxHeader({ children }: {
41
- children: ReactNode;
42
- }): react_jsx_runtime.JSX.Element;
43
- declare namespace ComboboxHeader {
44
- var displayName: string;
45
- }
46
- declare function ComboboxSection({ children }: {
47
- children: ReactNode;
48
- }): react_jsx_runtime.JSX.Element;
49
- declare namespace ComboboxSection {
50
- var displayName: string;
51
- }
62
+ declare const Combobox: {
63
+ ({ className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, multiple, options, name, onChange, inputProps, "data-sr-added": dataSrAdded, "data-sr-removed": dataSrRemoved, "data-sr-remove": dataSrRemove, "data-sr-empty": dataSrEmpty, "data-sr-found": dataSrFound, "data-sr-invalid": dataSrInvalid, "data-sr-of": dataSrOf, "data-sr-singular": dataSrSingular, "data-sr-plural": dataSrPlural, "data-sr-clear": dataSrClear, ...rest }: ComboboxProps): react_jsx_runtime.JSX.Element;
64
+ displayName: string;
65
+ };
52
66
 
53
- export { Combobox, ComboboxHeader, ComboboxItem, type ComboboxProps, ComboboxSection };
67
+ export { Combobox, type ComboboxProps };
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";var e=require("@sikt/sds-form"),o=require("@sikt/sds-icons"),r=require("clsx/lite"),s=require("react"),a=require("react-aria-components"),t=require("react/jsx-runtime"),i=Object.defineProperty,l=Object.defineProperties,c=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,m=(e,o,r)=>o in e?i(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)=>l(e,c(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},f=e=>{let o="";return"string"==typeof e?o=e:"number"==typeof e?o=e.toString():e instanceof Array?e.forEach(e=>{o+=f(e)}):s.isValidElement(e)&&(o+=f(e.props.children)),o};function h(i){var l=i,{children:c,className:n,errorText:b,helpText:x,label:m,"aria-labelledby":h,menuTrigger:j="focus",popoverProps:y,inputProps:v}=l,N=u(l,["children","className","errorText","helpText","label","aria-labelledby","menuTrigger","popoverProps","inputProps"]);const _=s.useId(),g="".concat(_,"-error-text"),O="".concat(_,"-help-text"),T=f(m),P=[b&&g,x&&O].filter(Boolean).join(" ")||void 0;return t.jsx(e.FormField,{className:r.clsx("sds-combobox",b&&"sds-combobox--invalid",n),label:m,errorText:b,errorTextId:g,helpText:x,helpTextId:O,htmlFor:_,children:t.jsxs(a.ComboBox,p(d({menuTrigger:j,id:_,"aria-label":T,"aria-labelledby":h},N),{children:[t.jsxs("div",{className:"sds-combobox__combobox",children:[t.jsx(a.Input,d({className:"sds-combobox__combobox-input","aria-describedby":P,"aria-invalid":Boolean(b),"aria-errormessage":b?g:void 0},v)),t.jsx(a.Button,{className:"sds-combobox__combobox-button",children:t.jsx(o.ExpandShowAltIcon,{})})]}),t.jsx(a.Popover,p(d({className:"sds-combobox__popover"},y),{children:t.jsx(a.ListBox,{className:"sds-combobox__listbox",children:c})}))]}))})}function j(e){var o=e,{className:s}=o,i=u(o,["className"]);return t.jsx(a.ListBoxItem,d({className:r.clsx("sds-combobox__item",s)},i))}function y({children:e}){return t.jsx(a.Header,{className:"sds-combobox__header",children:e})}function v({children:e}){return t.jsx(a.ListBoxSection,{children:e})}h.displayName="Combobox",j.displayName="ComboboxItem",y.displayName="ComboboxHeader",v.displayName="ComboboxSection",exports.Combobox=h,exports.ComboboxHeader=y,exports.ComboboxItem=j,exports.ComboboxSection=v;//# sourceMappingURL=index.js.map
1
+ "use strict";var e=require("@sikt/sds-core"),a=require("@sikt/sds-form"),r=require("@sikt/sds-icons"),s=require("clsx/lite"),t=require("react");require("@u-elements/u-combobox"),require("@u-elements/u-datalist");var l=require("react/jsx-runtime"),o=Object.defineProperty,d=Object.defineProperties,n=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable,b=(e,a,r)=>a in e?o(e,a,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[a]=r,m=(e,a)=>{for(var r in a||(a={}))c.call(a,r)&&b(e,r,a[r]);if(i)for(var r of i(a))u.call(a,r)&&b(e,r,a[r]);return e},x=(e,a)=>d(e,n(a)),p=o=>{var d=o,{className:n,errorText:b,helpText:p,label:v,"aria-labelledby":f,multiple:j=!1,options:h,name:y,onChange:_,inputProps:g,"data-sr-added":N="Lagt til","data-sr-removed":O="Fjernet","data-sr-remove":q="Trykk for å fjerne","data-sr-empty":C="Ingen valgte","data-sr-found":P="Naviger til venstre for å finne %d valgte","data-sr-invalid":T="Ugyldig verdi","data-sr-of":k="av","data-sr-singular":w="%d treff","data-sr-plural":I="%d treff","data-sr-clear":E="Fjern tekst"}=d,S=((e,a)=>{var r={};for(var s in e)c.call(e,s)&&a.indexOf(s)<0&&(r[s]=e[s]);if(null!=e&&i)for(var s of i(e))a.indexOf(s)<0&&u.call(e,s)&&(r[s]=e[s]);return r})(d,["className","errorText","helpText","label","aria-labelledby","multiple","options","name","onChange","inputProps","data-sr-added","data-sr-removed","data-sr-remove","data-sr-empty","data-sr-found","data-sr-invalid","data-sr-of","data-sr-singular","data-sr-plural","data-sr-clear"]);const L=t.useRef(null),F=t.useId(),D="".concat(F,"-error-text"),H="".concat(F,"-help-text"),R="".concat(F,"-list");return t.useEffect(()=>{var e;const a=e=>{e.preventDefault();const a=h.findIndex(a=>a.value===e.detail.value),r=h[a];e.detail.isConnected?r.selected=e.detail.isConnected:delete r.selected,null==_||_(e,h)};return null==(e=L.current)||e.addEventListener("comboboxafterselect",a),()=>{var e;null==(e=L.current)||e.removeEventListener("comboboxafterselect",a)}},[h,_]),l.jsxs("div",{className:s.clsx("sds-form-field",b&&"sds-form-field--error","sds-combobox",b&&"sds-combobox--invalid",n),children:[l.jsxs("div",{className:"sds-form-field__label-wrapper",children:[void 0!==v&&l.jsx(a.Label,{text:v,error:Boolean(b),htmlFor:F}),l.jsxs("u-combobox",x(m({className:"sds-combobox__combobox","data-multiple":j,ref:L,"data-sr-added":N,"data-sr-removed":O,"data-sr-remove":q,"data-sr-empty":C,"data-sr-found":P,"data-sr-invalid":T,"data-sr-of":k},S),{children:[h.filter(e=>e.selected).map(e=>{var a;return l.jsx("data",{value:e.value,children:e.label},null==(a=e.value)?void 0:a.toString())}),l.jsx("input",x(m({className:"sds-combobox__input",id:F,list:R},g),{"aria-labelledby":f})),l.jsxs("del",{className:"sds-combobox__button",children:[l.jsx(e.ScreenReaderOnly,{children:E}),l.jsx("span",{className:"sds-combobox__button-icon",children:l.jsx(r.CancelIcon,{})})]}),l.jsx("span",{className:"sds-combobox__button",children:l.jsx("span",{className:"sds-combobox__button-icon",children:l.jsx(r.ExpandShowAltIcon,{})})}),l.jsx("u-datalist",{className:"sds-combobox__datalist",id:R,"data-sr-singular":w,"data-sr-plural":I,children:h.map(e=>{var a;return l.jsx("u-option",{className:"sds-combobox__datalist-option",value:e.value,children:e.label},null==(a=e.value)?void 0:a.toString())})}),!!y&&l.jsx("select",{name:y,"aria-hidden":!0,hidden:!0})]}))]}),p&&l.jsx(a.HelpText,{id:H,children:p}),b&&l.jsx(a.HelpText,{id:D,error:!0,children:b})]})};p.displayName="Combobox",exports.Combobox=p;//# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../core/src/utils/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 { InputHTMLAttributes, 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 \"../../core/src/utils/reactNodeToString\";\n\ninterface ComboboxBaseProps<T extends object> extends Omit<\n AriaComboboxProps<T>,\n \"children\" | \"menuTrigger\" | \"aria-label\" | \"aria-labelledby\"\n> {\n children: ReactNode | ((item: T) => ReactNode);\n className?: string;\n /**\n * Text to show when the input is invalid to help the user enter correct value. This also sets `aria-invalid` & `aria-errormessage`.\n */\n errorText?: ReactNode;\n /**\n * Text to show to help the user enter correct value. It's a better pattern to have enough information in the `label`.\n */\n helpText?: ReactNode;\n menuTrigger?: \"focus\" | \"manual\" | \"input\";\n popoverProps?: PopoverProps;\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\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 /**\n * Id (or id's) that identifies the element (or elements) that labels the element it is applied to. For accessibility these should NOT be visually hidden.\n */\n \"aria-labelledby\": string;\n }\n );\n\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 inputProps,\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 {...inputProps}\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}\nCombobox.displayName = \"Combobox\";\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}\nComboboxItem.displayName = \"ComboboxItem\";\n\nexport function ComboboxHeader({ children }: { children: ReactNode }) {\n return <Header className=\"sds-combobox__header\">{children}</Header>;\n}\nComboboxHeader.displayName = \"ComboboxHeader\";\n\nexport function ComboboxSection({ children }: { children: ReactNode }) {\n return <ListBoxSection>{children}</ListBoxSection>;\n}\nComboboxSection.displayName = \"ComboboxSection\";\n"]}
1
+ {"version":3,"sources":["../src/Combobox.tsx"],"names":["useRef","useId","useEffect","_a","jsxs","clsx","jsx","Label","ScreenReaderOnly","CancelIcon","ExpandShowAltIcon","HelpText"],"mappings":"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","file":"index.js","sourcesContent":["import { ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Label, HelpText } from \"@sikt/sds-form\";\nimport { CancelIcon, ExpandShowAltIcon } from \"@sikt/sds-icons\";\nimport type { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { clsx } from \"clsx/lite\";\nimport {\n InputHTMLAttributes,\n HTMLAttributes,\n OptionHTMLAttributes,\n ReactNode,\n useEffect,\n useId,\n useRef,\n} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\n\nexport interface ComboboxBaseProps extends Omit<\n HTMLAttributes<UHTMLComboboxElement>,\n \"onChange\"\n> {\n className?: string;\n /**\n * Text to show when the input is invalid to help the user enter correct value. This also sets `aria-invalid` & `aria-errormessage`.\n */\n errorText?: ReactNode;\n /**\n * Text to show to help the user enter correct value. It's a better pattern to have enough information in the `label`.\n */\n helpText?: ReactNode;\n /**\n * A list of option objects:\n * - **label** This attribute is text for the label indicating the meaning of the option.\n * - **value** The content of this attribute represents the value to be submitted with the form, should this option be selected.\n * - **selected** If present, this Boolean attribute indicates that the option is initially selected.\n */\n options: OptionHTMLAttributes<HTMLOptionElement>[];\n /**\n * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.\n *\n * @default undefined\n */\n multiple?: boolean;\n /**\n * Name of the form control. Submitted with the form as part of a name/value pair.\n *\n * @default undefined\n */\n name?: string;\n /**\n * Function when a user changes the selected option.\n *\n * @default undefined\n */\n onChange?: (\n event: CustomEvent<HTMLDataElement>,\n newValue: OptionHTMLAttributes<HTMLOptionElement>[],\n ) => void;\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n \"data-sr-added\"?: string;\n \"data-sr-removed\"?: string;\n \"data-sr-remove\"?: string;\n \"data-sr-empty\"?: string;\n \"data-sr-found\"?: string;\n \"data-sr-invalid\"?: string;\n \"data-sr-of\"?: string;\n \"data-sr-singular\"?: string;\n \"data-sr-plural\"?: string;\n \"data-sr-clear\"?: string;\n}\n\nexport type ComboboxProps = ComboboxBaseProps &\n (\n | {\n label: NonNullable<ReactNode>;\n \"aria-labelledby\"?: never;\n }\n | {\n label?: never;\n /**\n * Id (or id's) that identifies the element (or elements) that labels the element it is applied to. For accessibility these should NOT be visually hidden.\n */\n \"aria-labelledby\": string;\n }\n );\n\nexport const Combobox = ({\n className,\n errorText,\n helpText,\n label,\n \"aria-labelledby\": ariaLabelledBy,\n multiple = false,\n options,\n name,\n onChange,\n inputProps,\n \"data-sr-added\": dataSrAdded = \"Lagt til\",\n \"data-sr-removed\": dataSrRemoved = \"Fjernet\",\n \"data-sr-remove\": dataSrRemove = \"Trykk for å fjerne\",\n \"data-sr-empty\": dataSrEmpty = \"Ingen valgte\",\n \"data-sr-found\": dataSrFound = \"Naviger til venstre for å finne %d valgte\",\n \"data-sr-invalid\": dataSrInvalid = \"Ugyldig verdi\",\n \"data-sr-of\": dataSrOf = \"av\",\n \"data-sr-singular\": dataSrSingular = \"%d treff\",\n \"data-sr-plural\": dataSrPlural = \"%d treff\",\n \"data-sr-clear\": dataSrClear = \"Fjern tekst\",\n ...rest\n}: ComboboxProps) => {\n const comboboxRef = useRef<UHTMLComboboxElement>(null);\n const id = useId();\n const errorTextId = `${id}-error-text`;\n const helpTextId = `${id}-help-text`;\n const listId = `${id}-list`;\n\n useEffect(() => {\n const handleOnChange = (e: CustomEvent<HTMLDataElement>) => {\n e.preventDefault();\n\n const index = options.findIndex((item) => item.value === e.detail.value);\n const newOption = options[index];\n if (e.detail.isConnected) {\n newOption.selected = e.detail.isConnected;\n } else {\n delete newOption.selected;\n }\n onChange?.(e, options);\n };\n\n comboboxRef.current?.addEventListener(\n \"comboboxafterselect\",\n handleOnChange,\n );\n return () => {\n comboboxRef.current?.removeEventListener(\n \"comboboxafterselect\",\n handleOnChange,\n );\n };\n }, [options, onChange]);\n\n return (\n <div\n className={clsx(\n \"sds-form-field\",\n errorText && \"sds-form-field--error\",\n \"sds-combobox\",\n errorText && \"sds-combobox--invalid\",\n className,\n )}\n >\n <div className=\"sds-form-field__label-wrapper\">\n {label !== undefined && (\n <Label text={label} error={Boolean(errorText)} htmlFor={id} />\n )}\n <u-combobox\n className=\"sds-combobox__combobox\"\n data-multiple={multiple}\n ref={comboboxRef}\n data-sr-added={dataSrAdded}\n data-sr-removed={dataSrRemoved}\n data-sr-remove={dataSrRemove}\n data-sr-empty={dataSrEmpty}\n data-sr-found={dataSrFound}\n data-sr-invalid={dataSrInvalid}\n data-sr-of={dataSrOf}\n {...rest}\n >\n {options\n .filter((option) => option.selected)\n .map((option) => (\n <data key={option.value?.toString()} value={option.value}>\n {option.label}\n </data>\n ))}\n <input\n className=\"sds-combobox__input\"\n id={id}\n list={listId}\n {...inputProps}\n aria-labelledby={ariaLabelledBy}\n />\n <del className=\"sds-combobox__button\">\n <ScreenReaderOnly>{dataSrClear}</ScreenReaderOnly>\n <span className=\"sds-combobox__button-icon\">\n <CancelIcon />\n </span>\n </del>\n <span className=\"sds-combobox__button\">\n <span className=\"sds-combobox__button-icon\">\n <ExpandShowAltIcon />\n </span>\n </span>\n <u-datalist\n className=\"sds-combobox__datalist\"\n id={listId}\n data-sr-singular={dataSrSingular}\n data-sr-plural={dataSrPlural}\n >\n {options.map((option) => (\n <u-option\n className=\"sds-combobox__datalist-option\"\n key={option.value?.toString()}\n value={option.value}\n >\n {option.label}\n </u-option>\n ))}\n </u-datalist>\n {!!name && <select name={name} aria-hidden hidden />}\n </u-combobox>\n </div>\n {helpText && <HelpText id={helpTextId}>{helpText}</HelpText>}\n {errorText && (\n <HelpText id={errorTextId} error>\n {errorText}\n </HelpText>\n )}\n </div>\n );\n};\n\nCombobox.displayName = \"Combobox\";\n"]}
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,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 x}from"react/jsx-runtime";var f=Object.defineProperty,u=Object.defineProperties,h=Object.getOwnPropertyDescriptors,y=Object.getOwnPropertySymbols,v=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable,_=(e,r,o)=>r in e?f(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,g=(e,r)=>{for(var o in r||(r={}))v.call(r,o)&&_(e,o,r[o]);if(y)for(var o of y(r))N.call(r,o)&&_(e,o,r[o]);return e},O=(e,r)=>u(e,h(r)),T=(e,r)=>{var o={};for(var a in e)v.call(e,a)&&r.indexOf(a)<0&&(o[a]=e[a]);if(null!=e&&y)for(var a of y(e))r.indexOf(a)<0&&N.call(e,a)&&(o[a]=e[a]);return o},P=e=>{let r="";return"string"==typeof e?r=e:"number"==typeof e?r=e.toString():e instanceof Array?e.forEach(e=>{r+=P(e)}):t(e)&&(r+=P(e.props.children)),r};function j(t){var b=t,{children:m,className:d,errorText:f,helpText:u,label:h,"aria-labelledby":y,menuTrigger:v="focus",popoverProps:N,inputProps:_}=b,j=T(b,["children","className","errorText","helpText","label","aria-labelledby","menuTrigger","popoverProps","inputProps"]);const w=a(),C="".concat(w,"-error-text"),I="".concat(w,"-help-text"),S=P(h),k=[f&&C,u&&I].filter(Boolean).join(" ")||void 0;return p(e,{className:o("sds-combobox",f&&"sds-combobox--invalid",d),label:h,errorText:f,errorTextId:C,helpText:u,helpTextId:I,htmlFor:w,children:x(l,O(g({menuTrigger:v,id:w,"aria-label":S,"aria-labelledby":y},j),{children:[x("div",{className:"sds-combobox__combobox",children:[p(i,g({className:"sds-combobox__combobox-input","aria-describedby":k,"aria-invalid":Boolean(f),"aria-errormessage":f?C:void 0},_)),p(s,{className:"sds-combobox__combobox-button",children:p(r,{})})]}),p(c,O(g({className:"sds-combobox__popover"},N),{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,g({className:o("sds-combobox__item",a)},t))}function C({children:e}){return p(m,{className:"sds-combobox__header",children:e})}function I({children:e}){return p(d,{children:e})}j.displayName="Combobox",w.displayName="ComboboxItem",C.displayName="ComboboxHeader",I.displayName="ComboboxSection";export{j as Combobox,C as ComboboxHeader,w as ComboboxItem,I as ComboboxSection};//# sourceMappingURL=index.mjs.map
1
+ import{ScreenReaderOnly as e}from"@sikt/sds-core";import{Label as a,HelpText as r}from"@sikt/sds-form";import{CancelIcon as t,ExpandShowAltIcon as o}from"@sikt/sds-icons";import{clsx as l}from"clsx/lite";import{useRef as s,useId as d,useEffect as n}from"react";import"@u-elements/u-combobox";import"@u-elements/u-datalist";import{jsxs as i,jsx as c}from"react/jsx-runtime";var m=Object.defineProperty,b=Object.defineProperties,u=Object.getOwnPropertyDescriptors,p=Object.getOwnPropertySymbols,f=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable,x=(e,a,r)=>a in e?m(e,a,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[a]=r,h=(e,a)=>{for(var r in a||(a={}))f.call(a,r)&&x(e,r,a[r]);if(p)for(var r of p(a))v.call(a,r)&&x(e,r,a[r]);return e},_=(e,a)=>b(e,u(a)),g=m=>{var b=m,{className:u,errorText:x,helpText:g,label:y,"aria-labelledby":N,multiple:O=!1,options:j,name:P,onChange:k,inputProps:w,"data-sr-added":C="Lagt til","data-sr-removed":T="Fjernet","data-sr-remove":E="Trykk for å fjerne","data-sr-empty":F="Ingen valgte","data-sr-found":I="Naviger til venstre for å finne %d valgte","data-sr-invalid":L="Ugyldig verdi","data-sr-of":S="av","data-sr-singular":D="%d treff","data-sr-plural":B="%d treff","data-sr-clear":U="Fjern tekst"}=b,q=((e,a)=>{var r={};for(var t in e)f.call(e,t)&&a.indexOf(t)<0&&(r[t]=e[t]);if(null!=e&&p)for(var t of p(e))a.indexOf(t)<0&&v.call(e,t)&&(r[t]=e[t]);return r})(b,["className","errorText","helpText","label","aria-labelledby","multiple","options","name","onChange","inputProps","data-sr-added","data-sr-removed","data-sr-remove","data-sr-empty","data-sr-found","data-sr-invalid","data-sr-of","data-sr-singular","data-sr-plural","data-sr-clear"]);const z=s(null),A=d(),G="".concat(A,"-error-text"),H="".concat(A,"-help-text"),J="".concat(A,"-list");return n(()=>{var e;const a=e=>{e.preventDefault();const a=j.findIndex(a=>a.value===e.detail.value),r=j[a];e.detail.isConnected?r.selected=e.detail.isConnected:delete r.selected,null==k||k(e,j)};return null==(e=z.current)||e.addEventListener("comboboxafterselect",a),()=>{var e;null==(e=z.current)||e.removeEventListener("comboboxafterselect",a)}},[j,k]),i("div",{className:l("sds-form-field",x&&"sds-form-field--error","sds-combobox",x&&"sds-combobox--invalid",u),children:[i("div",{className:"sds-form-field__label-wrapper",children:[void 0!==y&&c(a,{text:y,error:Boolean(x),htmlFor:A}),i("u-combobox",_(h({className:"sds-combobox__combobox","data-multiple":O,ref:z,"data-sr-added":C,"data-sr-removed":T,"data-sr-remove":E,"data-sr-empty":F,"data-sr-found":I,"data-sr-invalid":L,"data-sr-of":S},q),{children:[j.filter(e=>e.selected).map(e=>{var a;return c("data",{value:e.value,children:e.label},null==(a=e.value)?void 0:a.toString())}),c("input",_(h({className:"sds-combobox__input",id:A,list:J},w),{"aria-labelledby":N})),i("del",{className:"sds-combobox__button",children:[c(e,{children:U}),c("span",{className:"sds-combobox__button-icon",children:c(t,{})})]}),c("span",{className:"sds-combobox__button",children:c("span",{className:"sds-combobox__button-icon",children:c(o,{})})}),c("u-datalist",{className:"sds-combobox__datalist",id:J,"data-sr-singular":D,"data-sr-plural":B,children:j.map(e=>{var a;return c("u-option",{className:"sds-combobox__datalist-option",value:e.value,children:e.label},null==(a=e.value)?void 0:a.toString())})}),!!P&&c("select",{name:P,"aria-hidden":!0,hidden:!0})]}))]}),g&&c(r,{id:H,children:g}),x&&c(r,{id:G,error:!0,children:x})]})};g.displayName="Combobox";export{g as Combobox};//# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../core/src/utils/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 { InputHTMLAttributes, 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 \"../../core/src/utils/reactNodeToString\";\n\ninterface ComboboxBaseProps<T extends object> extends Omit<\n AriaComboboxProps<T>,\n \"children\" | \"menuTrigger\" | \"aria-label\" | \"aria-labelledby\"\n> {\n children: ReactNode | ((item: T) => ReactNode);\n className?: string;\n /**\n * Text to show when the input is invalid to help the user enter correct value. This also sets `aria-invalid` & `aria-errormessage`.\n */\n errorText?: ReactNode;\n /**\n * Text to show to help the user enter correct value. It's a better pattern to have enough information in the `label`.\n */\n helpText?: ReactNode;\n menuTrigger?: \"focus\" | \"manual\" | \"input\";\n popoverProps?: PopoverProps;\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\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 /**\n * Id (or id's) that identifies the element (or elements) that labels the element it is applied to. For accessibility these should NOT be visually hidden.\n */\n \"aria-labelledby\": string;\n }\n );\n\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 inputProps,\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 {...inputProps}\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}\nCombobox.displayName = \"Combobox\";\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}\nComboboxItem.displayName = \"ComboboxItem\";\n\nexport function ComboboxHeader({ children }: { children: ReactNode }) {\n return <Header className=\"sds-combobox__header\">{children}</Header>;\n}\nComboboxHeader.displayName = \"ComboboxHeader\";\n\nexport function ComboboxSection({ children }: { children: ReactNode }) {\n return <ListBoxSection>{children}</ListBoxSection>;\n}\nComboboxSection.displayName = \"ComboboxSection\";\n"]}
1
+ {"version":3,"sources":["../src/Combobox.tsx"],"names":["_a"],"mappings":"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","file":"index.mjs","sourcesContent":["import { ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { Label, HelpText } from \"@sikt/sds-form\";\nimport { CancelIcon, ExpandShowAltIcon } from \"@sikt/sds-icons\";\nimport type { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { clsx } from \"clsx/lite\";\nimport {\n InputHTMLAttributes,\n HTMLAttributes,\n OptionHTMLAttributes,\n ReactNode,\n useEffect,\n useId,\n useRef,\n} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\n\nexport interface ComboboxBaseProps extends Omit<\n HTMLAttributes<UHTMLComboboxElement>,\n \"onChange\"\n> {\n className?: string;\n /**\n * Text to show when the input is invalid to help the user enter correct value. This also sets `aria-invalid` & `aria-errormessage`.\n */\n errorText?: ReactNode;\n /**\n * Text to show to help the user enter correct value. It's a better pattern to have enough information in the `label`.\n */\n helpText?: ReactNode;\n /**\n * A list of option objects:\n * - **label** This attribute is text for the label indicating the meaning of the option.\n * - **value** The content of this attribute represents the value to be submitted with the form, should this option be selected.\n * - **selected** If present, this Boolean attribute indicates that the option is initially selected.\n */\n options: OptionHTMLAttributes<HTMLOptionElement>[];\n /**\n * Indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.\n *\n * @default undefined\n */\n multiple?: boolean;\n /**\n * Name of the form control. Submitted with the form as part of a name/value pair.\n *\n * @default undefined\n */\n name?: string;\n /**\n * Function when a user changes the selected option.\n *\n * @default undefined\n */\n onChange?: (\n event: CustomEvent<HTMLDataElement>,\n newValue: OptionHTMLAttributes<HTMLOptionElement>[],\n ) => void;\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n \"data-sr-added\"?: string;\n \"data-sr-removed\"?: string;\n \"data-sr-remove\"?: string;\n \"data-sr-empty\"?: string;\n \"data-sr-found\"?: string;\n \"data-sr-invalid\"?: string;\n \"data-sr-of\"?: string;\n \"data-sr-singular\"?: string;\n \"data-sr-plural\"?: string;\n \"data-sr-clear\"?: string;\n}\n\nexport type ComboboxProps = ComboboxBaseProps &\n (\n | {\n label: NonNullable<ReactNode>;\n \"aria-labelledby\"?: never;\n }\n | {\n label?: never;\n /**\n * Id (or id's) that identifies the element (or elements) that labels the element it is applied to. For accessibility these should NOT be visually hidden.\n */\n \"aria-labelledby\": string;\n }\n );\n\nexport const Combobox = ({\n className,\n errorText,\n helpText,\n label,\n \"aria-labelledby\": ariaLabelledBy,\n multiple = false,\n options,\n name,\n onChange,\n inputProps,\n \"data-sr-added\": dataSrAdded = \"Lagt til\",\n \"data-sr-removed\": dataSrRemoved = \"Fjernet\",\n \"data-sr-remove\": dataSrRemove = \"Trykk for å fjerne\",\n \"data-sr-empty\": dataSrEmpty = \"Ingen valgte\",\n \"data-sr-found\": dataSrFound = \"Naviger til venstre for å finne %d valgte\",\n \"data-sr-invalid\": dataSrInvalid = \"Ugyldig verdi\",\n \"data-sr-of\": dataSrOf = \"av\",\n \"data-sr-singular\": dataSrSingular = \"%d treff\",\n \"data-sr-plural\": dataSrPlural = \"%d treff\",\n \"data-sr-clear\": dataSrClear = \"Fjern tekst\",\n ...rest\n}: ComboboxProps) => {\n const comboboxRef = useRef<UHTMLComboboxElement>(null);\n const id = useId();\n const errorTextId = `${id}-error-text`;\n const helpTextId = `${id}-help-text`;\n const listId = `${id}-list`;\n\n useEffect(() => {\n const handleOnChange = (e: CustomEvent<HTMLDataElement>) => {\n e.preventDefault();\n\n const index = options.findIndex((item) => item.value === e.detail.value);\n const newOption = options[index];\n if (e.detail.isConnected) {\n newOption.selected = e.detail.isConnected;\n } else {\n delete newOption.selected;\n }\n onChange?.(e, options);\n };\n\n comboboxRef.current?.addEventListener(\n \"comboboxafterselect\",\n handleOnChange,\n );\n return () => {\n comboboxRef.current?.removeEventListener(\n \"comboboxafterselect\",\n handleOnChange,\n );\n };\n }, [options, onChange]);\n\n return (\n <div\n className={clsx(\n \"sds-form-field\",\n errorText && \"sds-form-field--error\",\n \"sds-combobox\",\n errorText && \"sds-combobox--invalid\",\n className,\n )}\n >\n <div className=\"sds-form-field__label-wrapper\">\n {label !== undefined && (\n <Label text={label} error={Boolean(errorText)} htmlFor={id} />\n )}\n <u-combobox\n className=\"sds-combobox__combobox\"\n data-multiple={multiple}\n ref={comboboxRef}\n data-sr-added={dataSrAdded}\n data-sr-removed={dataSrRemoved}\n data-sr-remove={dataSrRemove}\n data-sr-empty={dataSrEmpty}\n data-sr-found={dataSrFound}\n data-sr-invalid={dataSrInvalid}\n data-sr-of={dataSrOf}\n {...rest}\n >\n {options\n .filter((option) => option.selected)\n .map((option) => (\n <data key={option.value?.toString()} value={option.value}>\n {option.label}\n </data>\n ))}\n <input\n className=\"sds-combobox__input\"\n id={id}\n list={listId}\n {...inputProps}\n aria-labelledby={ariaLabelledBy}\n />\n <del className=\"sds-combobox__button\">\n <ScreenReaderOnly>{dataSrClear}</ScreenReaderOnly>\n <span className=\"sds-combobox__button-icon\">\n <CancelIcon />\n </span>\n </del>\n <span className=\"sds-combobox__button\">\n <span className=\"sds-combobox__button-icon\">\n <ExpandShowAltIcon />\n </span>\n </span>\n <u-datalist\n className=\"sds-combobox__datalist\"\n id={listId}\n data-sr-singular={dataSrSingular}\n data-sr-plural={dataSrPlural}\n >\n {options.map((option) => (\n <u-option\n className=\"sds-combobox__datalist-option\"\n key={option.value?.toString()}\n value={option.value}\n >\n {option.label}\n </u-option>\n ))}\n </u-datalist>\n {!!name && <select name={name} aria-hidden hidden />}\n </u-combobox>\n </div>\n {helpText && <HelpText id={helpTextId}>{helpText}</HelpText>}\n {errorText && (\n <HelpText id={errorTextId} error>\n {errorText}\n </HelpText>\n )}\n </div>\n );\n};\n\nCombobox.displayName = \"Combobox\";\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikt/sds-combobox",
3
- "version": "3.3.0",
3
+ "version": "4.0.0",
4
4
  "license": "UNLICENSED",
5
5
  "homepage": "https://designsystem.sikt.no/",
6
6
  "repository": {
@@ -35,9 +35,10 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@sikt/sds-core": "^4.6.0",
38
- "@sikt/sds-form": "^4.1.0",
39
- "@sikt/sds-icons": "^3.0.0",
40
- "react-aria-components": "^1.14.0"
38
+ "@sikt/sds-form": "^4.1.1",
39
+ "@sikt/sds-icons": "^3.2.0",
40
+ "@u-elements/u-combobox": "^1.0.5",
41
+ "@u-elements/u-datalist": "^1.0.14"
41
42
  },
42
43
  "peerDependencies": {
43
44
  "@types/react": "^18.0.0 || ^19.0.0",