@sikt/sds-combobox 1.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 +9 -0
- package/README.md +53 -0
- package/dist/index.css +121 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.mts +24 -0
- package/dist/index.d.ts +24 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +1 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +41 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
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
|
+
|
|
5
|
+
## 1.0.0 (2024-04-17)
|
|
6
|
+
|
|
7
|
+
### Features
|
|
8
|
+
|
|
9
|
+
- add combobox component ([8f18846](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/8f1884605aaff796e510181f33a6e8e695003945))
|
package/README.md
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# `@sikt/sds-combobox`
|
|
2
|
+
|
|
3
|
+
## Consume
|
|
4
|
+
|
|
5
|
+
```sh
|
|
6
|
+
npm i -s @sikt/sds-combobox
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
### React
|
|
10
|
+
|
|
11
|
+
#### With dynamic content
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
import { Combobox, ComboBoxItem } from "@sikt/sds-combobox";
|
|
15
|
+
import "@sikt/sds-combobox/dist/index.css";
|
|
16
|
+
|
|
17
|
+
<Combobox
|
|
18
|
+
label="..."
|
|
19
|
+
defaultItems={[
|
|
20
|
+
{ title: "foo", id: 1 },
|
|
21
|
+
{ title: "baz", id: 2 },
|
|
22
|
+
]}
|
|
23
|
+
>
|
|
24
|
+
{(item) => <ComboBoxItem>{item.title}</ComboBoxItem>}
|
|
25
|
+
</Combobox>;
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
#### With static content
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
import { Combobox, ComboBoxItem } from "@sikt/sds-combobox";
|
|
32
|
+
import "@sikt/sds-combobox/dist/index.css";
|
|
33
|
+
|
|
34
|
+
<Combobox label="...">
|
|
35
|
+
<ComboBoxItem id="Foo">Foo</ComboBoxItem>
|
|
36
|
+
<ComboBoxItem id="Baz">Baz</ComboBoxItem>
|
|
37
|
+
</Combobox>;
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Additional information
|
|
41
|
+
|
|
42
|
+
For any additional details, troubleshooting, or advanced features, please consult the React Aria ComboBox documentation.
|
|
43
|
+
|
|
44
|
+
[https://react-spectrum.adobe.com/react-aria/ComboBox.html](https://react-spectrum.adobe.com/react-aria/ComboBox.html)
|
|
45
|
+
|
|
46
|
+
### Stylesheets
|
|
47
|
+
|
|
48
|
+
Import stylesheet:
|
|
49
|
+
|
|
50
|
+
```css
|
|
51
|
+
@import url("@sikt/sds-form");
|
|
52
|
+
@import url("@sikt/sds-combobox");
|
|
53
|
+
```
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
/* combobox.pcss */
|
|
2
|
+
.sds-combobox {
|
|
3
|
+
--combobox-border-color: var(--sds-color-interaction-neutral-strong-default);
|
|
4
|
+
--combobox-border-width: var(--sds-space-border-weight-regular);
|
|
5
|
+
--combobox-button-color: var(--sds-color-text-primary);
|
|
6
|
+
--combobox-button-background-color: transparent;
|
|
7
|
+
--combobox-padding: calc( var(--sds-space-padding-tiny) + var(--sds-space-padding-minimal) - var(--combobox-border-width) );
|
|
8
|
+
display: inline-flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
width: 100%;
|
|
11
|
+
}
|
|
12
|
+
.sds-combobox__combobox {
|
|
13
|
+
align-items: center;
|
|
14
|
+
display: flex;
|
|
15
|
+
position: relative;
|
|
16
|
+
}
|
|
17
|
+
.sds-combobox__combobox-input {
|
|
18
|
+
-webkit-appearance: none;
|
|
19
|
+
appearance: none;
|
|
20
|
+
background-image: none;
|
|
21
|
+
background-color: var(--sds-color-layout-background-default);
|
|
22
|
+
border: var(--combobox-border-width) solid var(--combobox-border-color);
|
|
23
|
+
border-radius: var(--sds-space-border-radius-medium);
|
|
24
|
+
color: var(--sds-color-text-primary);
|
|
25
|
+
flex: 1;
|
|
26
|
+
font-size: var(--sds-typography-body-fontsize-regular);
|
|
27
|
+
font-weight: var(--sds-typography-weight-regular);
|
|
28
|
+
line-height: var(--sds-typography-body-lineheight-regular);
|
|
29
|
+
padding: var(--combobox-padding);
|
|
30
|
+
}
|
|
31
|
+
.sds-combobox__combobox-input:hover,
|
|
32
|
+
.sds-combobox__combobox-input:focus-visible {
|
|
33
|
+
--combobox-border-color: var( --sds-color-interaction-neutral-strong-highlight );
|
|
34
|
+
}
|
|
35
|
+
.sds-combobox__combobox-input:active {
|
|
36
|
+
--combobox-border-color: var( --sds-color-interaction-neutral-strong-pressed );
|
|
37
|
+
}
|
|
38
|
+
.sds-combobox__combobox-input:focus-visible {
|
|
39
|
+
outline: var(--sds-focus-outline);
|
|
40
|
+
}
|
|
41
|
+
.sds-combobox__combobox-button {
|
|
42
|
+
--combobox-button-size: calc( var(--sds-base-size-m) + calc(var(--sds-space-padding-minimal) * 2) );
|
|
43
|
+
display: flex;
|
|
44
|
+
align-items: center;
|
|
45
|
+
justify-content: center;
|
|
46
|
+
border: 0;
|
|
47
|
+
background-color: var(--combobox-button-background-color);
|
|
48
|
+
border-radius: var(--sds-space-border-radius-minimal);
|
|
49
|
+
color: var(--combobox-button-color);
|
|
50
|
+
font-size: var(--sds-base-size-m);
|
|
51
|
+
padding: var(--sds-space-padding-minimal);
|
|
52
|
+
position: absolute;
|
|
53
|
+
right: var(--combobox-padding);
|
|
54
|
+
width: var(--combobox-button-size);
|
|
55
|
+
height: var(--combobox-button-size);
|
|
56
|
+
}
|
|
57
|
+
.sds-combobox__combobox-button:hover,
|
|
58
|
+
.sds-combobox__combobox-button:focus-visible {
|
|
59
|
+
background-color: var( --sds-color-interaction-primary-transparent-highlight );
|
|
60
|
+
}
|
|
61
|
+
.sds-combobox__listbox {
|
|
62
|
+
display: block;
|
|
63
|
+
width: unset;
|
|
64
|
+
max-height: 15rem;
|
|
65
|
+
min-height: unset;
|
|
66
|
+
overflow: auto;
|
|
67
|
+
}
|
|
68
|
+
.sds-combobox__popover {
|
|
69
|
+
padding: var(--sds-space-padding-small);
|
|
70
|
+
width: var(--trigger-width);
|
|
71
|
+
margin-top: var(--sds-space-gap-small);
|
|
72
|
+
margin-bottom: var(--sds-space-gap-small);
|
|
73
|
+
background-color: var(--sds-color-layout-background-default);
|
|
74
|
+
box-shadow: var(--sds-effect-shadow-elevated-default);
|
|
75
|
+
border-radius: var(--sds-space-border-radius-medium);
|
|
76
|
+
}
|
|
77
|
+
.sds-combobox__header {
|
|
78
|
+
padding: var(--sds-space-padding-small);
|
|
79
|
+
margin: var(--sds-space-gap-tiny);
|
|
80
|
+
font-size: var(--sds-typography-body-fontsize-medium);
|
|
81
|
+
font-weight: var(--sds-typography-weight-bold);
|
|
82
|
+
border-bottom: var(--sds-space-border-weight-thin) solid var(--sds-color-brand-neutral-subtle);
|
|
83
|
+
}
|
|
84
|
+
.sds-combobox__item {
|
|
85
|
+
padding: var(--sds-space-padding-small);
|
|
86
|
+
margin: var(--sds-space-gap-tiny);
|
|
87
|
+
border-radius: var(--sds-space-border-radius-medium);
|
|
88
|
+
}
|
|
89
|
+
.sds-combobox__item[data-focus-visible],
|
|
90
|
+
.sds-combobox__item:focus-visible {
|
|
91
|
+
outline: var(--sds-focus-outline);
|
|
92
|
+
}
|
|
93
|
+
.sds-combobox__item[data-hovered],
|
|
94
|
+
.sds-combobox__item[data-focus-visible],
|
|
95
|
+
.sds-combobox__item:hover,
|
|
96
|
+
.sds-combobox__item:focus-visible {
|
|
97
|
+
background-color: var( --sds-color-interaction-primary-transparent-highlight );
|
|
98
|
+
}
|
|
99
|
+
.sds-combobox__item[data-pressed],
|
|
100
|
+
.sds-combobox__item:active {
|
|
101
|
+
background-color: var( --sds-color-interaction-primary-transparent-pressed );
|
|
102
|
+
}
|
|
103
|
+
.sds-combobox__item[data-selected] {
|
|
104
|
+
background-color: var(--sds-color-interaction-primary-strong-pressed);
|
|
105
|
+
color: var(--sds-color-text-on-strong);
|
|
106
|
+
}
|
|
107
|
+
.sds-combobox--invalid .sds-combobox__combobox {
|
|
108
|
+
--combobox-border-color: var(--sds-color-interaction-danger-strong-default);
|
|
109
|
+
--combobox-button-color: var(--sds-color-text-on-strong);
|
|
110
|
+
--combobox-button-background-color: var( --sds-color-interaction-danger-strong-default );
|
|
111
|
+
}
|
|
112
|
+
.sds-combobox--invalid .sds-combobox__combobox:hover,
|
|
113
|
+
.sds-combobox--invalid .sds-combobox__combobox:focus-within {
|
|
114
|
+
--combobox-border-color: var( --sds-color-interaction-danger-strong-highlight );
|
|
115
|
+
--combobox-button-background-color: var( --sds-color-interaction-danger-strong-highlight );
|
|
116
|
+
}
|
|
117
|
+
.sds-combobox--invalid .sds-combobox__combobox:active {
|
|
118
|
+
--combobox-border-color: var( --sds-color-interaction-danger-strong-pressed );
|
|
119
|
+
--combobox-button-background-color: var( --sds-color-interaction-danger-strong-pressed );
|
|
120
|
+
}
|
|
121
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +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 width: var(--trigger-width);\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\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-medium);\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;AACvB,WAAS,IAAI;AACf;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,SAAO,IAAI;AACX,cAAY,IAAI;AAChB,iBAAe,IAAI;AACnB,oBAAkB,IAAI;AACtB,cAAY,IAAI;AAChB,iBAAe,IAAI;AACrB;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,CA5HtB;AA6HC,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,sCAAoC,KAClC;AAEJ;AAEA,CARC,sBAQsB,CApItB,sBAoI6C;AAC5C,CATD,sBASwB,CArIxB,sBAqI+C;AAC5C,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;AAEF,CAlBC,sBAkBsB,CA9ItB,sBA8I6C;AAC1C,2BAAyB,KACvB;AAEF,sCAAoC,KAClC;AAEJ;","names":[]}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { ComboBoxProps, ListBoxItemProps } from 'react-aria-components';
|
|
4
|
+
|
|
5
|
+
interface ComboboxProps<T extends object> extends Omit<ComboBoxProps<T>, "children" | "menuTrigger"> {
|
|
6
|
+
children: React.ReactNode | ((item: T) => React.ReactNode);
|
|
7
|
+
label: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
errorText?: string;
|
|
10
|
+
helpText?: string;
|
|
11
|
+
menuTrigger?: "focus" | "manual" | "input";
|
|
12
|
+
}
|
|
13
|
+
declare function Combobox<T extends object>({ children, className, errorText, helpText, label, menuTrigger, ...props }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
|
|
14
|
+
declare function ComboboxItem({ className, ...props }: ListBoxItemProps & {
|
|
15
|
+
className?: string;
|
|
16
|
+
}): react_jsx_runtime.JSX.Element;
|
|
17
|
+
declare function ComboboxHeader({ children }: {
|
|
18
|
+
children: ReactNode;
|
|
19
|
+
}): react_jsx_runtime.JSX.Element;
|
|
20
|
+
declare function ComboboxSection({ children }: {
|
|
21
|
+
children: ReactNode;
|
|
22
|
+
}): react_jsx_runtime.JSX.Element;
|
|
23
|
+
|
|
24
|
+
export { Combobox, ComboboxHeader, ComboboxItem, type ComboboxProps, ComboboxSection };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { ComboBoxProps, ListBoxItemProps } from 'react-aria-components';
|
|
4
|
+
|
|
5
|
+
interface ComboboxProps<T extends object> extends Omit<ComboBoxProps<T>, "children" | "menuTrigger"> {
|
|
6
|
+
children: React.ReactNode | ((item: T) => React.ReactNode);
|
|
7
|
+
label: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
errorText?: string;
|
|
10
|
+
helpText?: string;
|
|
11
|
+
menuTrigger?: "focus" | "manual" | "input";
|
|
12
|
+
}
|
|
13
|
+
declare function Combobox<T extends object>({ children, className, errorText, helpText, label, menuTrigger, ...props }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
|
|
14
|
+
declare function ComboboxItem({ className, ...props }: ListBoxItemProps & {
|
|
15
|
+
className?: string;
|
|
16
|
+
}): react_jsx_runtime.JSX.Element;
|
|
17
|
+
declare function ComboboxHeader({ children }: {
|
|
18
|
+
children: ReactNode;
|
|
19
|
+
}): react_jsx_runtime.JSX.Element;
|
|
20
|
+
declare function ComboboxSection({ children }: {
|
|
21
|
+
children: ReactNode;
|
|
22
|
+
}): react_jsx_runtime.JSX.Element;
|
|
23
|
+
|
|
24
|
+
export { Combobox, ComboboxHeader, ComboboxItem, type ComboboxProps, ComboboxSection };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("clsx"),o=require("react"),s=require("react-aria-components"),r=require("@sikt/sds-form"),c=require("@sikt/sds-icons"),t=require("react/jsx-runtime");function n(e){return e&&e.__esModule?e:{default:e}}var i=n(e);exports.Combobox=function({children:e,className:n,errorText:a,helpText:x,label:l,menuTrigger:b="focus",...m}){const d=o.useId(),u="".concat(d,"-help-text"),[h,_]=o.useState(!1);return t.jsx(r.FormField,{className:i.default("sds-combobox",a&&"sds-combobox--invalid",n),label:l,errorText:a,helpText:h?"":x,htmlFor:d,helpTextId:u,children:t.jsxs(s.ComboBox,{menuTrigger:b,onOpenChange:function(e){_(e)},id:d,"aria-label":l,...m,children:[t.jsxs("div",{className:"sds-combobox__combobox",children:[t.jsx(s.Input,{className:"sds-combobox__combobox-input"}),t.jsx(s.Button,{className:"sds-combobox__combobox-button",children:t.jsx(c.CaretCircleDownIcon,{})})]}),t.jsx(s.Popover,{className:"sds-combobox__popover",children:t.jsx(s.ListBox,{className:"sds-combobox__listbox",children:e})})]})})},exports.ComboboxHeader=function({children:e}){return t.jsx(s.Header,{className:"sds-combobox__header",children:e})},exports.ComboboxItem=function({className:e,...o}){return t.jsx(s.ListBoxItem,{className:i.default("sds-combobox__item",e),...o})},exports.ComboboxSection=function({children:e}){return t.jsx(s.Section,{children:e})};//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../Combobox.tsx"],"names":[],"mappings":";AAEA,OAAO,UAAU;AACjB,SAAoB,OAAO,gBAAgB;AAC3C;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EAEZ;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AAiD5B,SACE,KADF;AArCD,SAAS,SAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAqB;AACnB,QAAM,KAAK,MAAM;AACjB,QAAM,aAAa,GAAG,WAAE;AACxB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,WAAS,oBAAoB,QAAiB;AAC5C,YAAQ,MAAM;AAAA,EAChB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,aAAa;AAAA,QACb;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,OAAO,KAAK;AAAA,MACtB,SAAS;AAAA,MACT;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,cAAc;AAAA,UACd;AAAA,UACA,cAAY;AAAA,UACX,GAAG;AAAA,UAEJ;AAAA,iCAAC,SAAI,WAAU,0BACb;AAAA,kCAAC,SAAM,WAAU,gCAA+B;AAAA,cAChD,oBAAC,UAAO,WAAU,iCAChB,8BAAC,uBAAoB,GACvB;AAAA,eACF;AAAA,YACA,oBAAC,WAAQ,WAAU,yBACjB,8BAAC,WAAQ,WAAU,yBAAyB,UAAS,GACvD;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,GAAG;AACL,GAA8C;AAC5C,SACE,oBAAC,eAAY,WAAW,KAAK,sBAAsB,SAAS,GAAI,GAAG,OAAO;AAE9E;AAEO,SAAS,eAAe,EAAE,SAAS,GAA4B;AACpE,SAAO,oBAAC,UAAO,WAAU,wBAAwB,UAAS;AAC5D;AAEO,SAAS,gBAAgB,EAAE,SAAS,GAA4B;AACrE,SAAO,oBAAC,WAAS,UAAS;AAC5B","sourcesContent":["import \"./combobox.pcss\";\n\nimport clsx from \"clsx\";\nimport { ReactNode, useId, useState } from \"react\";\nimport {\n Button,\n ComboBox as AriaCombobox,\n ComboBoxProps as AriaComboboxProps,\n Input,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n Popover,\n Header,\n Section,\n} from \"react-aria-components\";\n\nimport { FormField } from \"@sikt/sds-form\";\nimport { CaretCircleDownIcon } from \"@sikt/sds-icons\";\n\nexport interface ComboboxProps<T extends object>\n extends Omit<AriaComboboxProps<T>, \"children\" | \"menuTrigger\"> {\n children: React.ReactNode | ((item: T) => React.ReactNode);\n label: string;\n className?: string;\n errorText?: string;\n helpText?: string;\n menuTrigger?: \"focus\" | \"manual\" | \"input\";\n}\n\nexport function Combobox<T extends object>({\n children,\n className,\n errorText,\n helpText,\n label,\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 {...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
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import o from"clsx";import{useId as e,useState as r}from"react";import{ComboBox as s,Input as c,Button as m,Popover as n,ListBox as t,ListBoxItem as i,Header as l,Section as a}from"react-aria-components";import{FormField as b}from"@sikt/sds-form";import{CaretCircleDownIcon as d}from"@sikt/sds-icons";import{jsx as x,jsxs as h}from"react/jsx-runtime";function p({children:i,className:l,errorText:a,helpText:p,label:u,menuTrigger:_="focus",...f}){const N=e(),T="".concat(N,"-help-text"),[g,v]=r(!1);return x(b,{className:o("sds-combobox",a&&"sds-combobox--invalid",l),label:u,errorText:a,helpText:g?"":p,htmlFor:N,helpTextId:T,children:h(s,{menuTrigger:_,onOpenChange:function(o){v(o)},id:N,"aria-label":u,...f,children:[h("div",{className:"sds-combobox__combobox",children:[x(c,{className:"sds-combobox__combobox-input"}),x(m,{className:"sds-combobox__combobox-button",children:x(d,{})})]}),x(n,{className:"sds-combobox__popover",children:x(t,{className:"sds-combobox__listbox",children:i})})]})})}function u({className:e,...r}){return x(i,{className:o("sds-combobox__item",e),...r})}function _({children:o}){return x(l,{className:"sds-combobox__header",children:o})}function f({children:o}){return x(a,{children:o})}export{p as Combobox,_ as ComboboxHeader,u as ComboboxItem,f as ComboboxSection};//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../Combobox.tsx"],"names":[],"mappings":";AAEA,OAAO,UAAU;AACjB,SAAoB,OAAO,gBAAgB;AAC3C;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EAEZ;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AAiD5B,SACE,KADF;AArCD,SAAS,SAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAqB;AACnB,QAAM,KAAK,MAAM;AACjB,QAAM,aAAa,GAAG,WAAE;AACxB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,WAAS,oBAAoB,QAAiB;AAC5C,YAAQ,MAAM;AAAA,EAChB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,aAAa;AAAA,QACb;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,OAAO,KAAK;AAAA,MACtB,SAAS;AAAA,MACT;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,cAAc;AAAA,UACd;AAAA,UACA,cAAY;AAAA,UACX,GAAG;AAAA,UAEJ;AAAA,iCAAC,SAAI,WAAU,0BACb;AAAA,kCAAC,SAAM,WAAU,gCAA+B;AAAA,cAChD,oBAAC,UAAO,WAAU,iCAChB,8BAAC,uBAAoB,GACvB;AAAA,eACF;AAAA,YACA,oBAAC,WAAQ,WAAU,yBACjB,8BAAC,WAAQ,WAAU,yBAAyB,UAAS,GACvD;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,GAAG;AACL,GAA8C;AAC5C,SACE,oBAAC,eAAY,WAAW,KAAK,sBAAsB,SAAS,GAAI,GAAG,OAAO;AAE9E;AAEO,SAAS,eAAe,EAAE,SAAS,GAA4B;AACpE,SAAO,oBAAC,UAAO,WAAU,wBAAwB,UAAS;AAC5D;AAEO,SAAS,gBAAgB,EAAE,SAAS,GAA4B;AACrE,SAAO,oBAAC,WAAS,UAAS;AAC5B","sourcesContent":["import \"./combobox.pcss\";\n\nimport clsx from \"clsx\";\nimport { ReactNode, useId, useState } from \"react\";\nimport {\n Button,\n ComboBox as AriaCombobox,\n ComboBoxProps as AriaComboboxProps,\n Input,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n Popover,\n Header,\n Section,\n} from \"react-aria-components\";\n\nimport { FormField } from \"@sikt/sds-form\";\nimport { CaretCircleDownIcon } from \"@sikt/sds-icons\";\n\nexport interface ComboboxProps<T extends object>\n extends Omit<AriaComboboxProps<T>, \"children\" | \"menuTrigger\"> {\n children: React.ReactNode | ((item: T) => React.ReactNode);\n label: string;\n className?: string;\n errorText?: string;\n helpText?: string;\n menuTrigger?: \"focus\" | \"manual\" | \"input\";\n}\n\nexport function Combobox<T extends object>({\n children,\n className,\n errorText,\n helpText,\n label,\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 {...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
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@sikt/sds-combobox",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"license": "UNLICENSED",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
|
+
"exports": {
|
|
8
|
+
"import": {
|
|
9
|
+
"types": "./dist/index.d.mts",
|
|
10
|
+
"default": "./dist/index.mjs"
|
|
11
|
+
},
|
|
12
|
+
"require": {
|
|
13
|
+
"types": "./dist/index.d.ts",
|
|
14
|
+
"default": "./dist/index.js"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"types": "dist/index.d.ts",
|
|
18
|
+
"style": "dist/index.css",
|
|
19
|
+
"files": [
|
|
20
|
+
"CHANGELOG.md",
|
|
21
|
+
"dist",
|
|
22
|
+
"README.md"
|
|
23
|
+
],
|
|
24
|
+
"scripts": {
|
|
25
|
+
"build": "tsup"
|
|
26
|
+
},
|
|
27
|
+
"dependencies": {
|
|
28
|
+
"@sikt/sds-core": "^3.0.0",
|
|
29
|
+
"@sikt/sds-form": "^2.0.0",
|
|
30
|
+
"@sikt/sds-icons": "^1.2.0",
|
|
31
|
+
"@sikt/sds-tokens": "^1.0.0",
|
|
32
|
+
"react-aria-components": "^1.1.1"
|
|
33
|
+
},
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"@types/react": "^18.0.0",
|
|
36
|
+
"@types/react-dom": "^18.0.0",
|
|
37
|
+
"clsx": "^1.0.0 || ^2.0.0",
|
|
38
|
+
"react": "^18.0.0",
|
|
39
|
+
"react-dom": "^18.0.0"
|
|
40
|
+
}
|
|
41
|
+
}
|