@sikt/sds-combobox 5.2.1 → 5.3.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 +20 -0
- package/dist/index.css +13 -3
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +10 -14
- package/dist/index.d.ts +10 -14
- 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 +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,26 @@
|
|
|
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
|
+
## [5.3.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@5.2.2...@sikt/sds-combobox@5.3.0) (2026-05-28)
|
|
6
|
+
|
|
7
|
+
### Features
|
|
8
|
+
|
|
9
|
+
- **combobox:** add prop for hiding chips ([41bef25](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/41bef25bb25b58c9043e0cd4d00e8d76ec1964e2))
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
- select option styling ([c5150c5](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/c5150c5dc19d7c9228c692354a098c6fd34448a2))
|
|
14
|
+
|
|
15
|
+
## [5.2.2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@5.2.1...@sikt/sds-combobox@5.2.2) (2026-05-08)
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
- **combobox:** add key to option missing value ([0056cc2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/0056cc277f1249284229364a3464482e830aea09))
|
|
20
|
+
- **deps:** update dependency @u-elements/u-combobox to ^2.0.3 ([ab201aa](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/ab201aa1b058c3ecaa4f69475eb7862f9debce18))
|
|
21
|
+
- **deps:** update dependency @u-elements/u-combobox to ^2.0.4 ([db01cfd](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/db01cfd2d3ad98be75f26b8a4e3016fa9e51217c))
|
|
22
|
+
- **deps:** update dependency @u-elements/u-combobox to v2 ([a5eeb84](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/a5eeb847da4a1bedd4abbe90827b8a63df907a04))
|
|
23
|
+
- **deps:** update dependency @u-elements/u-datalist to v2 ([197f6ae](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/197f6aea05a04c3595ae92f959dbbb056c8135f0))
|
|
24
|
+
|
|
5
25
|
## [5.2.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@5.2.0...@sikt/sds-combobox@5.2.1) (2026-03-31)
|
|
6
26
|
|
|
7
27
|
### Bug Fixes
|
package/dist/index.css
CHANGED
|
@@ -60,6 +60,9 @@
|
|
|
60
60
|
height: var(--combobox-icon-size);
|
|
61
61
|
vertical-align: sub;
|
|
62
62
|
}
|
|
63
|
+
.sds-combobox data:has(.sds-combobox--no-chips) {
|
|
64
|
+
display: none;
|
|
65
|
+
}
|
|
63
66
|
.sds-combobox__combobox {
|
|
64
67
|
display: flex;
|
|
65
68
|
flex-wrap: wrap;
|
|
@@ -139,6 +142,7 @@ del.sds-combobox__button {
|
|
|
139
142
|
justify-content: center;
|
|
140
143
|
margin-right: calc(var(--button-padding) * -1);
|
|
141
144
|
margin-left: calc(var(--button-padding) * -1);
|
|
145
|
+
transition: rotate var(--sds-effect-animation-duration-medium) var(--sds-effect-animation-easing-default);
|
|
142
146
|
}
|
|
143
147
|
.sds-combobox__button:focus-visible {
|
|
144
148
|
--combobox-button-background-color: var( --sds-color-interaction-primary-transparent-highlight );
|
|
@@ -159,7 +163,11 @@ del.sds-combobox__button {
|
|
|
159
163
|
.sds-combobox__button:not([hidden]) + .sds-combobox__button {
|
|
160
164
|
display: none;
|
|
161
165
|
}
|
|
166
|
+
.sds-combobox:has(.sds-combobox__input[aria-expanded=true]) .sds-combobox__button-icon {
|
|
167
|
+
rotate: 180deg;
|
|
168
|
+
}
|
|
162
169
|
.sds-combobox__datalist {
|
|
170
|
+
--combobox-datalist-option-gap: var(--sds-space-padding-infinitesimal);
|
|
163
171
|
background-color: var(--sds-color-layout-background-default);
|
|
164
172
|
box-shadow: var(--sds-effect-shadow-elevated-default);
|
|
165
173
|
border-radius: var(--sds-space-border-radius-medium);
|
|
@@ -168,7 +176,7 @@ del.sds-combobox__button {
|
|
|
168
176
|
margin-bottom: var(--sds-space-gap-small);
|
|
169
177
|
max-height: 15rem;
|
|
170
178
|
overflow-y: auto;
|
|
171
|
-
padding: var(--sds-space-padding-
|
|
179
|
+
padding: var(--sds-space-padding-tiny);
|
|
172
180
|
pointer-events: auto;
|
|
173
181
|
position: absolute;
|
|
174
182
|
z-index: var(--sds-base-zindex-modal);
|
|
@@ -195,17 +203,19 @@ del.sds-combobox__button {
|
|
|
195
203
|
font-weight: var(--sds-typography-label-default-fontweight);
|
|
196
204
|
line-height: var(--sds-typography-label-default-lineheight);
|
|
197
205
|
padding: var(--sds-space-padding-small);
|
|
198
|
-
margin: var(--sds-space-gap-tiny);
|
|
199
206
|
pointer-events: none;
|
|
200
207
|
-webkit-user-select: none;
|
|
201
208
|
user-select: none;
|
|
202
209
|
border-bottom: var(--sds-space-border-weight-thin) solid var(--sds-color-brand-neutral-subtle);
|
|
210
|
+
margin-bottom: var(--combobox-datalist-option-gap);
|
|
203
211
|
}
|
|
204
212
|
.sds-combobox__datalist-option {
|
|
205
213
|
padding: var(--sds-space-padding-small);
|
|
206
|
-
margin: var(--sds-space-gap-tiny);
|
|
207
214
|
border-radius: var(--sds-space-border-radius-medium);
|
|
208
215
|
}
|
|
216
|
+
.sds-combobox__datalist-option + .sds-combobox__datalist-option {
|
|
217
|
+
margin-top: var(--combobox-datalist-option-gap);
|
|
218
|
+
}
|
|
209
219
|
.sds-combobox__datalist-option:focus {
|
|
210
220
|
outline: unset;
|
|
211
221
|
}
|
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 --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 --chip-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n\n outline: var(--sds-focus-outline);\n }\n @media (pointer: fine) {\n .sds-combobox data:hover {\n --chip-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n }\n .sds-combobox data:active {\n --chip-border-color: var(--sds-color-interaction-primary-strong-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:focus-visible {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\n\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n @media (pointer: fine) {\n .sds-combobox__input:hover {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\n }\n }\n .sds-combobox__input:active {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\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 --combobox-button-background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n\n outline: var(--sds-focus-outline);\n }\n @media (pointer: fine) {\n .sds-combobox__button:hover {\n --combobox-button-background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n }\n }\n .sds-combobox__button:active {\n --combobox-button-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 /* Hide the group when all its options are filtered out */\n .sds-combobox__datalist-group:not(:has(.sds-combobox__datalist-option:not([aria-hidden=\"true\"]))) {\n display: none;\n }\n /* Replicate shadow DOM ::slotted styles for options nested inside a group */\n .sds-combobox__datalist-group .sds-combobox__datalist-option {\n cursor: pointer;\n display: block;\n }\n .sds-combobox__datalist-group .sds-combobox__datalist-option[aria-hidden=\"true\"] {\n display: none !important;\n }\n .sds-combobox__datalist-group-label {\n display: block;\n font-size: var(--sds-typography-label-default-fontsize);\n font-weight: var(--sds-typography-label-default-fontweight);\n line-height: var(--sds-typography-label-default-lineheight);\n padding: var(--sds-space-padding-small);\n margin: var(--sds-space-gap-tiny);\n pointer-events: none;\n -webkit-user-select: none;\n user-select: none;\n border-bottom: var(--sds-space-border-weight-thin) solid\n var(--sds-color-brand-neutral-subtle);\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 background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n outline: var(--sds-focus-outline);\n }\n @media (pointer: fine) {\n .sds-combobox__datalist-option:hover {\n background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\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: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 @media (pointer: fine) {\n .sds-combobox--invalid .sds-combobox__combobox:hover {\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 .sds-combobox--invalid .sds-combobox__combobox .sds-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 @media (pointer: fine) {\n .sds-combobox--invalid .sds-combobox__combobox .sds-combobox__button:hover {\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"],"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 --chip-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n\n outline: var(--sds-focus-outline);\n }\n @media (pointer: fine) {\n .sds-combobox data:hover {\n --chip-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n }\n .sds-combobox data:active {\n --chip-border-color: var(--sds-color-interaction-primary-strong-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 .sds-combobox data:has(.sds-combobox--no-chips) {\n display: none;\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:focus-visible {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\n\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n @media (pointer: fine) {\n .sds-combobox__input:hover {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\n }\n }\n .sds-combobox__input:active {\n --combobox-border-color: var(--sds-color-layout-divider-strong);\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 transition: rotate var(--sds-effect-animation-duration-medium)\n var(--sds-effect-animation-easing-default);\n }\n .sds-combobox__button:focus-visible {\n --combobox-button-background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n\n outline: var(--sds-focus-outline);\n }\n @media (pointer: fine) {\n .sds-combobox__button:hover {\n --combobox-button-background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n }\n }\n .sds-combobox__button:active {\n --combobox-button-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:has(.sds-combobox__input[aria-expanded=\"true\"]) .sds-combobox__button-icon {\n rotate: 180deg;\n }\n .sds-combobox__datalist {\n --combobox-datalist-option-gap: var(--sds-space-padding-infinitesimal);\n\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-tiny);\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 /* Hide the group when all its options are filtered out */\n .sds-combobox__datalist-group:not(:has(.sds-combobox__datalist-option:not([aria-hidden=\"true\"]))) {\n display: none;\n }\n /* Replicate shadow DOM ::slotted styles for options nested inside a group */\n .sds-combobox__datalist-group .sds-combobox__datalist-option {\n cursor: pointer;\n display: block;\n }\n .sds-combobox__datalist-group .sds-combobox__datalist-option[aria-hidden=\"true\"] {\n display: none !important;\n }\n .sds-combobox__datalist-group-label {\n display: block;\n font-size: var(--sds-typography-label-default-fontsize);\n font-weight: var(--sds-typography-label-default-fontweight);\n line-height: var(--sds-typography-label-default-lineheight);\n padding: var(--sds-space-padding-small);\n pointer-events: none;\n -webkit-user-select: none;\n user-select: none;\n border-bottom: var(--sds-space-border-weight-thin) solid\n var(--sds-color-brand-neutral-subtle);\n margin-bottom: var(--combobox-datalist-option-gap);\n }\n .sds-combobox__datalist-option {\n padding: var(--sds-space-padding-small);\n border-radius: var(--sds-space-border-radius-medium);\n }\n .sds-combobox__datalist-option + .sds-combobox__datalist-option {\n margin-top: var(--combobox-datalist-option-gap);\n }\n .sds-combobox__datalist-option:focus {\n outline: unset;\n }\n .sds-combobox__datalist-option:focus-visible {\n background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n outline: var(--sds-focus-outline);\n }\n @media (pointer: fine) {\n .sds-combobox__datalist-option:hover {\n background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\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: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 @media (pointer: fine) {\n .sds-combobox--invalid .sds-combobox__combobox:hover {\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 .sds-combobox--invalid .sds-combobox__combobox .sds-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 @media (pointer: fine) {\n .sds-combobox--invalid .sds-combobox__combobox .sds-combobox__button:hover {\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"],"mappings":"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","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,22 +1,17 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
import { ReactNode, OptionHTMLAttributes, InputHTMLAttributes, HTMLAttributes } from 'react';
|
|
3
1
|
import { UHTMLComboboxElement } from '@u-elements/u-combobox';
|
|
2
|
+
import { OptionHTMLAttributes, OptgroupHTMLAttributes, ReactNode, InputHTMLAttributes, HTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
type OptionProps = OptionHTMLAttributes<HTMLOptionElement>;
|
|
5
|
+
|
|
6
|
+
interface ComboboxOptionGroupProps extends OptgroupHTMLAttributes<HTMLOptGroupElement> {
|
|
7
|
+
options: OptionProps[];
|
|
8
|
+
}
|
|
4
9
|
|
|
5
10
|
interface ComboboxItem {
|
|
6
11
|
label: string;
|
|
7
12
|
value: string;
|
|
8
13
|
}
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Label for the section heading.
|
|
12
|
-
*/
|
|
13
|
-
label: string;
|
|
14
|
-
/**
|
|
15
|
-
* Options within this section.
|
|
16
|
-
*/
|
|
17
|
-
options: OptionHTMLAttributes<HTMLOptionElement>[];
|
|
18
|
-
}
|
|
19
|
-
type ComboboxOption = OptionHTMLAttributes<HTMLOptionElement> | ComboboxOptionGroupProps;
|
|
14
|
+
type ComboboxOption = OptionProps | ComboboxOptionGroupProps;
|
|
20
15
|
type ComboboxValue<T extends {
|
|
21
16
|
multiple: boolean;
|
|
22
17
|
}> = T["multiple"] extends true ? (string | ComboboxItem)[] : string | ComboboxItem;
|
|
@@ -50,6 +45,7 @@ type ComboboxBaseProps = {
|
|
|
50
45
|
* @default "nb"
|
|
51
46
|
*/
|
|
52
47
|
lang?: "nb" | "nn" | "en";
|
|
48
|
+
noChips?: boolean;
|
|
53
49
|
} & Omit<HTMLAttributes<UHTMLComboboxElement>, "defaultValue" | "onChange"> & ({
|
|
54
50
|
label: NonNullable<ReactNode>;
|
|
55
51
|
"aria-labelledby"?: never;
|
|
@@ -95,6 +91,6 @@ type ComboboxMultipleProps = ComboboxBaseProps & ComboboxValueProps<{
|
|
|
95
91
|
multiple: true;
|
|
96
92
|
};
|
|
97
93
|
type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
|
|
98
|
-
declare const Combobox:
|
|
94
|
+
declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<UHTMLComboboxElement>>;
|
|
99
95
|
|
|
100
96
|
export { Combobox, type ComboboxItem, type ComboboxMultipleProps, type ComboboxOption, type ComboboxOptionGroupProps, type ComboboxProps, type ComboboxSingleProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,22 +1,17 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
import { ReactNode, OptionHTMLAttributes, InputHTMLAttributes, HTMLAttributes } from 'react';
|
|
3
1
|
import { UHTMLComboboxElement } from '@u-elements/u-combobox';
|
|
2
|
+
import { OptionHTMLAttributes, OptgroupHTMLAttributes, ReactNode, InputHTMLAttributes, HTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
type OptionProps = OptionHTMLAttributes<HTMLOptionElement>;
|
|
5
|
+
|
|
6
|
+
interface ComboboxOptionGroupProps extends OptgroupHTMLAttributes<HTMLOptGroupElement> {
|
|
7
|
+
options: OptionProps[];
|
|
8
|
+
}
|
|
4
9
|
|
|
5
10
|
interface ComboboxItem {
|
|
6
11
|
label: string;
|
|
7
12
|
value: string;
|
|
8
13
|
}
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Label for the section heading.
|
|
12
|
-
*/
|
|
13
|
-
label: string;
|
|
14
|
-
/**
|
|
15
|
-
* Options within this section.
|
|
16
|
-
*/
|
|
17
|
-
options: OptionHTMLAttributes<HTMLOptionElement>[];
|
|
18
|
-
}
|
|
19
|
-
type ComboboxOption = OptionHTMLAttributes<HTMLOptionElement> | ComboboxOptionGroupProps;
|
|
14
|
+
type ComboboxOption = OptionProps | ComboboxOptionGroupProps;
|
|
20
15
|
type ComboboxValue<T extends {
|
|
21
16
|
multiple: boolean;
|
|
22
17
|
}> = T["multiple"] extends true ? (string | ComboboxItem)[] : string | ComboboxItem;
|
|
@@ -50,6 +45,7 @@ type ComboboxBaseProps = {
|
|
|
50
45
|
* @default "nb"
|
|
51
46
|
*/
|
|
52
47
|
lang?: "nb" | "nn" | "en";
|
|
48
|
+
noChips?: boolean;
|
|
53
49
|
} & Omit<HTMLAttributes<UHTMLComboboxElement>, "defaultValue" | "onChange"> & ({
|
|
54
50
|
label: NonNullable<ReactNode>;
|
|
55
51
|
"aria-labelledby"?: never;
|
|
@@ -95,6 +91,6 @@ type ComboboxMultipleProps = ComboboxBaseProps & ComboboxValueProps<{
|
|
|
95
91
|
multiple: true;
|
|
96
92
|
};
|
|
97
93
|
type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
|
|
98
|
-
declare const Combobox:
|
|
94
|
+
declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<UHTMLComboboxElement>>;
|
|
99
95
|
|
|
100
96
|
export { Combobox, type ComboboxItem, type ComboboxMultipleProps, type ComboboxOption, type ComboboxOptionGroupProps, type ComboboxProps, type ComboboxSingleProps };
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("@sikt/sds-form"),r=require("clsx/lite"),a=require("react");require("@u-elements/u-combobox"),require("@u-elements/u-datalist");var t=require("@sikt/sds-core"),s=require("@sikt/sds-icons"),l=require("react/jsx-runtime"),n=Object.defineProperty,o=Object.defineProperties,d=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,u=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,p=(e,r,a)=>r in e?n(e,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[r]=a,b=(e,r)=>{for(var a in r||(r={}))u.call(r,a)&&p(e,a,r[a]);if(i)for(var a of i(r))c.call(r,a)&&p(e,a,r[a]);return e},f=(e,r)=>o(e,d(r)),v=(e,r)=>{var a={};for(var t in e)u.call(e,t)&&r.indexOf(t)<0&&(a[t]=e[t]);if(null!=e&&i)for(var t of i(e))r.indexOf(t)<0&&c.call(e,t)&&(a[t]=e[t]);return a},m=({clearText:e})=>l.jsxs("del",{suppressHydrationWarning:!0,className:"sds-combobox__button",children:[l.jsx(t.ScreenReaderOnly,{children:e}),l.jsx("span",{className:"sds-combobox__button-icon",children:l.jsx(s.CancelIcon,{})})]}),x=()=>l.jsx("span",{className:"sds-combobox__button",children:l.jsx("span",{className:"sds-combobox__button-icon",children:l.jsx(s.ExpandShowAltIcon,{})})}),g=e=>{var r=e,{label:a,value:t}=r,s=v(r,["label","value"]);return l.jsx("u-option",f(b({className:"sds-combobox__datalist-option",value:t,suppressHydrationWarning:!0},s),{children:a}))},j=({label:e,options:r})=>{const t=a.useId();return l.jsxs("div",{className:"sds-combobox__datalist-group",role:"group",children:[l.jsx("span",{className:"sds-combobox__datalist-group-label",id:t,children:e}),r.map(e=>{var r;return l.jsx(g,b({"aria-describedby":t,suppressHydrationWarning:!0},e),null==(r=e.value)?void 0:r.toString())})]})},y=e=>"options"in e&&Array.isArray(e.options),h=(e=[])=>null==e?[]:"string"==typeof e?[{label:e,value:e}]:Array.isArray(e)?e.map(e=>"string"==typeof e?{label:e,value:e}:e):[e];var _={nb:{"data-sr-added":"Lagt til","data-sr-removed":"Fjernet","data-sr-remove":"Trykk for å fjerne","data-sr-empty":"Ingen valgte","data-sr-found":"Naviger til venstre for å finne %d valgte","data-sr-invalid":"Ugyldig verdi","data-sr-of":"av","data-sr-singular":"%d treff","data-sr-plural":"%d treff","data-sr-clear":"Fjern tekst"},nn:{"data-sr-added":"Lagt til","data-sr-removed":"Fjerna","data-sr-remove":"Trykk for å fjerne","data-sr-empty":"Ingen valde","data-sr-found":"Naviger til venstre for å finne %d valde","data-sr-invalid":"Ugyldig verdi","data-sr-of":"av","data-sr-singular":"%d treff","data-sr-plural":"%d treff","data-sr-clear":"Fjern tekst"},en:{"data-sr-added":"Added","data-sr-removed":"Removed","data-sr-remove":"Press to remove","data-sr-empty":"No selected","data-sr-found":"Navigate left to find %d selected","data-sr-invalid":"Invalid value","data-sr-of":"of","data-sr-singular":"%d hit","data-sr-plural":"%d hits","data-sr-clear":"Clear text"}},N=a.forwardRef(function(t,s){var n=t,{className:o,errorText:d,helpText:i,label:u,"aria-labelledby":c,multiple:p=!1,options:N,name:
|
|
1
|
+
"use strict";var e=require("@sikt/sds-form"),r=require("clsx/lite"),a=require("react");require("@u-elements/u-combobox"),require("@u-elements/u-datalist");var t=require("@sikt/sds-core"),s=require("@sikt/sds-icons"),l=require("react/jsx-runtime"),n=Object.defineProperty,o=Object.defineProperties,d=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,u=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,p=(e,r,a)=>r in e?n(e,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[r]=a,b=(e,r)=>{for(var a in r||(r={}))u.call(r,a)&&p(e,a,r[a]);if(i)for(var a of i(r))c.call(r,a)&&p(e,a,r[a]);return e},f=(e,r)=>o(e,d(r)),v=(e,r)=>{var a={};for(var t in e)u.call(e,t)&&r.indexOf(t)<0&&(a[t]=e[t]);if(null!=e&&i)for(var t of i(e))r.indexOf(t)<0&&c.call(e,t)&&(a[t]=e[t]);return a},m=({clearText:e})=>l.jsxs("del",{suppressHydrationWarning:!0,className:"sds-combobox__button",children:[l.jsx(t.ScreenReaderOnly,{children:e}),l.jsx("span",{className:"sds-combobox__button-icon",children:l.jsx(s.CancelIcon,{})})]}),x=()=>l.jsx("span",{className:"sds-combobox__button",children:l.jsx("span",{className:"sds-combobox__button-icon",children:l.jsx(s.ExpandShowAltIcon,{})})}),g=e=>{var r=e,{label:a,value:t}=r,s=v(r,["label","value"]);return l.jsx("u-option",f(b({className:"sds-combobox__datalist-option",value:t,suppressHydrationWarning:!0},s),{children:a}))},j=({label:e,options:r})=>{const t=a.useId();return l.jsxs("div",{className:"sds-combobox__datalist-group",role:"group",children:[l.jsx("span",{className:"sds-combobox__datalist-group-label",id:t,children:e}),r.map(e=>{var r,a,s;return l.jsx(g,b({"aria-describedby":t,suppressHydrationWarning:!0},e),"".concat(null!=(s=null==(r=e.value)?void 0:r.toString())?s:null==(a=e.label)?void 0:a.toString()))})]})},y=e=>"options"in e&&Array.isArray(e.options),h=(e=[])=>null==e?[]:"string"==typeof e?[{label:e,value:e}]:Array.isArray(e)?e.map(e=>"string"==typeof e?{label:e,value:e}:e):[e];var _={nb:{"data-sr-added":"Lagt til","data-sr-removed":"Fjernet","data-sr-remove":"Trykk for å fjerne","data-sr-empty":"Ingen valgte","data-sr-found":"Naviger til venstre for å finne %d valgte","data-sr-invalid":"Ugyldig verdi","data-sr-of":"av","data-sr-singular":"%d treff","data-sr-plural":"%d treff","data-sr-clear":"Fjern tekst"},nn:{"data-sr-added":"Lagt til","data-sr-removed":"Fjerna","data-sr-remove":"Trykk for å fjerne","data-sr-empty":"Ingen valde","data-sr-found":"Naviger til venstre for å finne %d valde","data-sr-invalid":"Ugyldig verdi","data-sr-of":"av","data-sr-singular":"%d treff","data-sr-plural":"%d treff","data-sr-clear":"Fjern tekst"},en:{"data-sr-added":"Added","data-sr-removed":"Removed","data-sr-remove":"Press to remove","data-sr-empty":"No selected","data-sr-found":"Navigate left to find %d selected","data-sr-invalid":"Invalid value","data-sr-of":"of","data-sr-singular":"%d hit","data-sr-plural":"%d hits","data-sr-clear":"Clear text"}},N=a.forwardRef(function(t,s){var n=t,{className:o,errorText:d,helpText:i,label:u,"aria-labelledby":c,multiple:p=!1,options:N,name:S,inputProps:O,lang:C="nb",selected:H,defaultSelected:T,onSelectedChange:k,noChips:E}=n,W=v(n,["className","errorText","helpText","label","aria-labelledby","multiple","options","name","inputProps","lang","selected","defaultSelected","onSelectedChange","noChips"]);const q=a.useRef(null),I=a.useId(),P="".concat(I,"-error-text"),w="".concat(I,"-help-text"),A="".concat(I,"-list"),R=(e=>_[e])(C),F=void 0!==H,L=a.useRef(k),D=a.useRef([]),[U,B]=a.useState(!1),[M,z]=a.useState(()=>{const e=h(T);if(e.length>0)return e;var r;return(r=N,r.flatMap(e=>y(e)?e.options:[e])).filter(e=>e.selected).map(e=>{var r,a,t;return{label:null!=(a=null!=(r=e.label)?r:e.value)?a:"",value:null!=(t=e.value)?t:""}})}),G=H?h(H):M;return a.useEffect(()=>{D.current=G},[G]),a.useEffect(()=>{B(!0)},[]),a.useEffect(()=>{L.current=k},[k]),a.useEffect(()=>{s&&("function"==typeof s?s(q.current):s.current=q.current)},[s]),a.useEffect(()=>{const e=q.current,r=e=>{e.preventDefault();const r=function(e,r,a){const t={label:(s=e,(null==(l=s.textContent)?void 0:l.trim())||""),value:e.value};var s,l;return a?e.isConnected?h(r).filter(({value:e})=>e!==t.value):[...h(r),t]:e.isConnected?void 0:t}(e.detail,D.current,p);if(p){const e=L.current;null==e||e(r),F||z(r)}else{const e=L.current;null==e||e(null!=r?r:null),F||z(h(r))}};return null==e||e.addEventListener("comboboxbeforeselect",r),()=>null==e?void 0:e.removeEventListener("comboboxbeforeselect",r)},[F,p]),l.jsxs("div",{className:r.clsx("sds-form-field",d&&"sds-form-field--error","sds-combobox",E&&"sds-combobox--no-chips",d&&"sds-combobox--invalid",o),children:[l.jsxs("div",{className:"sds-form-field__label-wrapper",children:[void 0!==u&&l.jsx(e.Label,{text:u,error:Boolean(d),htmlFor:I}),l.jsxs("u-combobox",f(b(b({className:"sds-combobox__combobox","data-multiple":p,ref:q,suppressHydrationWarning:!0},R),W),{children:[G.map(e=>l.jsx("data",{value:e.value,suppressHydrationWarning:!0,children:e.label},e.value)),l.jsx("input",f(b({suppressHydrationWarning:!0,className:"sds-combobox__input"},O),{id:I,list:A,"aria-labelledby":c})),l.jsx(m,{clearText:R["data-sr-clear"]}),l.jsx(x,{}),l.jsx("u-datalist",{suppressHydrationWarning:!0,className:"sds-combobox__datalist",id:A,hidden:!0,"data-sr-singular":R["data-sr-singular"],"data-sr-plural":R["data-sr-plural"],children:N.map(e=>{var r,a,t;return y(e)?l.jsx(j,{label:e.label,options:e.options},e.label):l.jsx(g,b({suppressHydrationWarning:!0},e),"".concat(null!=(t=null==(r=e.value)?void 0:r.toString())?t:null==(a=e.label)?void 0:a.toString()))})}),!!S&&U&&l.jsx("select",{name:S,multiple:p,"aria-hidden":!0,hidden:!0,suppressHydrationWarning:!0})]}))]}),i&&l.jsx(e.HelpText,{id:w,children:i}),d&&l.jsx(e.HelpText,{id:P,error:!0,children:d})]})});N.displayName="Combobox",exports.Combobox=N;//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ClearButton.tsx","../src/ExpandButton.tsx","../src/Option.tsx","../src/OptionGroup.tsx","../src/utils.ts","../src/Combobox.tsx"],"names":["jsx","ScreenReaderOnly","CancelIcon","ExpandShowAltIcon","useId","jsxs","forwardRef","Combobox","useRef","useState","_a","_b","useEffect","clsx","Label","HelpText"],"mappings":"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","file":"index.js","sourcesContent":["import { ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { CancelIcon } from \"@sikt/sds-icons\";\n\ninterface ClearButtonProps {\n clearText: string;\n}\n\nexport const ClearButton = ({ clearText }: ClearButtonProps) => (\n <del suppressHydrationWarning className=\"sds-combobox__button\">\n <ScreenReaderOnly>{clearText}</ScreenReaderOnly>\n <span className=\"sds-combobox__button-icon\">\n <CancelIcon />\n </span>\n </del>\n);\n","import { ExpandShowAltIcon } from \"@sikt/sds-icons\";\n\nexport const ExpandButton = () => (\n <span className=\"sds-combobox__button\">\n <span className=\"sds-combobox__button-icon\">\n <ExpandShowAltIcon />\n </span>\n </span>\n);\n","import { OptionHTMLAttributes } from \"react\";\nimport \"@u-elements/u-datalist\";\n\nexport const Option = ({\n label,\n value,\n ...rest\n}: OptionHTMLAttributes<HTMLOptionElement>) => (\n <u-option\n className=\"sds-combobox__datalist-option\"\n value={value}\n suppressHydrationWarning\n {...rest}\n >\n {label}\n </u-option>\n);\n","import { useId } from \"react\";\nimport type { ComboboxOptionGroupProps } from \"./Combobox\";\nimport { Option } from \"./Option\";\n\nexport const OptionGroup = ({ label, options }: ComboboxOptionGroupProps) => {\n const id = useId();\n\n return (\n <div className=\"sds-combobox__datalist-group\" role=\"group\">\n <span className=\"sds-combobox__datalist-group-label\" id={id}>\n {label}\n </span>\n {options.map((option) => (\n <Option\n key={option.value?.toString()}\n aria-describedby={id}\n suppressHydrationWarning\n {...option}\n />\n ))}\n </div>\n );\n};\n","import type { OptionHTMLAttributes } from \"react\";\nimport type {\n ComboboxItem,\n ComboboxOption,\n ComboboxOptionGroupProps,\n ComboboxSelected,\n} from \"./Combobox\";\n\nexport const isOptionGroup = (\n item: ComboboxOption,\n): item is ComboboxOptionGroupProps =>\n \"options\" in item && Array.isArray(item.options);\n\nexport const flattenOptions = (\n items: ComboboxOption[],\n): OptionHTMLAttributes<HTMLOptionElement>[] =>\n items.flatMap((item) => (isOptionGroup(item) ? item.options : [item]));\n\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\nexport const text = (el: Element): string => el.textContent?.trim() || \"\";\n\n/**\n * Converts various input types to a consistent array of ComboboxItem objects.\n *\n * Handles different input formats:\n * - null/undefined → returns empty array []\n * - string → returns [{ label: string, value: string }]\n * - ComboboxItem → returns [ComboboxItem]\n * - array of strings/ComboboxItems → returns array of ComboboxItems\n *\n * This ensures the component always works with a predictable data structure.\n */\nexport const sanitizeItems = (\n values: ComboboxSelected | null | undefined = [],\n): ComboboxItem[] => {\n if (values == null) {\n return [];\n }\n\n if (typeof values === \"string\") {\n return [{ label: values, value: values }];\n }\n\n if (!Array.isArray(values)) {\n return [values];\n }\n\n return values.map(\n (value): ComboboxItem =>\n typeof value === \"string\" ? { label: value, value } : value,\n );\n};\n\n/**\n * Calculates the next selected items when user clicks on an option.\n *\n * For single selection: returns the clicked item or undefined\n * For multiple selection: adds/removes the clicked item from the current list\n */\nexport function nextItems(\n data: HTMLDataElement,\n prev?: ComboboxSelected,\n multiple?: boolean,\n): ComboboxItem | ComboboxItem[] | undefined {\n const item: ComboboxItem = { label: text(data), value: data.value };\n\n if (!multiple) {\n // Single selection: return item if selecting, undefined if deselecting\n return data.isConnected ? undefined : item;\n }\n\n // Multiple selection: add or remove item from list\n return data.isConnected\n ? sanitizeItems(prev).filter(({ value }) => value !== item.value) // Remove item\n : [...sanitizeItems(prev), item]; // Add item\n}\n\nexport const i18n = {\n nb: {\n \"data-sr-added\": \"Lagt til\",\n \"data-sr-removed\": \"Fjernet\",\n \"data-sr-remove\": \"Trykk for å fjerne\",\n \"data-sr-empty\": \"Ingen valgte\",\n \"data-sr-found\": \"Naviger til venstre for å finne %d valgte\",\n \"data-sr-invalid\": \"Ugyldig verdi\",\n \"data-sr-of\": \"av\",\n \"data-sr-singular\": \"%d treff\",\n \"data-sr-plural\": \"%d treff\",\n \"data-sr-clear\": \"Fjern tekst\",\n },\n nn: {\n \"data-sr-added\": \"Lagt til\",\n \"data-sr-removed\": \"Fjerna\",\n \"data-sr-remove\": \"Trykk for å fjerne\",\n \"data-sr-empty\": \"Ingen valde\",\n \"data-sr-found\": \"Naviger til venstre for å finne %d valde\",\n \"data-sr-invalid\": \"Ugyldig verdi\",\n \"data-sr-of\": \"av\",\n \"data-sr-singular\": \"%d treff\",\n \"data-sr-plural\": \"%d treff\",\n \"data-sr-clear\": \"Fjern tekst\",\n },\n en: {\n \"data-sr-added\": \"Added\",\n \"data-sr-removed\": \"Removed\",\n \"data-sr-remove\": \"Press to remove\",\n \"data-sr-empty\": \"No selected\",\n \"data-sr-found\": \"Navigate left to find %d selected\",\n \"data-sr-invalid\": \"Invalid value\",\n \"data-sr-of\": \"of\",\n \"data-sr-singular\": \"%d hit\",\n \"data-sr-plural\": \"%d hits\",\n \"data-sr-clear\": \"Clear text\",\n },\n};\n\nexport const getTextProps = (lang: keyof typeof i18n) => i18n[lang];\n","import { Label, HelpText } from \"@sikt/sds-form\";\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 useState,\n forwardRef,\n} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\nimport { ClearButton } from \"./ClearButton\";\nimport { ExpandButton } from \"./ExpandButton\";\nimport { Option } from \"./Option\";\nimport { OptionGroup } from \"./OptionGroup\";\nimport {\n isOptionGroup,\n flattenOptions,\n sanitizeItems,\n nextItems,\n getTextProps,\n} from \"./utils\";\n\nexport interface ComboboxItem {\n label: string;\n value: string;\n}\n\nexport interface ComboboxOptionGroupProps {\n /**\n * Label for the section heading.\n */\n label: string;\n /**\n * Options within this section.\n */\n options: OptionHTMLAttributes<HTMLOptionElement>[];\n}\n\nexport type ComboboxOption =\n | OptionHTMLAttributes<HTMLOptionElement>\n | ComboboxOptionGroupProps;\n\ntype ComboboxValue<T extends { multiple: boolean }> = T[\"multiple\"] extends true\n ? (string | ComboboxItem)[]\n : string | ComboboxItem;\n\ntype ComboboxBaseProps = {\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 or section objects containing grouped options:\n * - **label** Text for the option label or section heading.\n * - **value** The value submitted with the form (options only).\n * - **selected** Whether the option is initially selected (options only).\n */\n options: ComboboxOption[];\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 inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Sets language for accessible texts.\n *\n * @default \"nb\"\n */\n lang?: \"nb\" | \"nn\" | \"en\";\n} & Omit<HTMLAttributes<UHTMLComboboxElement>, \"defaultValue\" | \"onChange\"> &\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\ninterface ComboboxValueProps<T extends { multiple: boolean }> {\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 false\n */\n multiple?: T[\"multiple\"];\n /**\n * The selected item of the Combobox.\n *\n * If `label` and `value` are the same, each item can be a `string`. Otherwise, each item must be a `ComboboxItem`.\n *\n * Using this makes the component controlled and it must be used in combination with `onSelectedChange`.\n */\n selected?: ComboboxValue<T> | null;\n /**\n * Default selected item when uncontrolled\n */\n defaultSelected?: ComboboxValue<T>;\n /**\n * Callback when selected items changes\n */\n onSelectedChange?: (\n value: T[\"multiple\"] extends true ? ComboboxItem[] : ComboboxItem | null,\n ) => void;\n}\n\nexport type ComboboxSingleProps = ComboboxBaseProps &\n ComboboxValueProps<{ multiple: false }>;\n\nexport type ComboboxMultipleProps = ComboboxBaseProps &\n ComboboxValueProps<{ multiple: true }> & { multiple: true };\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;\n\nexport type ComboboxSelected =\n | string\n | ComboboxItem\n | (string | ComboboxItem)[]\n | null;\n\nexport const Combobox = forwardRef<UHTMLComboboxElement, ComboboxProps>(\n function Combobox(\n {\n className,\n errorText,\n helpText,\n label,\n \"aria-labelledby\": ariaLabelledBy,\n multiple = false,\n options,\n name,\n inputProps,\n lang = \"nb\",\n selected,\n defaultSelected,\n onSelectedChange,\n ...rest\n },\n ref,\n ) {\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 const textProps = getTextProps(lang);\n const isControlled = selected !== undefined;\n const onSelectedChangeRef = useRef(onSelectedChange);\n const selectedItemsRef = useRef<ComboboxItem[]>([]);\n const [isMounted, setIsMounted] = useState(false);\n\n const [defaultItems, setDefaultItems] = useState<ComboboxItem[]>(() => {\n // Priority: defaultSelected prop > selected options in options array\n const fromProp = sanitizeItems(defaultSelected);\n if (fromProp.length > 0) {\n return fromProp;\n }\n\n // Extract initially selected options from the options array\n const initiallySelectedFromOptions = flattenOptions(options)\n .filter((option) => option.selected)\n .map((option) => ({\n label: (option.label ?? option.value ?? \"\") as string,\n value: (option.value ?? \"\") as string,\n }));\n\n return initiallySelectedFromOptions;\n });\n\n const selectedItems = selected ? sanitizeItems(selected) : defaultItems;\n // Keep the ref updated with the latest callback\n useEffect(() => {\n selectedItemsRef.current = selectedItems;\n }, [selectedItems]);\n\n // Set mounted state after hydration\n useEffect(() => {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setIsMounted(true);\n }, []);\n\n useEffect(() => {\n onSelectedChangeRef.current = onSelectedChange;\n }, [onSelectedChange]);\n\n // Combine refs\n useEffect(() => {\n if (!ref) return;\n if (typeof ref === \"function\") {\n ref(comboboxRef.current);\n } else {\n ref.current = comboboxRef.current;\n }\n }, [ref]);\n\n /**\n * Listeners and handling of adding/removing\n */\n useEffect(() => {\n const combobox = comboboxRef.current;\n const beforeChange = (event: CustomEvent<HTMLDataElement>) => {\n event.preventDefault();\n const data = event.detail;\n\n const nextItem = nextItems(data, selectedItemsRef.current, multiple);\n\n if (multiple) {\n // Multiple selection: nextItem should be ComboboxItem[]\n const callback = onSelectedChangeRef.current as\n | ((value: ComboboxItem[]) => void)\n | undefined;\n callback?.(nextItem as ComboboxItem[]);\n if (!isControlled) setDefaultItems(nextItem as ComboboxItem[]);\n } else {\n // Single selection: nextItem should be ComboboxItem | undefined\n const callback = onSelectedChangeRef.current as\n | ((value: ComboboxItem | null) => void)\n | undefined;\n callback?.((nextItem as ComboboxItem | undefined) ?? null);\n if (!isControlled) setDefaultItems(sanitizeItems(nextItem));\n }\n };\n\n combobox?.addEventListener(\n \"comboboxbeforeselect\",\n beforeChange as EventListener,\n );\n return () =>\n combobox?.removeEventListener(\n \"comboboxbeforeselect\",\n beforeChange as EventListener,\n );\n }, [isControlled, multiple]);\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 suppressHydrationWarning\n {...textProps}\n {...rest}\n >\n {selectedItems.map((item) => (\n <data\n key={item.value}\n value={item.value}\n suppressHydrationWarning\n >\n {item.label}\n </data>\n ))}\n <input\n suppressHydrationWarning\n className=\"sds-combobox__input\"\n {...inputProps}\n id={id}\n list={listId}\n aria-labelledby={ariaLabelledBy}\n />\n <ClearButton clearText={textProps[\"data-sr-clear\"]} />\n <ExpandButton />\n <u-datalist\n suppressHydrationWarning\n className=\"sds-combobox__datalist\"\n id={listId}\n hidden\n data-sr-singular={textProps[\"data-sr-singular\"]}\n data-sr-plural={textProps[\"data-sr-plural\"]}\n >\n {options.map((option) =>\n isOptionGroup(option) ? (\n <OptionGroup\n key={option.label}\n label={option.label}\n options={option.options}\n />\n ) : (\n <Option\n suppressHydrationWarning\n key={option.value?.toString()}\n {...option}\n />\n ),\n )}\n </u-datalist>\n {!!name && isMounted && (\n <select\n name={name}\n multiple={multiple}\n aria-hidden\n hidden\n suppressHydrationWarning\n />\n )}\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);\n\nCombobox.displayName = \"Combobox\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/ClearButton.tsx","../src/ExpandButton.tsx","../src/Option.tsx","../src/OptionGroup.tsx","../src/utils.ts","../src/Combobox.tsx"],"names":["jsx","ScreenReaderOnly","CancelIcon","ExpandShowAltIcon","useId","jsxs","forwardRef","Combobox","useRef","useState","_a","_b","useEffect","clsx","Label","HelpText"],"mappings":"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","file":"index.js","sourcesContent":["import { ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { CancelIcon } from \"@sikt/sds-icons\";\n\ninterface ClearButtonProps {\n clearText: string;\n}\n\nexport const ClearButton = ({ clearText }: ClearButtonProps) => (\n <del suppressHydrationWarning className=\"sds-combobox__button\">\n <ScreenReaderOnly>{clearText}</ScreenReaderOnly>\n <span className=\"sds-combobox__button-icon\">\n <CancelIcon />\n </span>\n </del>\n);\n","import { ExpandShowAltIcon } from \"@sikt/sds-icons\";\n\nexport const ExpandButton = () => (\n <span className=\"sds-combobox__button\">\n <span className=\"sds-combobox__button-icon\">\n <ExpandShowAltIcon />\n </span>\n </span>\n);\n","import { OptionHTMLAttributes } from \"react\";\nimport \"@u-elements/u-datalist\";\n\nexport type OptionProps = OptionHTMLAttributes<HTMLOptionElement>;\n\nexport const Option = ({ label, value, ...rest }: OptionProps) => (\n <u-option\n className=\"sds-combobox__datalist-option\"\n value={value}\n suppressHydrationWarning\n {...rest}\n >\n {label}\n </u-option>\n);\n","import { OptgroupHTMLAttributes, useId } from \"react\";\nimport { Option, type OptionProps } from \"./Option\";\n\nexport interface ComboboxOptionGroupProps extends OptgroupHTMLAttributes<HTMLOptGroupElement> {\n options: OptionProps[];\n}\n\nexport const OptionGroup = ({ label, options }: ComboboxOptionGroupProps) => {\n const id = useId();\n\n return (\n <div className=\"sds-combobox__datalist-group\" role=\"group\">\n <span className=\"sds-combobox__datalist-group-label\" id={id}>\n {label}\n </span>\n {options.map((option) => (\n <Option\n key={`${option.value?.toString() ?? option.label?.toString()}`}\n aria-describedby={id}\n suppressHydrationWarning\n {...option}\n />\n ))}\n </div>\n );\n};\n","import type { OptionHTMLAttributes } from \"react\";\nimport type {\n ComboboxItem,\n ComboboxOption,\n ComboboxSelected,\n} from \"./Combobox\";\nimport type { ComboboxOptionGroupProps } from \"./OptionGroup\";\n\nexport const isOptionGroup = (\n item: ComboboxOption,\n): item is ComboboxOptionGroupProps =>\n \"options\" in item && Array.isArray(item.options);\n\nexport const flattenOptions = (\n items: ComboboxOption[],\n): OptionHTMLAttributes<HTMLOptionElement>[] =>\n items.flatMap((item) => (isOptionGroup(item) ? item.options : [item]));\n\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\nexport const text = (el: Element): string => el.textContent?.trim() || \"\";\n\n/**\n * Converts various input types to a consistent array of ComboboxItem objects.\n *\n * Handles different input formats:\n * - null/undefined → returns empty array []\n * - string → returns [{ label: string, value: string }]\n * - ComboboxItem → returns [ComboboxItem]\n * - array of strings/ComboboxItems → returns array of ComboboxItems\n *\n * This ensures the component always works with a predictable data structure.\n */\nexport const sanitizeItems = (\n values: ComboboxSelected | null | undefined = [],\n): ComboboxItem[] => {\n if (values == null) {\n return [];\n }\n\n if (typeof values === \"string\") {\n return [{ label: values, value: values }];\n }\n\n if (!Array.isArray(values)) {\n return [values];\n }\n\n return values.map(\n (value): ComboboxItem =>\n typeof value === \"string\" ? { label: value, value } : value,\n );\n};\n\n/**\n * Calculates the next selected items when user clicks on an option.\n *\n * For single selection: returns the clicked item or undefined\n * For multiple selection: adds/removes the clicked item from the current list\n */\nexport function nextItems(\n data: HTMLDataElement,\n prev?: ComboboxSelected,\n multiple?: boolean,\n): ComboboxItem | ComboboxItem[] | undefined {\n const item: ComboboxItem = { label: text(data), value: data.value };\n\n if (!multiple) {\n // Single selection: return item if selecting, undefined if deselecting\n return data.isConnected ? undefined : item;\n }\n\n // Multiple selection: add or remove item from list\n return data.isConnected\n ? sanitizeItems(prev).filter(({ value }) => value !== item.value) // Remove item\n : [...sanitizeItems(prev), item]; // Add item\n}\n\nexport const i18n = {\n nb: {\n \"data-sr-added\": \"Lagt til\",\n \"data-sr-removed\": \"Fjernet\",\n \"data-sr-remove\": \"Trykk for å fjerne\",\n \"data-sr-empty\": \"Ingen valgte\",\n \"data-sr-found\": \"Naviger til venstre for å finne %d valgte\",\n \"data-sr-invalid\": \"Ugyldig verdi\",\n \"data-sr-of\": \"av\",\n \"data-sr-singular\": \"%d treff\",\n \"data-sr-plural\": \"%d treff\",\n \"data-sr-clear\": \"Fjern tekst\",\n },\n nn: {\n \"data-sr-added\": \"Lagt til\",\n \"data-sr-removed\": \"Fjerna\",\n \"data-sr-remove\": \"Trykk for å fjerne\",\n \"data-sr-empty\": \"Ingen valde\",\n \"data-sr-found\": \"Naviger til venstre for å finne %d valde\",\n \"data-sr-invalid\": \"Ugyldig verdi\",\n \"data-sr-of\": \"av\",\n \"data-sr-singular\": \"%d treff\",\n \"data-sr-plural\": \"%d treff\",\n \"data-sr-clear\": \"Fjern tekst\",\n },\n en: {\n \"data-sr-added\": \"Added\",\n \"data-sr-removed\": \"Removed\",\n \"data-sr-remove\": \"Press to remove\",\n \"data-sr-empty\": \"No selected\",\n \"data-sr-found\": \"Navigate left to find %d selected\",\n \"data-sr-invalid\": \"Invalid value\",\n \"data-sr-of\": \"of\",\n \"data-sr-singular\": \"%d hit\",\n \"data-sr-plural\": \"%d hits\",\n \"data-sr-clear\": \"Clear text\",\n },\n};\n\nexport const getTextProps = (lang: keyof typeof i18n) => i18n[lang];\n","import { Label, HelpText } from \"@sikt/sds-form\";\nimport type { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { clsx } from \"clsx/lite\";\nimport {\n InputHTMLAttributes,\n HTMLAttributes,\n ReactNode,\n useEffect,\n useId,\n useRef,\n useState,\n forwardRef,\n} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\nimport { ClearButton } from \"./ClearButton\";\nimport { ExpandButton } from \"./ExpandButton\";\nimport { Option, type OptionProps } from \"./Option\";\nimport { OptionGroup, type ComboboxOptionGroupProps } from \"./OptionGroup\";\nimport {\n isOptionGroup,\n flattenOptions,\n sanitizeItems,\n nextItems,\n getTextProps,\n} from \"./utils\";\n\nexport interface ComboboxItem {\n label: string;\n value: string;\n}\n\nexport type ComboboxOption = OptionProps | ComboboxOptionGroupProps;\n\ntype ComboboxValue<T extends { multiple: boolean }> = T[\"multiple\"] extends true\n ? (string | ComboboxItem)[]\n : string | ComboboxItem;\n\ntype ComboboxBaseProps = {\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 or section objects containing grouped options:\n * - **label** Text for the option label or section heading.\n * - **value** The value submitted with the form (options only).\n * - **selected** Whether the option is initially selected (options only).\n */\n options: ComboboxOption[];\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 inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Sets language for accessible texts.\n *\n * @default \"nb\"\n */\n lang?: \"nb\" | \"nn\" | \"en\";\n noChips?: boolean;\n} & Omit<HTMLAttributes<UHTMLComboboxElement>, \"defaultValue\" | \"onChange\"> &\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\ninterface ComboboxValueProps<T extends { multiple: boolean }> {\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 false\n */\n multiple?: T[\"multiple\"];\n /**\n * The selected item of the Combobox.\n *\n * If `label` and `value` are the same, each item can be a `string`. Otherwise, each item must be a `ComboboxItem`.\n *\n * Using this makes the component controlled and it must be used in combination with `onSelectedChange`.\n */\n selected?: ComboboxValue<T> | null;\n /**\n * Default selected item when uncontrolled\n */\n defaultSelected?: ComboboxValue<T>;\n /**\n * Callback when selected items changes\n */\n onSelectedChange?: (\n value: T[\"multiple\"] extends true ? ComboboxItem[] : ComboboxItem | null,\n ) => void;\n}\n\nexport type ComboboxSingleProps = ComboboxBaseProps &\n ComboboxValueProps<{ multiple: false }>;\n\nexport type ComboboxMultipleProps = ComboboxBaseProps &\n ComboboxValueProps<{ multiple: true }> & { multiple: true };\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;\n\nexport type ComboboxSelected =\n | string\n | ComboboxItem\n | (string | ComboboxItem)[]\n | null;\n\nexport const Combobox = forwardRef<UHTMLComboboxElement, ComboboxProps>(\n function Combobox(\n {\n className,\n errorText,\n helpText,\n label,\n \"aria-labelledby\": ariaLabelledBy,\n multiple = false,\n options,\n name,\n inputProps,\n lang = \"nb\",\n selected,\n defaultSelected,\n onSelectedChange,\n noChips,\n ...rest\n },\n ref,\n ) {\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 const textProps = getTextProps(lang);\n const isControlled = selected !== undefined;\n const onSelectedChangeRef = useRef(onSelectedChange);\n const selectedItemsRef = useRef<ComboboxItem[]>([]);\n const [isMounted, setIsMounted] = useState(false);\n\n const [defaultItems, setDefaultItems] = useState<ComboboxItem[]>(() => {\n // Priority: defaultSelected prop > selected options in options array\n const fromProp = sanitizeItems(defaultSelected);\n if (fromProp.length > 0) {\n return fromProp;\n }\n\n // Extract initially selected options from the options array\n const initiallySelectedFromOptions = flattenOptions(options)\n .filter((option) => option.selected)\n .map((option) => ({\n label: (option.label ?? option.value ?? \"\") as string,\n value: (option.value ?? \"\") as string,\n }));\n\n return initiallySelectedFromOptions;\n });\n\n const selectedItems = selected ? sanitizeItems(selected) : defaultItems;\n // Keep the ref updated with the latest callback\n useEffect(() => {\n selectedItemsRef.current = selectedItems;\n }, [selectedItems]);\n\n // Set mounted state after hydration\n useEffect(() => {\n setIsMounted(true);\n }, []);\n\n useEffect(() => {\n onSelectedChangeRef.current = onSelectedChange;\n }, [onSelectedChange]);\n\n // Combine refs\n useEffect(() => {\n if (!ref) return;\n if (typeof ref === \"function\") {\n ref(comboboxRef.current);\n } else {\n ref.current = comboboxRef.current;\n }\n }, [ref]);\n\n /**\n * Listeners and handling of adding/removing\n */\n useEffect(() => {\n const combobox = comboboxRef.current;\n const beforeChange = (event: CustomEvent<HTMLDataElement>) => {\n event.preventDefault();\n const data = event.detail;\n\n const nextItem = nextItems(data, selectedItemsRef.current, multiple);\n\n if (multiple) {\n // Multiple selection: nextItem should be ComboboxItem[]\n const callback = onSelectedChangeRef.current as\n | ((value: ComboboxItem[]) => void)\n | undefined;\n callback?.(nextItem as ComboboxItem[]);\n if (!isControlled) setDefaultItems(nextItem as ComboboxItem[]);\n } else {\n // Single selection: nextItem should be ComboboxItem | undefined\n const callback = onSelectedChangeRef.current as\n | ((value: ComboboxItem | null) => void)\n | undefined;\n callback?.((nextItem as ComboboxItem | undefined) ?? null);\n if (!isControlled) setDefaultItems(sanitizeItems(nextItem));\n }\n };\n\n combobox?.addEventListener(\n \"comboboxbeforeselect\",\n beforeChange as EventListener,\n );\n return () =>\n combobox?.removeEventListener(\n \"comboboxbeforeselect\",\n beforeChange as EventListener,\n );\n }, [isControlled, multiple]);\n\n return (\n <div\n className={clsx(\n \"sds-form-field\",\n errorText && \"sds-form-field--error\",\n \"sds-combobox\",\n noChips && \"sds-combobox--no-chips\",\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 suppressHydrationWarning\n {...textProps}\n {...rest}\n >\n {selectedItems.map((item) => (\n <data\n key={item.value}\n value={item.value}\n suppressHydrationWarning\n >\n {item.label}\n </data>\n ))}\n <input\n suppressHydrationWarning\n className=\"sds-combobox__input\"\n {...inputProps}\n id={id}\n list={listId}\n aria-labelledby={ariaLabelledBy}\n />\n <ClearButton clearText={textProps[\"data-sr-clear\"]} />\n <ExpandButton />\n <u-datalist\n suppressHydrationWarning\n className=\"sds-combobox__datalist\"\n id={listId}\n hidden\n data-sr-singular={textProps[\"data-sr-singular\"]}\n data-sr-plural={textProps[\"data-sr-plural\"]}\n >\n {options.map((option) =>\n isOptionGroup(option) ? (\n <OptionGroup\n key={option.label}\n label={option.label}\n options={option.options}\n />\n ) : (\n <Option\n suppressHydrationWarning\n key={`${option.value?.toString() ?? option.label?.toString()}`}\n {...option}\n />\n ),\n )}\n </u-datalist>\n {!!name && isMounted && (\n <select\n name={name}\n multiple={multiple}\n aria-hidden\n hidden\n suppressHydrationWarning\n />\n )}\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);\n\nCombobox.displayName = \"Combobox\";\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{Label as e,HelpText as r}from"@sikt/sds-form";import{clsx as a}from"clsx/lite";import{forwardRef as t,useRef as l,useId as n,useState as
|
|
1
|
+
import{Label as e,HelpText as r}from"@sikt/sds-form";import{clsx as a}from"clsx/lite";import{forwardRef as t,useRef as l,useId as n,useState as o,useEffect as s}from"react";import"@u-elements/u-combobox";import"@u-elements/u-datalist";import{ScreenReaderOnly as d}from"@sikt/sds-core";import{CancelIcon as i,ExpandShowAltIcon as c}from"@sikt/sds-icons";import{jsxs as u,jsx as p}from"react/jsx-runtime";var m=Object.defineProperty,b=Object.defineProperties,v=Object.getOwnPropertyDescriptors,f=Object.getOwnPropertySymbols,g=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable,x=(e,r,a)=>r in e?m(e,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[r]=a,h=(e,r)=>{for(var a in r||(r={}))g.call(r,a)&&x(e,a,r[a]);if(f)for(var a of f(r))y.call(r,a)&&x(e,a,r[a]);return e},_=(e,r)=>b(e,v(r)),N=(e,r)=>{var a={};for(var t in e)g.call(e,t)&&r.indexOf(t)<0&&(a[t]=e[t]);if(null!=e&&f)for(var t of f(e))r.indexOf(t)<0&&y.call(e,t)&&(a[t]=e[t]);return a},j=({clearText:e})=>u("del",{suppressHydrationWarning:!0,className:"sds-combobox__button",children:[p(d,{children:e}),p("span",{className:"sds-combobox__button-icon",children:p(i,{})})]}),O=()=>p("span",{className:"sds-combobox__button",children:p("span",{className:"sds-combobox__button-icon",children:p(c,{})})}),k=e=>{var r=e,{label:a,value:t}=r,l=N(r,["label","value"]);return p("u-option",_(h({className:"sds-combobox__datalist-option",value:t,suppressHydrationWarning:!0},l),{children:a}))},C=({label:e,options:r})=>{const a=n();return u("div",{className:"sds-combobox__datalist-group",role:"group",children:[p("span",{className:"sds-combobox__datalist-group-label",id:a,children:e}),r.map(e=>{var r,t,l;return p(k,h({"aria-describedby":a,suppressHydrationWarning:!0},e),"".concat(null!=(l=null==(r=e.value)?void 0:r.toString())?l:null==(t=e.label)?void 0:t.toString()))})]})},H=e=>"options"in e&&Array.isArray(e.options),S=(e=[])=>null==e?[]:"string"==typeof e?[{label:e,value:e}]:Array.isArray(e)?e.map(e=>"string"==typeof e?{label:e,value:e}:e):[e];var W={nb:{"data-sr-added":"Lagt til","data-sr-removed":"Fjernet","data-sr-remove":"Trykk for å fjerne","data-sr-empty":"Ingen valgte","data-sr-found":"Naviger til venstre for å finne %d valgte","data-sr-invalid":"Ugyldig verdi","data-sr-of":"av","data-sr-singular":"%d treff","data-sr-plural":"%d treff","data-sr-clear":"Fjern tekst"},nn:{"data-sr-added":"Lagt til","data-sr-removed":"Fjerna","data-sr-remove":"Trykk for å fjerne","data-sr-empty":"Ingen valde","data-sr-found":"Naviger til venstre for å finne %d valde","data-sr-invalid":"Ugyldig verdi","data-sr-of":"av","data-sr-singular":"%d treff","data-sr-plural":"%d treff","data-sr-clear":"Fjern tekst"},en:{"data-sr-added":"Added","data-sr-removed":"Removed","data-sr-remove":"Press to remove","data-sr-empty":"No selected","data-sr-found":"Navigate left to find %d selected","data-sr-invalid":"Invalid value","data-sr-of":"of","data-sr-singular":"%d hit","data-sr-plural":"%d hits","data-sr-clear":"Clear text"}},P=t(function(t,d){var i=t,{className:c,errorText:m,helpText:b,label:v,"aria-labelledby":f,multiple:g=!1,options:y,name:x,inputProps:P,lang:T="nb",selected:w,defaultSelected:A,onSelectedChange:F,noChips:I}=i,L=N(i,["className","errorText","helpText","label","aria-labelledby","multiple","options","name","inputProps","lang","selected","defaultSelected","onSelectedChange","noChips"]);const E=l(null),D=n(),U="".concat(D,"-error-text"),B="".concat(D,"-help-text"),M="".concat(D,"-list"),R=(e=>W[e])(T),q=void 0!==w,z=l(F),G=l([]),[J,K]=o(!1),[Q,V]=o(()=>{const e=S(A);if(e.length>0)return e;var r;return(r=y,r.flatMap(e=>H(e)?e.options:[e])).filter(e=>e.selected).map(e=>{var r,a,t;return{label:null!=(a=null!=(r=e.label)?r:e.value)?a:"",value:null!=(t=e.value)?t:""}})}),X=w?S(w):Q;return s(()=>{G.current=X},[X]),s(()=>{K(!0)},[]),s(()=>{z.current=F},[F]),s(()=>{d&&("function"==typeof d?d(E.current):d.current=E.current)},[d]),s(()=>{const e=E.current,r=e=>{e.preventDefault();const r=function(e,r,a){const t={label:(l=e,(null==(n=l.textContent)?void 0:n.trim())||""),value:e.value};var l,n;return a?e.isConnected?S(r).filter(({value:e})=>e!==t.value):[...S(r),t]:e.isConnected?void 0:t}(e.detail,G.current,g);if(g){const e=z.current;null==e||e(r),q||V(r)}else{const e=z.current;null==e||e(null!=r?r:null),q||V(S(r))}};return null==e||e.addEventListener("comboboxbeforeselect",r),()=>null==e?void 0:e.removeEventListener("comboboxbeforeselect",r)},[q,g]),u("div",{className:a("sds-form-field",m&&"sds-form-field--error","sds-combobox",I&&"sds-combobox--no-chips",m&&"sds-combobox--invalid",c),children:[u("div",{className:"sds-form-field__label-wrapper",children:[void 0!==v&&p(e,{text:v,error:Boolean(m),htmlFor:D}),u("u-combobox",_(h(h({className:"sds-combobox__combobox","data-multiple":g,ref:E,suppressHydrationWarning:!0},R),L),{children:[X.map(e=>p("data",{value:e.value,suppressHydrationWarning:!0,children:e.label},e.value)),p("input",_(h({suppressHydrationWarning:!0,className:"sds-combobox__input"},P),{id:D,list:M,"aria-labelledby":f})),p(j,{clearText:R["data-sr-clear"]}),p(O,{}),p("u-datalist",{suppressHydrationWarning:!0,className:"sds-combobox__datalist",id:M,hidden:!0,"data-sr-singular":R["data-sr-singular"],"data-sr-plural":R["data-sr-plural"],children:y.map(e=>{var r,a,t;return H(e)?p(C,{label:e.label,options:e.options},e.label):p(k,h({suppressHydrationWarning:!0},e),"".concat(null!=(t=null==(r=e.value)?void 0:r.toString())?t:null==(a=e.label)?void 0:a.toString()))})}),!!x&&J&&p("select",{name:x,multiple:g,"aria-hidden":!0,hidden:!0,suppressHydrationWarning:!0})]}))]}),b&&p(r,{id:B,children:b}),m&&p(r,{id:U,error:!0,children:m})]})});P.displayName="Combobox";export{P as Combobox};//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ClearButton.tsx","../src/ExpandButton.tsx","../src/Option.tsx","../src/OptionGroup.tsx","../src/utils.ts","../src/Combobox.tsx"],"names":["jsx","jsxs","Combobox","useId","_a","_b"],"mappings":"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","file":"index.mjs","sourcesContent":["import { ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { CancelIcon } from \"@sikt/sds-icons\";\n\ninterface ClearButtonProps {\n clearText: string;\n}\n\nexport const ClearButton = ({ clearText }: ClearButtonProps) => (\n <del suppressHydrationWarning className=\"sds-combobox__button\">\n <ScreenReaderOnly>{clearText}</ScreenReaderOnly>\n <span className=\"sds-combobox__button-icon\">\n <CancelIcon />\n </span>\n </del>\n);\n","import { ExpandShowAltIcon } from \"@sikt/sds-icons\";\n\nexport const ExpandButton = () => (\n <span className=\"sds-combobox__button\">\n <span className=\"sds-combobox__button-icon\">\n <ExpandShowAltIcon />\n </span>\n </span>\n);\n","import { OptionHTMLAttributes } from \"react\";\nimport \"@u-elements/u-datalist\";\n\nexport const Option = ({\n label,\n value,\n ...rest\n}: OptionHTMLAttributes<HTMLOptionElement>) => (\n <u-option\n className=\"sds-combobox__datalist-option\"\n value={value}\n suppressHydrationWarning\n {...rest}\n >\n {label}\n </u-option>\n);\n","import { useId } from \"react\";\nimport type { ComboboxOptionGroupProps } from \"./Combobox\";\nimport { Option } from \"./Option\";\n\nexport const OptionGroup = ({ label, options }: ComboboxOptionGroupProps) => {\n const id = useId();\n\n return (\n <div className=\"sds-combobox__datalist-group\" role=\"group\">\n <span className=\"sds-combobox__datalist-group-label\" id={id}>\n {label}\n </span>\n {options.map((option) => (\n <Option\n key={option.value?.toString()}\n aria-describedby={id}\n suppressHydrationWarning\n {...option}\n />\n ))}\n </div>\n );\n};\n","import type { OptionHTMLAttributes } from \"react\";\nimport type {\n ComboboxItem,\n ComboboxOption,\n ComboboxOptionGroupProps,\n ComboboxSelected,\n} from \"./Combobox\";\n\nexport const isOptionGroup = (\n item: ComboboxOption,\n): item is ComboboxOptionGroupProps =>\n \"options\" in item && Array.isArray(item.options);\n\nexport const flattenOptions = (\n items: ComboboxOption[],\n): OptionHTMLAttributes<HTMLOptionElement>[] =>\n items.flatMap((item) => (isOptionGroup(item) ? item.options : [item]));\n\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\nexport const text = (el: Element): string => el.textContent?.trim() || \"\";\n\n/**\n * Converts various input types to a consistent array of ComboboxItem objects.\n *\n * Handles different input formats:\n * - null/undefined → returns empty array []\n * - string → returns [{ label: string, value: string }]\n * - ComboboxItem → returns [ComboboxItem]\n * - array of strings/ComboboxItems → returns array of ComboboxItems\n *\n * This ensures the component always works with a predictable data structure.\n */\nexport const sanitizeItems = (\n values: ComboboxSelected | null | undefined = [],\n): ComboboxItem[] => {\n if (values == null) {\n return [];\n }\n\n if (typeof values === \"string\") {\n return [{ label: values, value: values }];\n }\n\n if (!Array.isArray(values)) {\n return [values];\n }\n\n return values.map(\n (value): ComboboxItem =>\n typeof value === \"string\" ? { label: value, value } : value,\n );\n};\n\n/**\n * Calculates the next selected items when user clicks on an option.\n *\n * For single selection: returns the clicked item or undefined\n * For multiple selection: adds/removes the clicked item from the current list\n */\nexport function nextItems(\n data: HTMLDataElement,\n prev?: ComboboxSelected,\n multiple?: boolean,\n): ComboboxItem | ComboboxItem[] | undefined {\n const item: ComboboxItem = { label: text(data), value: data.value };\n\n if (!multiple) {\n // Single selection: return item if selecting, undefined if deselecting\n return data.isConnected ? undefined : item;\n }\n\n // Multiple selection: add or remove item from list\n return data.isConnected\n ? sanitizeItems(prev).filter(({ value }) => value !== item.value) // Remove item\n : [...sanitizeItems(prev), item]; // Add item\n}\n\nexport const i18n = {\n nb: {\n \"data-sr-added\": \"Lagt til\",\n \"data-sr-removed\": \"Fjernet\",\n \"data-sr-remove\": \"Trykk for å fjerne\",\n \"data-sr-empty\": \"Ingen valgte\",\n \"data-sr-found\": \"Naviger til venstre for å finne %d valgte\",\n \"data-sr-invalid\": \"Ugyldig verdi\",\n \"data-sr-of\": \"av\",\n \"data-sr-singular\": \"%d treff\",\n \"data-sr-plural\": \"%d treff\",\n \"data-sr-clear\": \"Fjern tekst\",\n },\n nn: {\n \"data-sr-added\": \"Lagt til\",\n \"data-sr-removed\": \"Fjerna\",\n \"data-sr-remove\": \"Trykk for å fjerne\",\n \"data-sr-empty\": \"Ingen valde\",\n \"data-sr-found\": \"Naviger til venstre for å finne %d valde\",\n \"data-sr-invalid\": \"Ugyldig verdi\",\n \"data-sr-of\": \"av\",\n \"data-sr-singular\": \"%d treff\",\n \"data-sr-plural\": \"%d treff\",\n \"data-sr-clear\": \"Fjern tekst\",\n },\n en: {\n \"data-sr-added\": \"Added\",\n \"data-sr-removed\": \"Removed\",\n \"data-sr-remove\": \"Press to remove\",\n \"data-sr-empty\": \"No selected\",\n \"data-sr-found\": \"Navigate left to find %d selected\",\n \"data-sr-invalid\": \"Invalid value\",\n \"data-sr-of\": \"of\",\n \"data-sr-singular\": \"%d hit\",\n \"data-sr-plural\": \"%d hits\",\n \"data-sr-clear\": \"Clear text\",\n },\n};\n\nexport const getTextProps = (lang: keyof typeof i18n) => i18n[lang];\n","import { Label, HelpText } from \"@sikt/sds-form\";\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 useState,\n forwardRef,\n} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\nimport { ClearButton } from \"./ClearButton\";\nimport { ExpandButton } from \"./ExpandButton\";\nimport { Option } from \"./Option\";\nimport { OptionGroup } from \"./OptionGroup\";\nimport {\n isOptionGroup,\n flattenOptions,\n sanitizeItems,\n nextItems,\n getTextProps,\n} from \"./utils\";\n\nexport interface ComboboxItem {\n label: string;\n value: string;\n}\n\nexport interface ComboboxOptionGroupProps {\n /**\n * Label for the section heading.\n */\n label: string;\n /**\n * Options within this section.\n */\n options: OptionHTMLAttributes<HTMLOptionElement>[];\n}\n\nexport type ComboboxOption =\n | OptionHTMLAttributes<HTMLOptionElement>\n | ComboboxOptionGroupProps;\n\ntype ComboboxValue<T extends { multiple: boolean }> = T[\"multiple\"] extends true\n ? (string | ComboboxItem)[]\n : string | ComboboxItem;\n\ntype ComboboxBaseProps = {\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 or section objects containing grouped options:\n * - **label** Text for the option label or section heading.\n * - **value** The value submitted with the form (options only).\n * - **selected** Whether the option is initially selected (options only).\n */\n options: ComboboxOption[];\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 inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Sets language for accessible texts.\n *\n * @default \"nb\"\n */\n lang?: \"nb\" | \"nn\" | \"en\";\n} & Omit<HTMLAttributes<UHTMLComboboxElement>, \"defaultValue\" | \"onChange\"> &\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\ninterface ComboboxValueProps<T extends { multiple: boolean }> {\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 false\n */\n multiple?: T[\"multiple\"];\n /**\n * The selected item of the Combobox.\n *\n * If `label` and `value` are the same, each item can be a `string`. Otherwise, each item must be a `ComboboxItem`.\n *\n * Using this makes the component controlled and it must be used in combination with `onSelectedChange`.\n */\n selected?: ComboboxValue<T> | null;\n /**\n * Default selected item when uncontrolled\n */\n defaultSelected?: ComboboxValue<T>;\n /**\n * Callback when selected items changes\n */\n onSelectedChange?: (\n value: T[\"multiple\"] extends true ? ComboboxItem[] : ComboboxItem | null,\n ) => void;\n}\n\nexport type ComboboxSingleProps = ComboboxBaseProps &\n ComboboxValueProps<{ multiple: false }>;\n\nexport type ComboboxMultipleProps = ComboboxBaseProps &\n ComboboxValueProps<{ multiple: true }> & { multiple: true };\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;\n\nexport type ComboboxSelected =\n | string\n | ComboboxItem\n | (string | ComboboxItem)[]\n | null;\n\nexport const Combobox = forwardRef<UHTMLComboboxElement, ComboboxProps>(\n function Combobox(\n {\n className,\n errorText,\n helpText,\n label,\n \"aria-labelledby\": ariaLabelledBy,\n multiple = false,\n options,\n name,\n inputProps,\n lang = \"nb\",\n selected,\n defaultSelected,\n onSelectedChange,\n ...rest\n },\n ref,\n ) {\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 const textProps = getTextProps(lang);\n const isControlled = selected !== undefined;\n const onSelectedChangeRef = useRef(onSelectedChange);\n const selectedItemsRef = useRef<ComboboxItem[]>([]);\n const [isMounted, setIsMounted] = useState(false);\n\n const [defaultItems, setDefaultItems] = useState<ComboboxItem[]>(() => {\n // Priority: defaultSelected prop > selected options in options array\n const fromProp = sanitizeItems(defaultSelected);\n if (fromProp.length > 0) {\n return fromProp;\n }\n\n // Extract initially selected options from the options array\n const initiallySelectedFromOptions = flattenOptions(options)\n .filter((option) => option.selected)\n .map((option) => ({\n label: (option.label ?? option.value ?? \"\") as string,\n value: (option.value ?? \"\") as string,\n }));\n\n return initiallySelectedFromOptions;\n });\n\n const selectedItems = selected ? sanitizeItems(selected) : defaultItems;\n // Keep the ref updated with the latest callback\n useEffect(() => {\n selectedItemsRef.current = selectedItems;\n }, [selectedItems]);\n\n // Set mounted state after hydration\n useEffect(() => {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setIsMounted(true);\n }, []);\n\n useEffect(() => {\n onSelectedChangeRef.current = onSelectedChange;\n }, [onSelectedChange]);\n\n // Combine refs\n useEffect(() => {\n if (!ref) return;\n if (typeof ref === \"function\") {\n ref(comboboxRef.current);\n } else {\n ref.current = comboboxRef.current;\n }\n }, [ref]);\n\n /**\n * Listeners and handling of adding/removing\n */\n useEffect(() => {\n const combobox = comboboxRef.current;\n const beforeChange = (event: CustomEvent<HTMLDataElement>) => {\n event.preventDefault();\n const data = event.detail;\n\n const nextItem = nextItems(data, selectedItemsRef.current, multiple);\n\n if (multiple) {\n // Multiple selection: nextItem should be ComboboxItem[]\n const callback = onSelectedChangeRef.current as\n | ((value: ComboboxItem[]) => void)\n | undefined;\n callback?.(nextItem as ComboboxItem[]);\n if (!isControlled) setDefaultItems(nextItem as ComboboxItem[]);\n } else {\n // Single selection: nextItem should be ComboboxItem | undefined\n const callback = onSelectedChangeRef.current as\n | ((value: ComboboxItem | null) => void)\n | undefined;\n callback?.((nextItem as ComboboxItem | undefined) ?? null);\n if (!isControlled) setDefaultItems(sanitizeItems(nextItem));\n }\n };\n\n combobox?.addEventListener(\n \"comboboxbeforeselect\",\n beforeChange as EventListener,\n );\n return () =>\n combobox?.removeEventListener(\n \"comboboxbeforeselect\",\n beforeChange as EventListener,\n );\n }, [isControlled, multiple]);\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 suppressHydrationWarning\n {...textProps}\n {...rest}\n >\n {selectedItems.map((item) => (\n <data\n key={item.value}\n value={item.value}\n suppressHydrationWarning\n >\n {item.label}\n </data>\n ))}\n <input\n suppressHydrationWarning\n className=\"sds-combobox__input\"\n {...inputProps}\n id={id}\n list={listId}\n aria-labelledby={ariaLabelledBy}\n />\n <ClearButton clearText={textProps[\"data-sr-clear\"]} />\n <ExpandButton />\n <u-datalist\n suppressHydrationWarning\n className=\"sds-combobox__datalist\"\n id={listId}\n hidden\n data-sr-singular={textProps[\"data-sr-singular\"]}\n data-sr-plural={textProps[\"data-sr-plural\"]}\n >\n {options.map((option) =>\n isOptionGroup(option) ? (\n <OptionGroup\n key={option.label}\n label={option.label}\n options={option.options}\n />\n ) : (\n <Option\n suppressHydrationWarning\n key={option.value?.toString()}\n {...option}\n />\n ),\n )}\n </u-datalist>\n {!!name && isMounted && (\n <select\n name={name}\n multiple={multiple}\n aria-hidden\n hidden\n suppressHydrationWarning\n />\n )}\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);\n\nCombobox.displayName = \"Combobox\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/ClearButton.tsx","../src/ExpandButton.tsx","../src/Option.tsx","../src/OptionGroup.tsx","../src/utils.ts","../src/Combobox.tsx"],"names":["jsx","jsxs","Combobox","useId","_a","_b"],"mappings":"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","file":"index.mjs","sourcesContent":["import { ScreenReaderOnly } from \"@sikt/sds-core\";\nimport { CancelIcon } from \"@sikt/sds-icons\";\n\ninterface ClearButtonProps {\n clearText: string;\n}\n\nexport const ClearButton = ({ clearText }: ClearButtonProps) => (\n <del suppressHydrationWarning className=\"sds-combobox__button\">\n <ScreenReaderOnly>{clearText}</ScreenReaderOnly>\n <span className=\"sds-combobox__button-icon\">\n <CancelIcon />\n </span>\n </del>\n);\n","import { ExpandShowAltIcon } from \"@sikt/sds-icons\";\n\nexport const ExpandButton = () => (\n <span className=\"sds-combobox__button\">\n <span className=\"sds-combobox__button-icon\">\n <ExpandShowAltIcon />\n </span>\n </span>\n);\n","import { OptionHTMLAttributes } from \"react\";\nimport \"@u-elements/u-datalist\";\n\nexport type OptionProps = OptionHTMLAttributes<HTMLOptionElement>;\n\nexport const Option = ({ label, value, ...rest }: OptionProps) => (\n <u-option\n className=\"sds-combobox__datalist-option\"\n value={value}\n suppressHydrationWarning\n {...rest}\n >\n {label}\n </u-option>\n);\n","import { OptgroupHTMLAttributes, useId } from \"react\";\nimport { Option, type OptionProps } from \"./Option\";\n\nexport interface ComboboxOptionGroupProps extends OptgroupHTMLAttributes<HTMLOptGroupElement> {\n options: OptionProps[];\n}\n\nexport const OptionGroup = ({ label, options }: ComboboxOptionGroupProps) => {\n const id = useId();\n\n return (\n <div className=\"sds-combobox__datalist-group\" role=\"group\">\n <span className=\"sds-combobox__datalist-group-label\" id={id}>\n {label}\n </span>\n {options.map((option) => (\n <Option\n key={`${option.value?.toString() ?? option.label?.toString()}`}\n aria-describedby={id}\n suppressHydrationWarning\n {...option}\n />\n ))}\n </div>\n );\n};\n","import type { OptionHTMLAttributes } from \"react\";\nimport type {\n ComboboxItem,\n ComboboxOption,\n ComboboxSelected,\n} from \"./Combobox\";\nimport type { ComboboxOptionGroupProps } from \"./OptionGroup\";\n\nexport const isOptionGroup = (\n item: ComboboxOption,\n): item is ComboboxOptionGroupProps =>\n \"options\" in item && Array.isArray(item.options);\n\nexport const flattenOptions = (\n items: ComboboxOption[],\n): OptionHTMLAttributes<HTMLOptionElement>[] =>\n items.flatMap((item) => (isOptionGroup(item) ? item.options : [item]));\n\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\nexport const text = (el: Element): string => el.textContent?.trim() || \"\";\n\n/**\n * Converts various input types to a consistent array of ComboboxItem objects.\n *\n * Handles different input formats:\n * - null/undefined → returns empty array []\n * - string → returns [{ label: string, value: string }]\n * - ComboboxItem → returns [ComboboxItem]\n * - array of strings/ComboboxItems → returns array of ComboboxItems\n *\n * This ensures the component always works with a predictable data structure.\n */\nexport const sanitizeItems = (\n values: ComboboxSelected | null | undefined = [],\n): ComboboxItem[] => {\n if (values == null) {\n return [];\n }\n\n if (typeof values === \"string\") {\n return [{ label: values, value: values }];\n }\n\n if (!Array.isArray(values)) {\n return [values];\n }\n\n return values.map(\n (value): ComboboxItem =>\n typeof value === \"string\" ? { label: value, value } : value,\n );\n};\n\n/**\n * Calculates the next selected items when user clicks on an option.\n *\n * For single selection: returns the clicked item or undefined\n * For multiple selection: adds/removes the clicked item from the current list\n */\nexport function nextItems(\n data: HTMLDataElement,\n prev?: ComboboxSelected,\n multiple?: boolean,\n): ComboboxItem | ComboboxItem[] | undefined {\n const item: ComboboxItem = { label: text(data), value: data.value };\n\n if (!multiple) {\n // Single selection: return item if selecting, undefined if deselecting\n return data.isConnected ? undefined : item;\n }\n\n // Multiple selection: add or remove item from list\n return data.isConnected\n ? sanitizeItems(prev).filter(({ value }) => value !== item.value) // Remove item\n : [...sanitizeItems(prev), item]; // Add item\n}\n\nexport const i18n = {\n nb: {\n \"data-sr-added\": \"Lagt til\",\n \"data-sr-removed\": \"Fjernet\",\n \"data-sr-remove\": \"Trykk for å fjerne\",\n \"data-sr-empty\": \"Ingen valgte\",\n \"data-sr-found\": \"Naviger til venstre for å finne %d valgte\",\n \"data-sr-invalid\": \"Ugyldig verdi\",\n \"data-sr-of\": \"av\",\n \"data-sr-singular\": \"%d treff\",\n \"data-sr-plural\": \"%d treff\",\n \"data-sr-clear\": \"Fjern tekst\",\n },\n nn: {\n \"data-sr-added\": \"Lagt til\",\n \"data-sr-removed\": \"Fjerna\",\n \"data-sr-remove\": \"Trykk for å fjerne\",\n \"data-sr-empty\": \"Ingen valde\",\n \"data-sr-found\": \"Naviger til venstre for å finne %d valde\",\n \"data-sr-invalid\": \"Ugyldig verdi\",\n \"data-sr-of\": \"av\",\n \"data-sr-singular\": \"%d treff\",\n \"data-sr-plural\": \"%d treff\",\n \"data-sr-clear\": \"Fjern tekst\",\n },\n en: {\n \"data-sr-added\": \"Added\",\n \"data-sr-removed\": \"Removed\",\n \"data-sr-remove\": \"Press to remove\",\n \"data-sr-empty\": \"No selected\",\n \"data-sr-found\": \"Navigate left to find %d selected\",\n \"data-sr-invalid\": \"Invalid value\",\n \"data-sr-of\": \"of\",\n \"data-sr-singular\": \"%d hit\",\n \"data-sr-plural\": \"%d hits\",\n \"data-sr-clear\": \"Clear text\",\n },\n};\n\nexport const getTextProps = (lang: keyof typeof i18n) => i18n[lang];\n","import { Label, HelpText } from \"@sikt/sds-form\";\nimport type { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { clsx } from \"clsx/lite\";\nimport {\n InputHTMLAttributes,\n HTMLAttributes,\n ReactNode,\n useEffect,\n useId,\n useRef,\n useState,\n forwardRef,\n} from \"react\";\nimport \"@u-elements/u-combobox\";\nimport \"@u-elements/u-datalist\";\nimport \"./combobox.pcss\";\nimport { ClearButton } from \"./ClearButton\";\nimport { ExpandButton } from \"./ExpandButton\";\nimport { Option, type OptionProps } from \"./Option\";\nimport { OptionGroup, type ComboboxOptionGroupProps } from \"./OptionGroup\";\nimport {\n isOptionGroup,\n flattenOptions,\n sanitizeItems,\n nextItems,\n getTextProps,\n} from \"./utils\";\n\nexport interface ComboboxItem {\n label: string;\n value: string;\n}\n\nexport type ComboboxOption = OptionProps | ComboboxOptionGroupProps;\n\ntype ComboboxValue<T extends { multiple: boolean }> = T[\"multiple\"] extends true\n ? (string | ComboboxItem)[]\n : string | ComboboxItem;\n\ntype ComboboxBaseProps = {\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 or section objects containing grouped options:\n * - **label** Text for the option label or section heading.\n * - **value** The value submitted with the form (options only).\n * - **selected** Whether the option is initially selected (options only).\n */\n options: ComboboxOption[];\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 inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Sets language for accessible texts.\n *\n * @default \"nb\"\n */\n lang?: \"nb\" | \"nn\" | \"en\";\n noChips?: boolean;\n} & Omit<HTMLAttributes<UHTMLComboboxElement>, \"defaultValue\" | \"onChange\"> &\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\ninterface ComboboxValueProps<T extends { multiple: boolean }> {\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 false\n */\n multiple?: T[\"multiple\"];\n /**\n * The selected item of the Combobox.\n *\n * If `label` and `value` are the same, each item can be a `string`. Otherwise, each item must be a `ComboboxItem`.\n *\n * Using this makes the component controlled and it must be used in combination with `onSelectedChange`.\n */\n selected?: ComboboxValue<T> | null;\n /**\n * Default selected item when uncontrolled\n */\n defaultSelected?: ComboboxValue<T>;\n /**\n * Callback when selected items changes\n */\n onSelectedChange?: (\n value: T[\"multiple\"] extends true ? ComboboxItem[] : ComboboxItem | null,\n ) => void;\n}\n\nexport type ComboboxSingleProps = ComboboxBaseProps &\n ComboboxValueProps<{ multiple: false }>;\n\nexport type ComboboxMultipleProps = ComboboxBaseProps &\n ComboboxValueProps<{ multiple: true }> & { multiple: true };\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;\n\nexport type ComboboxSelected =\n | string\n | ComboboxItem\n | (string | ComboboxItem)[]\n | null;\n\nexport const Combobox = forwardRef<UHTMLComboboxElement, ComboboxProps>(\n function Combobox(\n {\n className,\n errorText,\n helpText,\n label,\n \"aria-labelledby\": ariaLabelledBy,\n multiple = false,\n options,\n name,\n inputProps,\n lang = \"nb\",\n selected,\n defaultSelected,\n onSelectedChange,\n noChips,\n ...rest\n },\n ref,\n ) {\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 const textProps = getTextProps(lang);\n const isControlled = selected !== undefined;\n const onSelectedChangeRef = useRef(onSelectedChange);\n const selectedItemsRef = useRef<ComboboxItem[]>([]);\n const [isMounted, setIsMounted] = useState(false);\n\n const [defaultItems, setDefaultItems] = useState<ComboboxItem[]>(() => {\n // Priority: defaultSelected prop > selected options in options array\n const fromProp = sanitizeItems(defaultSelected);\n if (fromProp.length > 0) {\n return fromProp;\n }\n\n // Extract initially selected options from the options array\n const initiallySelectedFromOptions = flattenOptions(options)\n .filter((option) => option.selected)\n .map((option) => ({\n label: (option.label ?? option.value ?? \"\") as string,\n value: (option.value ?? \"\") as string,\n }));\n\n return initiallySelectedFromOptions;\n });\n\n const selectedItems = selected ? sanitizeItems(selected) : defaultItems;\n // Keep the ref updated with the latest callback\n useEffect(() => {\n selectedItemsRef.current = selectedItems;\n }, [selectedItems]);\n\n // Set mounted state after hydration\n useEffect(() => {\n setIsMounted(true);\n }, []);\n\n useEffect(() => {\n onSelectedChangeRef.current = onSelectedChange;\n }, [onSelectedChange]);\n\n // Combine refs\n useEffect(() => {\n if (!ref) return;\n if (typeof ref === \"function\") {\n ref(comboboxRef.current);\n } else {\n ref.current = comboboxRef.current;\n }\n }, [ref]);\n\n /**\n * Listeners and handling of adding/removing\n */\n useEffect(() => {\n const combobox = comboboxRef.current;\n const beforeChange = (event: CustomEvent<HTMLDataElement>) => {\n event.preventDefault();\n const data = event.detail;\n\n const nextItem = nextItems(data, selectedItemsRef.current, multiple);\n\n if (multiple) {\n // Multiple selection: nextItem should be ComboboxItem[]\n const callback = onSelectedChangeRef.current as\n | ((value: ComboboxItem[]) => void)\n | undefined;\n callback?.(nextItem as ComboboxItem[]);\n if (!isControlled) setDefaultItems(nextItem as ComboboxItem[]);\n } else {\n // Single selection: nextItem should be ComboboxItem | undefined\n const callback = onSelectedChangeRef.current as\n | ((value: ComboboxItem | null) => void)\n | undefined;\n callback?.((nextItem as ComboboxItem | undefined) ?? null);\n if (!isControlled) setDefaultItems(sanitizeItems(nextItem));\n }\n };\n\n combobox?.addEventListener(\n \"comboboxbeforeselect\",\n beforeChange as EventListener,\n );\n return () =>\n combobox?.removeEventListener(\n \"comboboxbeforeselect\",\n beforeChange as EventListener,\n );\n }, [isControlled, multiple]);\n\n return (\n <div\n className={clsx(\n \"sds-form-field\",\n errorText && \"sds-form-field--error\",\n \"sds-combobox\",\n noChips && \"sds-combobox--no-chips\",\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 suppressHydrationWarning\n {...textProps}\n {...rest}\n >\n {selectedItems.map((item) => (\n <data\n key={item.value}\n value={item.value}\n suppressHydrationWarning\n >\n {item.label}\n </data>\n ))}\n <input\n suppressHydrationWarning\n className=\"sds-combobox__input\"\n {...inputProps}\n id={id}\n list={listId}\n aria-labelledby={ariaLabelledBy}\n />\n <ClearButton clearText={textProps[\"data-sr-clear\"]} />\n <ExpandButton />\n <u-datalist\n suppressHydrationWarning\n className=\"sds-combobox__datalist\"\n id={listId}\n hidden\n data-sr-singular={textProps[\"data-sr-singular\"]}\n data-sr-plural={textProps[\"data-sr-plural\"]}\n >\n {options.map((option) =>\n isOptionGroup(option) ? (\n <OptionGroup\n key={option.label}\n label={option.label}\n options={option.options}\n />\n ) : (\n <Option\n suppressHydrationWarning\n key={`${option.value?.toString() ?? option.label?.toString()}`}\n {...option}\n />\n ),\n )}\n </u-datalist>\n {!!name && isMounted && (\n <select\n name={name}\n multiple={multiple}\n aria-hidden\n hidden\n suppressHydrationWarning\n />\n )}\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);\n\nCombobox.displayName = \"Combobox\";\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-combobox",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.3.0",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"homepage": "https://designsystem.sikt.no/",
|
|
6
6
|
"repository": {
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"@sikt/sds-core": "^5.3.0",
|
|
38
38
|
"@sikt/sds-form": "^4.1.1",
|
|
39
39
|
"@sikt/sds-icons": "^4.2.0",
|
|
40
|
-
"@u-elements/u-combobox": "^
|
|
41
|
-
"@u-elements/u-datalist": "^
|
|
40
|
+
"@u-elements/u-combobox": "^2.0.4",
|
|
41
|
+
"@u-elements/u-datalist": "^2.0.1"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"@types/react": "^18.0.0 || ^19.0.0",
|