@sikt/sds-combobox 1.0.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/dist/index.css +5 -3
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +10 -4
- package/dist/index.d.ts +10 -4
- 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 +22 -13
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,32 @@
|
|
|
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.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@1.0.1...@sikt/sds-combobox@2.0.0) (2024-09-23)
|
|
6
|
+
|
|
7
|
+
### ⚠ BREAKING CHANGES
|
|
8
|
+
|
|
9
|
+
- allow one of label or aria-labelledby for input components
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
- allow one of label or aria-labelledby for input components ([edcfefb](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/edcfefbda41a4781ea5fbda0f24e7743c1d165e2))
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
- **deps:** change peer deps clsx to ^2.1.0 ([9eb76f1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/9eb76f1207a2ec8d19fda646c9bc26d5922b1839))
|
|
18
|
+
- **deps:** update @sikt/sds-form@3.0.0 ([6859894](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/68598941f873ffede6a5d18936279da5b98e5af2))
|
|
19
|
+
- **deps:** update dependency react-aria-components to ^1.3.1 ([d691705](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/d6917053e05cc53aaddd2b1ff665b3b73a7761b2))
|
|
20
|
+
|
|
21
|
+
## [1.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@1.0.0...@sikt/sds-combobox@1.0.1) (2024-07-03)
|
|
22
|
+
|
|
23
|
+
### Bug Fixes
|
|
24
|
+
|
|
25
|
+
- **combobox:** safari outline styling ([bc9e67a](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/bc9e67a301c5742f5ae3aa7ecdcfb5d45d6724dd))
|
|
26
|
+
- **deps:** update @sikt/sds-core to ^3.0.2 ([a55b4c2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/a55b4c2f0bad4dfe80b26c0f7102622b4257d8b2))
|
|
27
|
+
- **deps:** update @sikt/sds-tokens to ^1.0.1 ([3618147](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/3618147fbc51048b8f63484b63cd2fa6e76cbbf4))
|
|
28
|
+
- **deps:** update dependency react-aria-components to ^1.2.0 ([cf370da](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/cf370daddb3e44eef357c9657736ab2961793cd9))
|
|
29
|
+
- package json exports ([b62fed7](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/b62fed7bfa459c618c016f39c960dffda037155f))
|
|
30
|
+
|
|
5
31
|
## 1.0.0 (2024-04-17)
|
|
6
32
|
|
|
7
33
|
### Features
|
package/dist/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* combobox.pcss */
|
|
1
|
+
/* src/combobox.pcss */
|
|
2
2
|
.sds-combobox {
|
|
3
3
|
--combobox-border-color: var(--sds-color-interaction-neutral-strong-default);
|
|
4
4
|
--combobox-border-width: var(--sds-space-border-weight-regular);
|
|
@@ -35,8 +35,10 @@
|
|
|
35
35
|
.sds-combobox__combobox-input:active {
|
|
36
36
|
--combobox-border-color: var( --sds-color-interaction-neutral-strong-pressed );
|
|
37
37
|
}
|
|
38
|
+
.sds-combobox__combobox-input[data-focus-visible],
|
|
38
39
|
.sds-combobox__combobox-input:focus-visible {
|
|
39
40
|
outline: var(--sds-focus-outline);
|
|
41
|
+
outline-offset: 0;
|
|
40
42
|
}
|
|
41
43
|
.sds-combobox__combobox-button {
|
|
42
44
|
--combobox-button-size: calc( var(--sds-base-size-m) + calc(var(--sds-space-padding-minimal) * 2) );
|
|
@@ -67,17 +69,17 @@
|
|
|
67
69
|
}
|
|
68
70
|
.sds-combobox__popover {
|
|
69
71
|
padding: var(--sds-space-padding-small);
|
|
70
|
-
width: var(--trigger-width);
|
|
71
72
|
margin-top: var(--sds-space-gap-small);
|
|
72
73
|
margin-bottom: var(--sds-space-gap-small);
|
|
73
74
|
background-color: var(--sds-color-layout-background-default);
|
|
74
75
|
box-shadow: var(--sds-effect-shadow-elevated-default);
|
|
75
76
|
border-radius: var(--sds-space-border-radius-medium);
|
|
77
|
+
width: var(--trigger-width);
|
|
76
78
|
}
|
|
77
79
|
.sds-combobox__header {
|
|
78
80
|
padding: var(--sds-space-padding-small);
|
|
79
81
|
margin: var(--sds-space-gap-tiny);
|
|
80
|
-
font-size: var(--sds-typography-body-fontsize-
|
|
82
|
+
font-size: var(--sds-typography-body-fontsize-regular);
|
|
81
83
|
font-weight: var(--sds-typography-weight-bold);
|
|
82
84
|
border-bottom: var(--sds-space-border-weight-thin) solid var(--sds-color-brand-neutral-subtle);
|
|
83
85
|
}
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../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-regular);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-regular);\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:focus-visible {\n outline: var(--sds-focus-outline);\n }\n\n .sds-combobox__combobox-button {\n --combobox-button-size: calc(\n var(--sds-base-size-m) + calc(var(--sds-space-padding-minimal) * 2)\n );\n\n display: flex;\n align-items: center;\n justify-content: 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 font-size: var(--sds-base-size-m);\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 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
|
|
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-regular);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-regular);\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-size: calc(\n var(--sds-base-size-m) + calc(var(--sds-space-padding-minimal) * 2)\n );\n\n display: flex;\n align-items: center;\n justify-content: 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 font-size: var(--sds-base-size-m);\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 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 padding: var(--sds-space-padding-small);\n margin: var(--sds-space-gap-tiny);\n font-size: var(--sds-typography-body-fontsize-regular);\n font-weight: var(--sds-typography-weight-bold);\n border-bottom: var(--sds-space-border-weight-thin) solid\n var(--sds-color-brand-neutral-subtle);\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"],"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,0BAAwB,MACtB,IAAI,mBAAmB,EAAE,KAAK,IAAI,6BAA6B,EAAE;AAGnE,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,UAAQ;AACR,oBAAkB,IAAI;AACtB,iBAAe,IAAI;AACnB,SAAO,IAAI;AACX,aAAW,IAAI;AACf,WAAS,IAAI;AACb,YAAU;AACV,SAAO,IAAI;AACX,SAAO,IAAI;AACX,UAAQ,IAAI;AACd;AAEF,CApBC,6BAoB6B;AAC1B,CArBH,6BAqBiC;AAC5B,oBAAkB,KAChB;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,WAAS,IAAI;AACb,UAAQ,IAAI;AACZ,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,iBAAe,IAAI,gCAAgC,MACjD,IAAI;AACR;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,CAhItB;AAiIC,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,sCAAoC,KAClC;AAEJ;AAEA,CARC,sBAQsB,CAxItB,sBAwI6C;AAC5C,CATD,sBASwB,CAzIxB,sBAyI+C;AAC5C,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;AAEF,CAlBC,sBAkBsB,CAlJtB,sBAkJ6C;AAC1C,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ListBoxItemProps, ComboBoxProps } from 'react-aria-components';
|
|
4
4
|
|
|
5
|
-
interface
|
|
5
|
+
interface ComboboxBaseProps<T extends object> extends Omit<ComboBoxProps<T>, "children" | "menuTrigger" | "aria-label" | "aria-labelledby"> {
|
|
6
6
|
children: React.ReactNode | ((item: T) => React.ReactNode);
|
|
7
|
-
label: string;
|
|
8
7
|
className?: string;
|
|
9
8
|
errorText?: string;
|
|
10
9
|
helpText?: string;
|
|
11
10
|
menuTrigger?: "focus" | "manual" | "input";
|
|
12
11
|
}
|
|
13
|
-
|
|
12
|
+
type ComboboxProps<T extends object> = ComboboxBaseProps<T> & ({
|
|
13
|
+
label: string;
|
|
14
|
+
"aria-labelledby"?: never;
|
|
15
|
+
} | {
|
|
16
|
+
label?: never;
|
|
17
|
+
"aria-labelledby": string;
|
|
18
|
+
});
|
|
19
|
+
declare function Combobox<T extends object>({ children, className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, menuTrigger, ...props }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
|
|
14
20
|
declare function ComboboxItem({ className, ...props }: ListBoxItemProps & {
|
|
15
21
|
className?: string;
|
|
16
22
|
}): react_jsx_runtime.JSX.Element;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { ListBoxItemProps, ComboBoxProps } from 'react-aria-components';
|
|
4
4
|
|
|
5
|
-
interface
|
|
5
|
+
interface ComboboxBaseProps<T extends object> extends Omit<ComboBoxProps<T>, "children" | "menuTrigger" | "aria-label" | "aria-labelledby"> {
|
|
6
6
|
children: React.ReactNode | ((item: T) => React.ReactNode);
|
|
7
|
-
label: string;
|
|
8
7
|
className?: string;
|
|
9
8
|
errorText?: string;
|
|
10
9
|
helpText?: string;
|
|
11
10
|
menuTrigger?: "focus" | "manual" | "input";
|
|
12
11
|
}
|
|
13
|
-
|
|
12
|
+
type ComboboxProps<T extends object> = ComboboxBaseProps<T> & ({
|
|
13
|
+
label: string;
|
|
14
|
+
"aria-labelledby"?: never;
|
|
15
|
+
} | {
|
|
16
|
+
label?: never;
|
|
17
|
+
"aria-labelledby": string;
|
|
18
|
+
});
|
|
19
|
+
declare function Combobox<T extends object>({ children, className, errorText, helpText, label, "aria-labelledby": ariaLabelledBy, menuTrigger, ...props }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
|
|
14
20
|
declare function ComboboxItem({ className, ...props }: ListBoxItemProps & {
|
|
15
21
|
className?: string;
|
|
16
22
|
}): react_jsx_runtime.JSX.Element;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("
|
|
1
|
+
"use strict";var e=require("@sikt/sds-form"),o=require("@sikt/sds-icons"),s=require("clsx/lite"),r=require("react"),c=require("react-aria-components"),t=require("react/jsx-runtime");exports.Combobox=function({children:i,className:l,errorText:a,helpText:n,label:x,"aria-labelledby":b,menuTrigger:m="focus",...d}){const u=r.useId(),h="".concat(u,"-help-text"),[p,_]=r.useState(!1);return t.jsx(e.FormField,{className:s.clsx("sds-combobox",a&&"sds-combobox--invalid",l),label:x,errorText:a,helpText:p?"":n,htmlFor:u,helpTextId:h,children:t.jsxs(c.ComboBox,{menuTrigger:m,onOpenChange:function(e){_(e)},id:u,"aria-label":x,"aria-labelledby":b,...d,children:[t.jsxs("div",{className:"sds-combobox__combobox",children:[t.jsx(c.Input,{className:"sds-combobox__combobox-input"}),t.jsx(c.Button,{className:"sds-combobox__combobox-button",children:t.jsx(o.CaretCircleDownIcon,{})})]}),t.jsx(c.Popover,{className:"sds-combobox__popover",children:t.jsx(c.ListBox,{className:"sds-combobox__listbox",children:i})})]})})},exports.ComboboxHeader=function({children:e}){return t.jsx(c.Header,{className:"sds-combobox__header",children:e})},exports.ComboboxItem=function({className:e,...o}){return t.jsx(c.ListBoxItem,{className:s.clsx("sds-combobox__item",e),...o})},exports.ComboboxSection=function({children:e}){return t.jsx(c.Section,{children:e})};//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../Combobox.tsx"],"names":[
|
|
1
|
+
{"version":3,"sources":["../src/Combobox.tsx"],"names":["useId","useState","jsx","FormField","clsx","jsxs","AriaCombobox","Input","Button","CaretCircleDownIcon","Popover","ListBox","ListBoxItem","Header","Section"],"mappings":";;;;;;;;;;AA0CO,SAAS,QAA2B,CAAA;AAAA,EACzC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,iBAAmB,EAAA,cAAA;AAAA,EACnB,WAAc,GAAA,OAAA;AAAA,EACd,GAAG,KAAA;AACL,CAAqB,EAAA;AACnB,EAAA,MAAM,KAAKA,WAAM,EAAA,CAAA;AACjB,EAAM,MAAA,UAAA,GAAa,GAAG,MAAE,CAAA,EAAA,EAAA,YAAA,CAAA,CAAA;AACxB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAEtC,EAAA,SAAS,oBAAoB,MAAiB,EAAA;AAC5C,IAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAAA,GAChB;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,iBAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,cAAA;AAAA,QACA,SAAa,IAAA,uBAAA;AAAA,QACb,SAAA;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA,EAAU,OAAO,EAAK,GAAA,QAAA;AAAA,MACtB,OAAS,EAAA,EAAA;AAAA,MACT,UAAA;AAAA,MAEA,QAAA,kBAAAC,eAAA;AAAA,QAACC,4BAAA;AAAA,QAAA;AAAA,UACC,WAAA;AAAA,UACA,YAAc,EAAA,mBAAA;AAAA,UACd,EAAA;AAAA,UACA,YAAY,EAAA,KAAA;AAAA,UACZ,iBAAiB,EAAA,cAAA;AAAA,UAChB,GAAG,KAAA;AAAA,UAEJ,QAAA,EAAA;AAAA,4BAACD,eAAA,CAAA,KAAA,EAAA,EAAI,WAAU,wBACb,EAAA,QAAA,EAAA;AAAA,8BAACH,cAAA,CAAAK,yBAAA,EAAA,EAAM,WAAU,8BAA+B,EAAA,CAAA;AAAA,6CAC/CC,0BAAO,EAAA,EAAA,SAAA,EAAU,+BAChB,EAAA,QAAA,kBAAAN,cAAA,CAACO,gCAAoB,CACvB,EAAA,CAAA;AAAA,aACF,EAAA,CAAA;AAAA,4BACAP,cAAA,CAACQ,+BAAQ,SAAU,EAAA,uBAAA,EACjB,yCAACC,2BAAQ,EAAA,EAAA,SAAA,EAAU,uBAAyB,EAAA,QAAA,EAAS,CACvD,EAAA,CAAA;AAAA,WAAA;AAAA,SAAA;AAAA,OACF;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAA;AAEO,SAAS,YAAa,CAAA;AAAA,EAC3B,SAAA;AAAA,EACA,GAAG,KAAA;AACL,CAA8C,EAAA;AAC5C,EACE,uBAAAT,cAAA,CAACU,mCAAY,SAAW,EAAAR,SAAA,CAAK,sBAAsB,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA,CAAA,CAAA;AAE9E,CAAA;AAEO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAqC,EAAA;AACpE,EAAA,uBAAQF,cAAA,CAAAW,0BAAA,EAAA,EAAO,SAAU,EAAA,sBAAA,EAAwB,QAAS,EAAA,CAAA,CAAA;AAC5D,CAAA;AAEO,SAAS,eAAA,CAAgB,EAAE,QAAA,EAAqC,EAAA;AACrE,EAAO,uBAAAX,cAAA,CAACY,+BAAS,QAAS,EAAA,CAAA,CAAA;AAC5B","file":"index.js","sourcesContent":["import { FormField } from \"@sikt/sds-form\";\nimport { CaretCircleDownIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, useId, useState } from \"react\";\nimport {\n ComboBox as AriaCombobox,\n ComboBoxProps as AriaComboboxProps,\n Button,\n Header,\n Input,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n Popover,\n Section,\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}\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 ...props\n}: ComboboxProps<T>) {\n const id = useId();\n const helpTextId = `${id}-help-text`;\n const [open, setOpen] = useState(false);\n\n function onOpenChangeHandler(isOpen: boolean) {\n setOpen(isOpen);\n }\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 helpText={open ? \"\" : helpText}\n htmlFor={id}\n helpTextId={helpTextId}\n >\n <AriaCombobox\n menuTrigger={menuTrigger}\n onOpenChange={onOpenChangeHandler}\n id={id}\n aria-label={label}\n aria-labelledby={ariaLabelledBy}\n {...props}\n >\n <div className=\"sds-combobox__combobox\">\n <Input className=\"sds-combobox__combobox-input\" />\n <Button className=\"sds-combobox__combobox-button\">\n <CaretCircleDownIcon />\n </Button>\n </div>\n <Popover className=\"sds-combobox__popover\">\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 <Section>{children}</Section>;\n}\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import o from"clsx";import{useId as
|
|
1
|
+
import{FormField as o}from"@sikt/sds-form";import{CaretCircleDownIcon as e}from"@sikt/sds-icons";import{clsx as r}from"clsx/lite";import{useId as s,useState as c}from"react";import{ComboBox as l,Input as m,Button as a,Popover as i,ListBox as n,ListBoxItem as t,Header as b,Section as d}from"react-aria-components";import{jsx as x,jsxs as h}from"react/jsx-runtime";function p({children:t,className:b,errorText:d,helpText:p,label:u,"aria-labelledby":_,menuTrigger:f="focus",...N}){const T=s(),g="".concat(T,"-help-text"),[v,k]=c(!1);return x(o,{className:r("sds-combobox",d&&"sds-combobox--invalid",b),label:u,errorText:d,helpText:v?"":p,htmlFor:T,helpTextId:g,children:h(l,{menuTrigger:f,onOpenChange:function(o){k(o)},id:T,"aria-label":u,"aria-labelledby":_,...N,children:[h("div",{className:"sds-combobox__combobox",children:[x(m,{className:"sds-combobox__combobox-input"}),x(a,{className:"sds-combobox__combobox-button",children:x(e,{})})]}),x(i,{className:"sds-combobox__popover",children:x(n,{className:"sds-combobox__listbox",children:t})})]})})}function u({className:o,...e}){return x(t,{className:r("sds-combobox__item",o),...e})}function _({children:o}){return x(b,{className:"sds-combobox__header",children:o})}function f({children:o}){return x(d,{children:o})}export{p as Combobox,_ as ComboboxHeader,u as ComboboxItem,f as ComboboxSection};//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../Combobox.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/Combobox.tsx"],"names":["AriaCombobox"],"mappings":";;;;;;;;AA0CO,SAAS,QAA2B,CAAA;AAAA,EACzC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,iBAAmB,EAAA,cAAA;AAAA,EACnB,WAAc,GAAA,OAAA;AAAA,EACd,GAAG,KAAA;AACL,CAAqB,EAAA;AACnB,EAAA,MAAM,KAAK,KAAM,EAAA,CAAA;AACjB,EAAM,MAAA,UAAA,GAAa,GAAG,MAAE,CAAA,EAAA,EAAA,YAAA,CAAA,CAAA;AACxB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAEtC,EAAA,SAAS,oBAAoB,MAAiB,EAAA;AAC5C,IAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAAA,GAChB;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,cAAA;AAAA,QACA,SAAa,IAAA,uBAAA;AAAA,QACb,SAAA;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA,EAAU,OAAO,EAAK,GAAA,QAAA;AAAA,MACtB,OAAS,EAAA,EAAA;AAAA,MACT,UAAA;AAAA,MAEA,QAAA,kBAAA,IAAA;AAAA,QAACA,QAAA;AAAA,QAAA;AAAA,UACC,WAAA;AAAA,UACA,YAAc,EAAA,mBAAA;AAAA,UACd,EAAA;AAAA,UACA,YAAY,EAAA,KAAA;AAAA,UACZ,iBAAiB,EAAA,cAAA;AAAA,UAChB,GAAG,KAAA;AAAA,UAEJ,QAAA,EAAA;AAAA,4BAAC,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,wBACb,EAAA,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,KAAA,EAAA,EAAM,WAAU,8BAA+B,EAAA,CAAA;AAAA,kCAC/C,MAAO,EAAA,EAAA,SAAA,EAAU,+BAChB,EAAA,QAAA,kBAAA,GAAA,CAAC,uBAAoB,CACvB,EAAA,CAAA;AAAA,aACF,EAAA,CAAA;AAAA,4BACA,GAAA,CAAC,WAAQ,SAAU,EAAA,uBAAA,EACjB,8BAAC,OAAQ,EAAA,EAAA,SAAA,EAAU,uBAAyB,EAAA,QAAA,EAAS,CACvD,EAAA,CAAA;AAAA,WAAA;AAAA,SAAA;AAAA,OACF;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAA;AAEO,SAAS,YAAa,CAAA;AAAA,EAC3B,SAAA;AAAA,EACA,GAAG,KAAA;AACL,CAA8C,EAAA;AAC5C,EACE,uBAAA,GAAA,CAAC,eAAY,SAAW,EAAA,IAAA,CAAK,sBAAsB,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA,CAAA,CAAA;AAE9E,CAAA;AAEO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAqC,EAAA;AACpE,EAAA,uBAAQ,GAAA,CAAA,MAAA,EAAA,EAAO,SAAU,EAAA,sBAAA,EAAwB,QAAS,EAAA,CAAA,CAAA;AAC5D,CAAA;AAEO,SAAS,eAAA,CAAgB,EAAE,QAAA,EAAqC,EAAA;AACrE,EAAO,uBAAA,GAAA,CAAC,WAAS,QAAS,EAAA,CAAA,CAAA;AAC5B","file":"index.mjs","sourcesContent":["import { FormField } from \"@sikt/sds-form\";\nimport { CaretCircleDownIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, useId, useState } from \"react\";\nimport {\n ComboBox as AriaCombobox,\n ComboBoxProps as AriaComboboxProps,\n Button,\n Header,\n Input,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n Popover,\n Section,\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}\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 ...props\n}: ComboboxProps<T>) {\n const id = useId();\n const helpTextId = `${id}-help-text`;\n const [open, setOpen] = useState(false);\n\n function onOpenChangeHandler(isOpen: boolean) {\n setOpen(isOpen);\n }\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 helpText={open ? \"\" : helpText}\n htmlFor={id}\n helpTextId={helpTextId}\n >\n <AriaCombobox\n menuTrigger={menuTrigger}\n onOpenChange={onOpenChangeHandler}\n id={id}\n aria-label={label}\n aria-labelledby={ariaLabelledBy}\n {...props}\n >\n <div className=\"sds-combobox__combobox\">\n <Input className=\"sds-combobox__combobox-input\" />\n <Button className=\"sds-combobox__combobox-button\">\n <CaretCircleDownIcon />\n </Button>\n </div>\n <Popover className=\"sds-combobox__popover\">\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 <Section>{children}</Section>;\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,18 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-combobox",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
|
+
"homepage": "https://designsystem.sikt.no/",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://gitlab.sikt.no/designsystem/sds-komponentbibliotek.git"
|
|
9
|
+
},
|
|
5
10
|
"main": "dist/index.js",
|
|
6
11
|
"module": "dist/index.mjs",
|
|
7
12
|
"exports": {
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
|
|
13
|
+
".": {
|
|
14
|
+
"import": {
|
|
15
|
+
"types": "./dist/index.d.mts",
|
|
16
|
+
"default": "./dist/index.mjs"
|
|
17
|
+
},
|
|
18
|
+
"require": {
|
|
19
|
+
"types": "./dist/index.d.ts",
|
|
20
|
+
"default": "./dist/index.js"
|
|
21
|
+
},
|
|
22
|
+
"style": "./dist/index.css"
|
|
11
23
|
},
|
|
12
|
-
"
|
|
13
|
-
"types": "./dist/index.d.ts",
|
|
14
|
-
"default": "./dist/index.js"
|
|
15
|
-
}
|
|
24
|
+
"./dist/*": "./dist/*"
|
|
16
25
|
},
|
|
17
26
|
"types": "dist/index.d.ts",
|
|
18
27
|
"style": "dist/index.css",
|
|
@@ -25,16 +34,16 @@
|
|
|
25
34
|
"build": "tsup"
|
|
26
35
|
},
|
|
27
36
|
"dependencies": {
|
|
28
|
-
"@sikt/sds-core": "^3.0.
|
|
29
|
-
"@sikt/sds-form": "^
|
|
37
|
+
"@sikt/sds-core": "^3.0.2",
|
|
38
|
+
"@sikt/sds-form": "^3.0.0",
|
|
30
39
|
"@sikt/sds-icons": "^1.2.0",
|
|
31
|
-
"@sikt/sds-tokens": "^1.0.
|
|
32
|
-
"react-aria-components": "^1.
|
|
40
|
+
"@sikt/sds-tokens": "^1.0.1",
|
|
41
|
+
"react-aria-components": "^1.3.3"
|
|
33
42
|
},
|
|
34
43
|
"peerDependencies": {
|
|
35
44
|
"@types/react": "^18.0.0",
|
|
36
45
|
"@types/react-dom": "^18.0.0",
|
|
37
|
-
"clsx": "^
|
|
46
|
+
"clsx": "^2.1.0",
|
|
38
47
|
"react": "^18.0.0",
|
|
39
48
|
"react-dom": "^18.0.0"
|
|
40
49
|
}
|