@sikt/sds-combobox 2.1.1 → 2.2.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 +13 -0
- package/dist/index.css +12 -10
- package/dist/index.css.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [2.2.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@2.1.1...@sikt/sds-combobox@2.2.0) (2025-05-21)
|
|
6
|
+
|
|
7
|
+
### Features
|
|
8
|
+
|
|
9
|
+
- **combobox:** new typography & label, help, error order ([f40a0b9](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/f40a0b9878d78f3c89f928b5295e40171f7dcc2d))
|
|
10
|
+
- **combobox:** update with new typography ([895a286](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/895a286ade0a04ad04fe48f19ee94339cfc2f484))
|
|
11
|
+
|
|
12
|
+
### Bug Fixes
|
|
13
|
+
|
|
14
|
+
- **deps:** update @sikt/sds-core ([f1f7023](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/f1f7023a7e77980ef15993b0bdac76bff254b651))
|
|
15
|
+
- **deps:** update dependency react-aria-components to ^1.8.0 ([3f0110e](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/3f0110ef382a2cf69051e42904375d5574c7e9a4))
|
|
16
|
+
- update @sikt/sds-form@4.0.0 ([c9c1473](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/c9c1473524d32e0a7512644e105a346faaf1b109))
|
|
17
|
+
|
|
5
18
|
## [2.1.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@2.1.0...@sikt/sds-combobox@2.1.1) (2025-04-11)
|
|
6
19
|
|
|
7
20
|
### Bug Fixes
|
package/dist/index.css
CHANGED
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
border-radius: var(--sds-space-border-radius-medium);
|
|
24
24
|
color: var(--sds-color-text-primary);
|
|
25
25
|
flex: 1;
|
|
26
|
-
font-size: var(--sds-typography-body-fontsize
|
|
27
|
-
font-weight: var(--sds-typography-
|
|
28
|
-
line-height: var(--sds-typography-body-lineheight
|
|
26
|
+
font-size: var(--sds-typography-body-default-fontsize);
|
|
27
|
+
font-weight: var(--sds-typography-body-default-fontweight);
|
|
28
|
+
line-height: var(--sds-typography-body-default-lineheight);
|
|
29
29
|
padding: var(--combobox-padding);
|
|
30
30
|
}
|
|
31
31
|
.sds-combobox__combobox-input:hover,
|
|
@@ -41,15 +41,16 @@
|
|
|
41
41
|
outline-offset: 0;
|
|
42
42
|
}
|
|
43
43
|
.sds-combobox__combobox-button {
|
|
44
|
-
--combobox-button-size:
|
|
45
|
-
|
|
44
|
+
--combobox-button-font-size: var(--sds-typography-fontsize-700);
|
|
45
|
+
--combobox-button-size: calc( var(--combobox-button-font-size) + calc(var(--sds-space-padding-minimal) * 2) );
|
|
46
46
|
align-items: center;
|
|
47
|
-
justify-content: center;
|
|
48
47
|
border: 0;
|
|
49
48
|
background-color: var(--combobox-button-background-color);
|
|
50
49
|
border-radius: var(--sds-space-border-radius-minimal);
|
|
51
50
|
color: var(--combobox-button-color);
|
|
52
|
-
|
|
51
|
+
display: flex;
|
|
52
|
+
font-size: var(--combobox-button-font-size);
|
|
53
|
+
justify-content: center;
|
|
53
54
|
padding: var(--sds-space-padding-minimal);
|
|
54
55
|
position: absolute;
|
|
55
56
|
right: var(--combobox-padding);
|
|
@@ -77,11 +78,12 @@
|
|
|
77
78
|
width: var(--trigger-width);
|
|
78
79
|
}
|
|
79
80
|
.sds-combobox__header {
|
|
81
|
+
border-bottom: var(--sds-space-border-weight-thin) solid var(--sds-color-brand-neutral-subtle);
|
|
82
|
+
font-size: var(--sds-typography-editorial-headline-xxs-fontsize);
|
|
83
|
+
font-weight: var(--sds-typography-editorial-headline-xxs-fontweight);
|
|
84
|
+
line-height: var(--sds-typography-editorial-headline-xxs-lineheight);
|
|
80
85
|
padding: var(--sds-space-padding-small);
|
|
81
86
|
margin: var(--sds-space-gap-tiny);
|
|
82
|
-
font-size: var(--sds-typography-body-fontsize-regular);
|
|
83
|
-
font-weight: var(--sds-typography-weight-bold);
|
|
84
|
-
border-bottom: var(--sds-space-border-weight-thin) solid var(--sds-color-brand-neutral-subtle);
|
|
85
87
|
}
|
|
86
88
|
.sds-combobox__item {
|
|
87
89
|
padding: var(--sds-space-padding-small);
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/combobox.pcss"],"sourcesContent":[".sds-combobox {\n --combobox-border-color: var(--sds-color-interaction-neutral-strong-default);\n --combobox-border-width: var(--sds-space-border-weight-regular);\n --combobox-button-color: var(--sds-color-text-primary);\n --combobox-button-background-color: transparent;\n --combobox-padding: calc(\n var(--sds-space-padding-tiny) + var(--sds-space-padding-minimal) -\n var(--combobox-border-width)\n );\n\n display: inline-flex;\n flex-direction: column;\n width: 100%;\n}\n\n .sds-combobox__combobox {\n align-items: center;\n display: flex;\n position: relative;\n }\n\n .sds-combobox__combobox-input {\n -webkit-appearance: none;\n appearance: none;\n background-image: none;\n background-color: var(--sds-color-layout-background-default);\n border: var(--combobox-border-width) solid var(--combobox-border-color);\n border-radius: var(--sds-space-border-radius-medium);\n color: var(--sds-color-text-primary);\n flex: 1;\n font-size: var(--sds-typography-body-fontsize
|
|
1
|
+
{"version":3,"sources":["../src/combobox.pcss"],"sourcesContent":[".sds-combobox {\n --combobox-border-color: var(--sds-color-interaction-neutral-strong-default);\n --combobox-border-width: var(--sds-space-border-weight-regular);\n --combobox-button-color: var(--sds-color-text-primary);\n --combobox-button-background-color: transparent;\n --combobox-padding: calc(\n var(--sds-space-padding-tiny) + var(--sds-space-padding-minimal) -\n var(--combobox-border-width)\n );\n\n display: inline-flex;\n flex-direction: column;\n width: 100%;\n}\n\n .sds-combobox__combobox {\n align-items: center;\n display: flex;\n position: relative;\n }\n\n .sds-combobox__combobox-input {\n -webkit-appearance: none;\n appearance: none;\n background-image: none;\n background-color: var(--sds-color-layout-background-default);\n border: var(--combobox-border-width) solid var(--combobox-border-color);\n border-radius: var(--sds-space-border-radius-medium);\n color: var(--sds-color-text-primary);\n flex: 1;\n font-size: var(--sds-typography-body-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n line-height: var(--sds-typography-body-default-lineheight);\n padding: var(--combobox-padding);\n }\n\n .sds-combobox__combobox-input:hover,\n .sds-combobox__combobox-input:focus-visible {\n --combobox-border-color: var(\n --sds-color-interaction-neutral-strong-highlight\n );\n }\n\n .sds-combobox__combobox-input:active {\n --combobox-border-color: var(\n --sds-color-interaction-neutral-strong-pressed\n );\n }\n\n .sds-combobox__combobox-input[data-focus-visible],\n .sds-combobox__combobox-input:focus-visible {\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n\n .sds-combobox__combobox-button {\n --combobox-button-font-size: var(--sds-typography-fontsize-700);\n --combobox-button-size: calc(\n var(--combobox-button-font-size) +\n calc(var(--sds-space-padding-minimal) * 2)\n );\n\n align-items: center;\n border: 0;\n background-color: var(--combobox-button-background-color);\n border-radius: var(--sds-space-border-radius-minimal);\n color: var(--combobox-button-color);\n display: flex;\n font-size: var(--combobox-button-font-size);\n justify-content: center;\n padding: var(--sds-space-padding-minimal);\n position: absolute;\n right: var(--combobox-padding);\n width: var(--combobox-button-size);\n height: var(--combobox-button-size);\n }\n\n .sds-combobox__combobox-button:hover,\n .sds-combobox__combobox-button:focus-visible {\n --combobox-button-background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n }\n\n .sds-combobox__listbox {\n display: block;\n width: unset;\n max-height: 15rem;\n min-height: unset;\n overflow: auto;\n }\n\n .sds-combobox__popover {\n padding: var(--sds-space-padding-small);\n margin-top: var(--sds-space-gap-small);\n margin-bottom: var(--sds-space-gap-small);\n background-color: var(--sds-color-layout-background-default);\n box-shadow: var(--sds-effect-shadow-elevated-default);\n border-radius: var(--sds-space-border-radius-medium);\n\n /* INFO: this custom property is set by React Aria */\n width: var(--trigger-width);\n }\n\n .sds-combobox__header {\n border-bottom: var(--sds-space-border-weight-thin) solid\n var(--sds-color-brand-neutral-subtle);\n font-size: var(--sds-typography-editorial-headline-xxs-fontsize);\n font-weight: var(--sds-typography-editorial-headline-xxs-fontweight);\n line-height: var(--sds-typography-editorial-headline-xxs-lineheight);\n padding: var(--sds-space-padding-small);\n margin: var(--sds-space-gap-tiny);\n }\n\n .sds-combobox__item {\n padding: var(--sds-space-padding-small);\n margin: var(--sds-space-gap-tiny);\n border-radius: var(--sds-space-border-radius-medium);\n }\n\n .sds-combobox__item[data-focus-visible],\n .sds-combobox__item:focus-visible {\n outline: var(--sds-focus-outline);\n }\n\n .sds-combobox__item[data-hovered],\n .sds-combobox__item[data-focus-visible],\n .sds-combobox__item:hover,\n .sds-combobox__item:focus-visible {\n background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n }\n\n .sds-combobox__item[data-pressed],\n .sds-combobox__item:active {\n background-color: var(\n --sds-color-interaction-primary-transparent-pressed\n );\n }\n\n .sds-combobox__item[data-selected] {\n background-color: var(--sds-color-interaction-primary-strong-pressed);\n color: var(--sds-color-text-on-strong);\n }\n\n .sds-combobox--invalid .sds-combobox__combobox {\n --combobox-border-color: var(--sds-color-interaction-danger-strong-default);\n --combobox-button-color: var(--sds-color-text-on-strong);\n --combobox-button-background-color: var(\n --sds-color-interaction-danger-strong-default\n );\n }\n\n .sds-combobox--invalid .sds-combobox__combobox:hover,\n .sds-combobox--invalid .sds-combobox__combobox:focus-within {\n --combobox-border-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --combobox-button-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n }\n\n .sds-combobox--invalid .sds-combobox__combobox:active {\n --combobox-border-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n --combobox-button-background-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n }\n\n .sds-combobox--invalid .sds-combobox__combobox-button:hover,\n .sds-combobox--invalid .sds-combobox__combobox-button:focus {\n --combobox-border-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --combobox-button-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n }\n"],"mappings":";AAAA,CAAC;AACC,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,sCAAoC;AACpC,sBAAoB,MAClB,IAAI,0BAA0B,EAAE,IAAI,6BAA6B,EAC/D,IAAI;AAGR,WAAS;AACT,kBAAgB;AAChB,SAAO;AACT;AAEE,CAAC;AACC,eAAa;AACb,WAAS;AACT,YAAU;AACZ;AAEA,CAAC;AACG,sBAAoB;AACZ,cAAY;AACpB,oBAAkB;AAClB,oBAAkB,IAAI;AACtB,UAAQ,IAAI,yBAAyB,MAAM,IAAI;AAC/C,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,QAAM;AACN,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,WAAS,IAAI;AACf;AAEF,CAfC,4BAe4B;AACzB,CAhBH,4BAgBgC;AAC3B,2BAAyB,KACvB;AAEJ;AAEJ,CAtBC,4BAsB4B;AACvB,2BAAyB,KACvB;AAEJ;AAEJ,CA5BC,4BA4B4B,CAAC;AAC1B,CA7BH,4BA6BgC;AAC3B,WAAS,IAAI;AACb,kBAAgB;AAClB;AAEJ,CAAC;AACG,+BAA6B,IAAI;AACjC,0BAAwB,MACtB,IAAI,6BAA6B,EAC/B,KAAK,IAAI,6BAA6B,EAAE;AAG5C,eAAa;AACb,UAAQ;AACR,oBAAkB,IAAI;AACtB,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACjB,WAAS,IAAI;AACb,YAAU;AACV,SAAO,IAAI;AACX,SAAO,IAAI;AACX,UAAQ,IAAI;AACd;AAEF,CAtBC,6BAsB6B;AAC1B,CAvBH,6BAuBiC;AAC5B,sCAAoC,KAClC;AAEJ;AAEJ,CAAC;AACC,WAAS;AACT,SAAO;AACP,cAAY;AACZ,cAAY;AACZ,YAAU;AACZ;AAEA,CAAC;AACC,WAAS,IAAI;AACb,cAAY,IAAI;AAChB,iBAAe,IAAI;AACnB,oBAAkB,IAAI;AACtB,cAAY,IAAI;AAChB,iBAAe,IAAI;AAGnB,SAAO,IAAI;AACb;AAEA,CAAC;AACC,iBAAe,IAAI,gCAAgC,MACjD,IAAI;AACN,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,WAAS,IAAI;AACb,UAAQ,IAAI;AACd;AAEA,CAAC;AACC,WAAS,IAAI;AACb,UAAQ,IAAI;AACZ,iBAAe,IAAI;AACrB;AAEA,CANC,kBAMkB,CAAC;AAClB,CAPD,kBAOoB;AACjB,WAAS,IAAI;AACf;AAEF,CAXC,kBAWkB,CAAC;AAClB,CAZD,kBAYoB,CAAC;AACpB,CAbD,kBAaoB;AACnB,CAdD,kBAcoB;AACjB,oBAAkB,KAChB;AAEJ;AAEF,CApBC,kBAoBkB,CAAC;AAClB,CArBD,kBAqBoB;AACjB,oBAAkB,KAChB;AAEJ;AAEF,CA3BC,kBA2BkB,CAAC;AAChB,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACb;AAEF,CAAC,sBAAsB,CAnItB;AAoIC,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,sCAAoC,KAClC;AAEJ;AAEA,CARC,sBAQsB,CA3ItB,sBA2I6C;AAC5C,CATD,sBASwB,CA5IxB,sBA4I+C;AAC5C,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;AAEF,CAlBC,sBAkBsB,CArJtB,sBAqJ6C;AAC1C,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;AAEF,CA3BC,sBA2BsB,CAtHtB,6BAsHoD;AACjD,CA5BH,sBA4B0B,CAvH1B,6BAuHwD;AACnD,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("@sikt/sds-form"),
|
|
1
|
+
"use strict";var e=require("@sikt/sds-form"),r=require("@sikt/sds-icons"),o=require("clsx/lite"),s=require("react"),a=require("react-aria-components"),t=require("react/jsx-runtime"),l=Object.defineProperty,i=Object.defineProperties,c=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,d=(e,r,o)=>r in e?l(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,m=(e,r)=>{for(var o in r||(r={}))b.call(r,o)&&d(e,o,r[o]);if(n)for(var o of n(r))x.call(r,o)&&d(e,o,r[o]);return e},p=(e,r)=>i(e,c(r)),u=(e,r)=>{var o={};for(var s in e)b.call(e,s)&&r.indexOf(s)<0&&(o[s]=e[s]);if(null!=e&&n)for(var s of n(e))r.indexOf(s)<0&&x.call(e,s)&&(o[s]=e[s]);return o};exports.Combobox=function(l){var i=l,{children:c,className:n,errorText:b,helpText:x,label:d,"aria-labelledby":h,menuTrigger:f="focus",popoverProps:j}=i,v=u(i,["children","className","errorText","helpText","label","aria-labelledby","menuTrigger","popoverProps"]);const _=s.useId(),y="".concat(_,"-error-text"),N="".concat(_,"-help-text"),O=[b&&y,x&&N].filter(Boolean).join(" ")||void 0;return t.jsx(e.FormField,{className:o.clsx("sds-combobox",b&&"sds-combobox--invalid",n),label:d,errorText:b,errorTextId:y,helpText:x,helpTextId:N,htmlFor:_,children:t.jsxs(a.ComboBox,p(m({menuTrigger:f,id:_,"aria-label":d,"aria-labelledby":h},v),{children:[t.jsxs("div",{className:"sds-combobox__combobox",children:[t.jsx(a.Input,{className:"sds-combobox__combobox-input","aria-describedby":O,"aria-invalid":Boolean(b),"aria-errormessage":b?y:void 0}),t.jsx(a.Button,{className:"sds-combobox__combobox-button",children:t.jsx(r.ExpandShowAltIcon,{})})]}),t.jsx(a.Popover,p(m({className:"sds-combobox__popover"},j),{children:t.jsx(a.ListBox,{className:"sds-combobox__listbox",children:c})}))]}))})},exports.ComboboxHeader=function({children:e}){return t.jsx(a.Header,{className:"sds-combobox__header",children:e})},exports.ComboboxItem=function(e){var r=e,{className:s}=r,l=u(r,["className"]);return t.jsx(a.ListBoxItem,m({className:o.clsx("sds-combobox__item",s)},l))},exports.ComboboxSection=function({children:e}){return t.jsx(a.ListBoxSection,{children:e})};//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Combobox.tsx"],"names":["useId","
|
|
1
|
+
{"version":3,"sources":["../src/Combobox.tsx"],"names":["useId","jsx","FormField","clsx","jsxs","AriaCombobox","Input","Button","ExpandShowAltIcon","Popover","ListBox","ListBoxItem","Header","ListBoxSection"],"mappings":"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","file":"index.js","sourcesContent":["import { FormField } from \"@sikt/sds-form\";\nimport { ExpandShowAltIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, useId } from \"react\";\nimport {\n ComboBox as AriaCombobox,\n ComboBoxProps as AriaComboboxProps,\n Button,\n Header,\n Input,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxSection,\n Popover,\n PopoverProps,\n} from \"react-aria-components\";\nimport \"./combobox.pcss\";\n\ninterface ComboboxBaseProps<T extends object>\n extends Omit<\n AriaComboboxProps<T>,\n \"children\" | \"menuTrigger\" | \"aria-label\" | \"aria-labelledby\"\n > {\n children: React.ReactNode | ((item: T) => React.ReactNode);\n className?: string;\n errorText?: string;\n helpText?: string;\n menuTrigger?: \"focus\" | \"manual\" | \"input\";\n popoverProps?: PopoverProps;\n}\n\nexport type ComboboxProps<T extends object> = ComboboxBaseProps<T> &\n (\n | {\n label: string;\n \"aria-labelledby\"?: never;\n }\n | {\n label?: never;\n \"aria-labelledby\": string;\n }\n );\n\nexport function Combobox<T extends object>({\n children,\n className,\n errorText,\n helpText,\n label,\n \"aria-labelledby\": ariaLabelledBy,\n menuTrigger = \"focus\",\n popoverProps,\n ...props\n}: ComboboxProps<T>) {\n const id = useId();\n const errorTextId = `${id}-error-text`;\n const helpTextId = `${id}-help-text`;\n\n const ariaDescribedBy =\n [errorText && errorTextId, helpText && helpTextId]\n .filter(Boolean)\n .join(\" \") || undefined;\n\n return (\n <FormField\n className={clsx(\n \"sds-combobox\",\n errorText && \"sds-combobox--invalid\",\n className,\n )}\n label={label}\n errorText={errorText}\n errorTextId={errorTextId}\n helpText={helpText}\n helpTextId={helpTextId}\n htmlFor={id}\n >\n <AriaCombobox\n menuTrigger={menuTrigger}\n id={id}\n aria-label={label}\n aria-labelledby={ariaLabelledBy}\n {...props}\n >\n <div className=\"sds-combobox__combobox\">\n <Input\n className=\"sds-combobox__combobox-input\"\n aria-describedby={ariaDescribedBy}\n aria-invalid={Boolean(errorText)}\n aria-errormessage={errorText ? errorTextId : undefined}\n />\n <Button className=\"sds-combobox__combobox-button\">\n <ExpandShowAltIcon />\n </Button>\n </div>\n <Popover className=\"sds-combobox__popover\" {...popoverProps}>\n <ListBox className=\"sds-combobox__listbox\">{children}</ListBox>\n </Popover>\n </AriaCombobox>\n </FormField>\n );\n}\n\nexport function ComboboxItem({\n className,\n ...props\n}: ListBoxItemProps & { className?: string }) {\n return (\n <ListBoxItem className={clsx(\"sds-combobox__item\", className)} {...props} />\n );\n}\n\nexport function ComboboxHeader({ children }: { children: ReactNode }) {\n return <Header className=\"sds-combobox__header\">{children}</Header>;\n}\n\nexport function ComboboxSection({ children }: { children: ReactNode }) {\n return <ListBoxSection>{children}</ListBoxSection>;\n}\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{FormField as e}from"@sikt/sds-form";import{ExpandShowAltIcon as r}from"@sikt/sds-icons";import{clsx as o}from"clsx/lite";import{useId as
|
|
1
|
+
import{FormField as e}from"@sikt/sds-form";import{ExpandShowAltIcon as r}from"@sikt/sds-icons";import{clsx as o}from"clsx/lite";import{useId as a}from"react";import{ComboBox as l,Input as t,Button as s,Popover as c,ListBox as i,ListBoxItem as n,Header as b,ListBoxSection as m}from"react-aria-components";import{jsx as d,jsxs as p}from"react/jsx-runtime";var x=Object.defineProperty,f=Object.defineProperties,u=Object.getOwnPropertyDescriptors,h=Object.getOwnPropertySymbols,v=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable,y=(e,r,o)=>r in e?x(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,N=(e,r)=>{for(var o in r||(r={}))v.call(r,o)&&y(e,o,r[o]);if(h)for(var o of h(r))_.call(r,o)&&y(e,o,r[o]);return e},O=(e,r)=>f(e,u(r)),T=(e,r)=>{var o={};for(var a in e)v.call(e,a)&&r.indexOf(a)<0&&(o[a]=e[a]);if(null!=e&&h)for(var a of h(e))r.indexOf(a)<0&&_.call(e,a)&&(o[a]=e[a]);return o};function g(n){var b=n,{children:m,className:x,errorText:f,helpText:u,label:h,"aria-labelledby":v,menuTrigger:_="focus",popoverProps:y}=b,g=T(b,["children","className","errorText","helpText","label","aria-labelledby","menuTrigger","popoverProps"]);const j=a(),P="".concat(j,"-error-text"),w="".concat(j,"-help-text"),I=[f&&P,u&&w].filter(Boolean).join(" ")||void 0;return d(e,{className:o("sds-combobox",f&&"sds-combobox--invalid",x),label:h,errorText:f,errorTextId:P,helpText:u,helpTextId:w,htmlFor:j,children:p(l,O(N({menuTrigger:_,id:j,"aria-label":h,"aria-labelledby":v},g),{children:[p("div",{className:"sds-combobox__combobox",children:[d(t,{className:"sds-combobox__combobox-input","aria-describedby":I,"aria-invalid":Boolean(f),"aria-errormessage":f?P:void 0}),d(s,{className:"sds-combobox__combobox-button",children:d(r,{})})]}),d(c,O(N({className:"sds-combobox__popover"},y),{children:d(i,{className:"sds-combobox__listbox",children:m})}))]}))})}function j(e){var r=e,{className:a}=r,l=T(r,["className"]);return d(n,N({className:o("sds-combobox__item",a)},l))}function P({children:e}){return d(b,{className:"sds-combobox__header",children:e})}function w({children:e}){return d(m,{children:e})}export{g as Combobox,P as ComboboxHeader,j as ComboboxItem,w as ComboboxSection};//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Combobox.tsx"],"names":["AriaCombobox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CO,SAAS,SAA2B,EAUtB,EAAA;AAVsB,EACzC,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,iBAAmB,EAAA,cAAA;AAAA,IACnB,WAAc,GAAA,OAAA;AAAA,IACd;AAAA,GApDF,GA4C2C,EAStC,EAAA,KAAA,GAAA,SAAA,CATsC,EAStC,EAAA;AAAA,IARH,UAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,iBAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,MAAM,KAAK,KAAM,EAAA;AACjB,EAAM,MAAA,UAAA,GAAa,GAAG,MAAE,CAAA,EAAA,EAAA,YAAA,CAAA;
|
|
1
|
+
{"version":3,"sources":["../src/Combobox.tsx"],"names":["AriaCombobox"],"mappings":"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","file":"index.mjs","sourcesContent":["import { FormField } from \"@sikt/sds-form\";\nimport { ExpandShowAltIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, useId } from \"react\";\nimport {\n ComboBox as AriaCombobox,\n ComboBoxProps as AriaComboboxProps,\n Button,\n Header,\n Input,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxSection,\n Popover,\n PopoverProps,\n} from \"react-aria-components\";\nimport \"./combobox.pcss\";\n\ninterface ComboboxBaseProps<T extends object>\n extends Omit<\n AriaComboboxProps<T>,\n \"children\" | \"menuTrigger\" | \"aria-label\" | \"aria-labelledby\"\n > {\n children: React.ReactNode | ((item: T) => React.ReactNode);\n className?: string;\n errorText?: string;\n helpText?: string;\n menuTrigger?: \"focus\" | \"manual\" | \"input\";\n popoverProps?: PopoverProps;\n}\n\nexport type ComboboxProps<T extends object> = ComboboxBaseProps<T> &\n (\n | {\n label: string;\n \"aria-labelledby\"?: never;\n }\n | {\n label?: never;\n \"aria-labelledby\": string;\n }\n );\n\nexport function Combobox<T extends object>({\n children,\n className,\n errorText,\n helpText,\n label,\n \"aria-labelledby\": ariaLabelledBy,\n menuTrigger = \"focus\",\n popoverProps,\n ...props\n}: ComboboxProps<T>) {\n const id = useId();\n const errorTextId = `${id}-error-text`;\n const helpTextId = `${id}-help-text`;\n\n const ariaDescribedBy =\n [errorText && errorTextId, helpText && helpTextId]\n .filter(Boolean)\n .join(\" \") || undefined;\n\n return (\n <FormField\n className={clsx(\n \"sds-combobox\",\n errorText && \"sds-combobox--invalid\",\n className,\n )}\n label={label}\n errorText={errorText}\n errorTextId={errorTextId}\n helpText={helpText}\n helpTextId={helpTextId}\n htmlFor={id}\n >\n <AriaCombobox\n menuTrigger={menuTrigger}\n id={id}\n aria-label={label}\n aria-labelledby={ariaLabelledBy}\n {...props}\n >\n <div className=\"sds-combobox__combobox\">\n <Input\n className=\"sds-combobox__combobox-input\"\n aria-describedby={ariaDescribedBy}\n aria-invalid={Boolean(errorText)}\n aria-errormessage={errorText ? errorTextId : undefined}\n />\n <Button className=\"sds-combobox__combobox-button\">\n <ExpandShowAltIcon />\n </Button>\n </div>\n <Popover className=\"sds-combobox__popover\" {...popoverProps}>\n <ListBox className=\"sds-combobox__listbox\">{children}</ListBox>\n </Popover>\n </AriaCombobox>\n </FormField>\n );\n}\n\nexport function ComboboxItem({\n className,\n ...props\n}: ListBoxItemProps & { className?: string }) {\n return (\n <ListBoxItem className={clsx(\"sds-combobox__item\", className)} {...props} />\n );\n}\n\nexport function ComboboxHeader({ children }: { children: ReactNode }) {\n return <Header className=\"sds-combobox__header\">{children}</Header>;\n}\n\nexport function ComboboxSection({ children }: { children: ReactNode }) {\n return <ListBoxSection>{children}</ListBoxSection>;\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-combobox",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"homepage": "https://designsystem.sikt.no/",
|
|
6
6
|
"repository": {
|
|
@@ -34,10 +34,10 @@
|
|
|
34
34
|
"build": "tsup"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@sikt/sds-core": "^4.
|
|
38
|
-
"@sikt/sds-form": "^
|
|
37
|
+
"@sikt/sds-core": "^4.6.0",
|
|
38
|
+
"@sikt/sds-form": "^4.0.0",
|
|
39
39
|
"@sikt/sds-icons": "^3.0.0",
|
|
40
|
-
"react-aria-components": "^1.
|
|
40
|
+
"react-aria-components": "^1.8.0"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"@types/react": "^18.0.0 || ^19.0.0",
|