@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 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-small);
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
  }
@@ -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":";AAAA,CAAC;AACC,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,sCAAoC;AACpC,sBAAoB,MAClB,IAAI,0BAA0B,EAAE,IAAI,6BAA6B,EAC/D,IAAI;AAER,wBAAsB,IAAI;AAC5B;AAEE,CAZD,aAYe;AACZ,uBAAqB,IAAI;AAEzB,eAAa;AACb,UAAQ,IAAI,mCAAmC,MAC7C,IAAI;AACN,iBAAe,IAAI;AACnB,UAAQ;AACR,WAAS;AACT,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,OAAK,IAAI;AACT,mBAAiB;AACjB,eAAa,IAAI;AACjB,WAAS,IAAI;AACb,gBAAc,IAAI;AAClB,UAAQ,EAAE,IAAI,0BAA0B,IAAI,0BAA0B;AAExE;AACA,CA/BD,aA+Be,IAAI;AACd,WAAS;AACX;AACF,CAlCD,aAkCe,IAAI;AACd,uBAAqB,KACnB;AAGF,WAAS,IAAI;AACf;AACF,QAAO,SAAU;AACb,GA1CL,aA0CmB,IAAI;AAChB,yBAAqB,KACnB;AAEJ;AACF;AACF,CAhDD,aAgDe,IAAI;AACd,uBAAqB,IAAI;AAC3B;AACF,CAnDD,aAmDe,IAAI;AACd,eAAa;AACb,oBAAkB,IAAI;AACtB,WAAS;AACT,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACjB,sBAAoB;AACZ,cAAY;AACpB,yBAAuB,OAAO;AACtB,iBAAe,OAAO;AAC9B,uBAAqB;AACb,eAAa;AACrB,qBAAmB,IAAI;AACf,aAAW,IAAI;AACvB,aAAW,QAAQ,MAAM,OAAO;AAChC,aAAW,IAAI;AACf,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,UAAQ,IAAI;AACZ,kBAAgB;AAClB;AAEF,CAAC;AACC,WAAS;AACT,aAAW;AACX,kBAAgB;AAClB;AACA,CALC,sBAKsB,KAAK,CAAC;AAC3B,CAND,sBAMwB,CAAC;AAExB;AAEF,CAVC,sBAUsB,KAAK,CAAC,gBAAgB;AAAM,CAVlD,sBAUyE,CAAC,qBAAuB;AAC5F,WAAS;AACX;AACJ,CAAC;AACC,sBAAoB;AACZ,cAAY;AACpB,oBAAkB;AAClB,oBAAkB,IAAI;AACtB,UAAQ,IAAI,yBAAyB,MAAM,IAAI;AAC/C,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,WAAS;AACT,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,WAAS,IAAI;AACb,iBAAe,KACb,IAAI,oBAAoB,EAAE,IAAI,sBAAsB,EAClD,IAAI;AAER,kBAAgB;AAChB,SAAO;AACT;AACA,CApBC,mBAoBmB;AAChB,2BAAyB,IAAI;AAE7B,WAAS,IAAI;AACb,kBAAgB;AAClB;AACF,QAAO,SAAU;AACb,GA3BH,mBA2BuB;AAClB,6BAAyB,IAAI;AAC/B;AACF;AACF,CA/BC,mBA+BmB;AAChB,2BAAyB,IAAI;AAC/B;AACF,CAlCC,mBAkCmB;AAChB;AAAA,IAAY;AAAA,MACV,MAAM;AAAA,MACN,IAAI,sCAAsC;AAAA,MAC1C,IAAI,uCAAuC,IAAI,kBAAkB;AAAA,MACjE,IAAI,gDACF,IAAI,kBAAkB;AAAA,MACxB,IAAI,gDACF,KAAK,IAAI,mBAAmB,EAAE;AAElC,UAAQ;AACV;AACF,CAAC;AACC,0BAAwB,IAAI;AAC5B,oBAAkB,IAAI;AACtB,kBAAgB,MACd,IAAI,sBAAsB,EAAE,IAAI,kBAAkB,EAChD,IAAI;AAGR,eAAa;AACb,oBAAkB,IAAI;AACtB,UAAQ,EAAE;AACV,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,UAAQ;AACR,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,mBAAiB;AACjB,eAAa,IAAI;AACjB,OAAK,IAAI;AACT,WAAS,IAAI,kBACX,KAAK,IAAI,kBAAkB,EAAE,IAAI;AASrC;AAEA,GAAG,CA/BF;AAgCG,kBAAgB;AAClB;AACF,CAAC;AACG,eAAa;AACb,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACjB,gBAAc,KAAK,IAAI,kBAAkB,EAAE;AAC3C,eAAa,KAAK,IAAI,kBAAkB,EAAE;AAC5C;AACF,CA1CC,oBA0CoB;AACjB,sCAAoC,KAClC;AAGF,WAAS,IAAI;AACf;AACF,QAAO,SAAU;AACb,GAlDH,oBAkDwB;AACnB,wCAAoC,KAClC;AAEJ;AACF;AACF,CAxDC,oBAwDoB;AACjB,sCAAoC,KAClC;AAEJ;AACF,CA7DC;AA+DC,cAAY;AACZ,eAAa,KAAK,KAAK,IAAI,oBAAoB,EAAE,IAAI,iBAAiB,EAAE;AAC5E;AACE,CAlEC,oBAkEoB,KAAK,CAAC,SAAS,EAAE,CAlErC;AAmEG,WAAS;AACX;AACF,CAAC;AACC,oBAAkB,IAAI;AACtB,cAAY,IAAI;AAChB,iBAAe,IAAI;AACnB,SAAO,KAAK,EAAE;AACd,cAAY,IAAI;AAChB,iBAAe,IAAI;AACnB,cAAY;AACZ,cAAY;AACZ,WAAS,IAAI;AACb,kBAAgB;AAChB,YAAU;AACV,WAAS,IAAI;AACf;AACA,CAdC,sBAcsB,KAAK,CAAC,6BAA6B,KAAK,CAAC;AAC5D,WAAS;AACX;AACF,CAjBC,sBAiBsB,KAAK,CAAC,QAAQ,KAAK,CAHb,6BAG2C,KAAK,CAAC;AAC1E,WAAS;AACX;AAEF,CAAC,4BAA4B,KAAK,KAAK,CAPV,6BAOwC,KAAK,CAAC;AACrE,WAAS;AACX;AAEJ,CAJC,6BAI6B,CAXD;AAYzB,UAAQ;AACR,WAAS;AACX;AACF,CARC,6BAQ6B,CAfD,6BAe+B,CAAC;AACvD,WAAS;AACX;AACJ,CAAC;AACG,WAAS;AACT,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,WAAS,IAAI;AACb,UAAQ,IAAI;AACZ,kBAAgB;AAChB,uBAAqB;AACb,eAAa;AACrB,iBAAe,IAAI,gCAAgC,MACjD,IAAI;AACR;AACF,CA/B6B;AAgCzB,WAAS,IAAI;AACb,UAAQ,IAAI;AACZ,iBAAe,IAAI;AACrB;AACF,CApC6B,6BAoCC;AACxB,WAAS;AACX;AACJ,CAvC6B,6BAuCC;AACxB,oBAAkB,KAChB;AAEF,WAAS,IAAI;AACf;AACJ,QAAO,SAAU;AACX,GA9CuB,6BA8CO;AAC5B,sBAAkB,KAChB;AAEJ;AACF;AACJ,CApD6B,6BAoDC;AACxB,oBAAkB,KAChB;AAEJ;AACJ,CAzD6B,6BAyDC,CAAC;AACzB,oBAAkB,IAAI;AACxB;AACJ,CAAC,sBAAsB,CA1MtB;AA2MC,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,sCAAoC,KAClC;AAEJ;AACA,CAPC,sBAOsB,CAjNtB,sBAiN6C;AAC1C,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;AACF,QAAO,SAAU;AACb,GAhBH,sBAgB0B,CA1N1B,sBA0NiD;AAC5C,6BAAyB,KACvB;AAEF,wCAAoC,KAClC;AAEJ;AACF;AACF,CAzBC,sBAyBsB,CAnOtB,sBAmO6C;AAC1C,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;AACF,CAjCC,sBAiCsB,CA3OtB,uBA2O8C,CAhL9C,oBAgLmE;AAC9D,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;AACJ,QAAO,SAAU;AACX,GA1CL,sBA0C4B,CApP5B,uBAoPoD,CAzLpD,oBAyLyE;AAClE,6BAAyB,KACvB;AAEF,wCAAoC,KAClC;AAEJ;AACF;","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
- interface ComboboxOptionGroupProps {
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: react.ForwardRefExoticComponent<ComboboxProps & react.RefAttributes<UHTMLComboboxElement>>;
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
- interface ComboboxOptionGroupProps {
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: react.ForwardRefExoticComponent<ComboboxProps & react.RefAttributes<UHTMLComboboxElement>>;
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:O,inputProps:H,lang:S="nb",selected:T,defaultSelected:k,onSelectedChange:C}=n,E=v(n,["className","errorText","helpText","label","aria-labelledby","multiple","options","name","inputProps","lang","selected","defaultSelected","onSelectedChange"]);const W=a.useRef(null),q=a.useId(),I="".concat(q,"-error-text"),P="".concat(q,"-help-text"),w="".concat(q,"-list"),A=(e=>_[e])(S),R=void 0!==T,F=a.useRef(C),L=a.useRef([]),[D,U]=a.useState(!1),[B,M]=a.useState(()=>{const e=h(k);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:""}})}),z=T?h(T):B;return a.useEffect(()=>{L.current=z},[z]),a.useEffect(()=>{U(!0)},[]),a.useEffect(()=>{F.current=C},[C]),a.useEffect(()=>{s&&("function"==typeof s?s(W.current):s.current=W.current)},[s]),a.useEffect(()=>{const e=W.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,L.current,p);if(p){const e=F.current;null==e||e(r),R||M(r)}else{const e=F.current;null==e||e(null!=r?r:null),R||M(h(r))}};return null==e||e.addEventListener("comboboxbeforeselect",r),()=>null==e?void 0:e.removeEventListener("comboboxbeforeselect",r)},[R,p]),l.jsxs("div",{className:r.clsx("sds-form-field",d&&"sds-form-field--error","sds-combobox",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:q}),l.jsxs("u-combobox",f(b(b({className:"sds-combobox__combobox","data-multiple":p,ref:W,suppressHydrationWarning:!0},A),E),{children:[z.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"},H),{id:q,list:w,"aria-labelledby":c})),l.jsx(m,{clearText:A["data-sr-clear"]}),l.jsx(x,{}),l.jsx("u-datalist",{suppressHydrationWarning:!0,className:"sds-combobox__datalist",id:w,hidden:!0,"data-sr-singular":A["data-sr-singular"],"data-sr-plural":A["data-sr-plural"],children:N.map(e=>{var r;return y(e)?l.jsx(j,{label:e.label,options:e.options},e.label):l.jsx(g,b({suppressHydrationWarning:!0},e),null==(r=e.value)?void 0:r.toString())})}),!!O&&D&&l.jsx("select",{name:O,multiple:p,"aria-hidden":!0,hidden:!0,suppressHydrationWarning:!0})]}))]}),i&&l.jsx(e.HelpText,{id:P,children:i}),d&&l.jsx(e.HelpText,{id:I,error:!0,children:d})]})});N.displayName="Combobox",exports.Combobox=N;//# sourceMappingURL=index.js.map
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 s,useEffect as o}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}))},H=({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;return p(k,h({"aria-describedby":a,suppressHydrationWarning:!0},e),null==(r=e.value)?void 0:r.toString())})]})},W=e=>"options"in e&&Array.isArray(e.options),P=(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 T={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"}},C=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:C,lang:S="nb",selected:w,defaultSelected:A,onSelectedChange:F}=i,I=N(i,["className","errorText","helpText","label","aria-labelledby","multiple","options","name","inputProps","lang","selected","defaultSelected","onSelectedChange"]);const L=l(null),E=n(),D="".concat(E,"-error-text"),U="".concat(E,"-help-text"),B="".concat(E,"-list"),M=(e=>T[e])(S),R=void 0!==w,q=l(F),z=l([]),[G,J]=s(!1),[K,Q]=s(()=>{const e=P(A);if(e.length>0)return e;var r;return(r=y,r.flatMap(e=>W(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:""}})}),V=w?P(w):K;return o(()=>{z.current=V},[V]),o(()=>{J(!0)},[]),o(()=>{q.current=F},[F]),o(()=>{d&&("function"==typeof d?d(L.current):d.current=L.current)},[d]),o(()=>{const e=L.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?P(r).filter(({value:e})=>e!==t.value):[...P(r),t]:e.isConnected?void 0:t}(e.detail,z.current,g);if(g){const e=q.current;null==e||e(r),R||Q(r)}else{const e=q.current;null==e||e(null!=r?r:null),R||Q(P(r))}};return null==e||e.addEventListener("comboboxbeforeselect",r),()=>null==e?void 0:e.removeEventListener("comboboxbeforeselect",r)},[R,g]),u("div",{className:a("sds-form-field",m&&"sds-form-field--error","sds-combobox",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:E}),u("u-combobox",_(h(h({className:"sds-combobox__combobox","data-multiple":g,ref:L,suppressHydrationWarning:!0},M),I),{children:[V.map(e=>p("data",{value:e.value,suppressHydrationWarning:!0,children:e.label},e.value)),p("input",_(h({suppressHydrationWarning:!0,className:"sds-combobox__input"},C),{id:E,list:B,"aria-labelledby":f})),p(j,{clearText:M["data-sr-clear"]}),p(O,{}),p("u-datalist",{suppressHydrationWarning:!0,className:"sds-combobox__datalist",id:B,hidden:!0,"data-sr-singular":M["data-sr-singular"],"data-sr-plural":M["data-sr-plural"],children:y.map(e=>{var r;return W(e)?p(H,{label:e.label,options:e.options},e.label):p(k,h({suppressHydrationWarning:!0},e),null==(r=e.value)?void 0:r.toString())})}),!!x&&G&&p("select",{name:x,multiple:g,"aria-hidden":!0,hidden:!0,suppressHydrationWarning:!0})]}))]}),b&&p(r,{id:U,children:b}),m&&p(r,{id:D,error:!0,children:m})]})});C.displayName="Combobox";export{C as Combobox};//# sourceMappingURL=index.mjs.map
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
@@ -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.2.1",
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": "^1.0.7",
41
- "@u-elements/u-datalist": "^1.1.0"
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",