@sikt/sds-combobox 1.0.0 → 1.0.1
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 +10 -0
- package/dist/index.css +4 -2
- package/dist/index.css.map +1 -1
- package/package.json +16 -12
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,16 @@
|
|
|
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
|
+
## [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)
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
- **combobox:** safari outline styling ([bc9e67a](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/bc9e67a301c5742f5ae3aa7ecdcfb5d45d6724dd))
|
|
10
|
+
- **deps:** update @sikt/sds-core to ^3.0.2 ([a55b4c2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/a55b4c2f0bad4dfe80b26c0f7102622b4257d8b2))
|
|
11
|
+
- **deps:** update @sikt/sds-tokens to ^1.0.1 ([3618147](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/3618147fbc51048b8f63484b63cd2fa6e76cbbf4))
|
|
12
|
+
- **deps:** update dependency react-aria-components to ^1.2.0 ([cf370da](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/cf370daddb3e44eef357c9657736ab2961793cd9))
|
|
13
|
+
- package json exports ([b62fed7](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/b62fed7bfa459c618c016f39c960dffda037155f))
|
|
14
|
+
|
|
5
15
|
## 1.0.0 (2024-04-17)
|
|
6
16
|
|
|
7
17
|
### Features
|
package/dist/index.css
CHANGED
|
@@ -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":["../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/package.json
CHANGED
|
@@ -1,18 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-combobox",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
7
7
|
"exports": {
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
|
|
8
|
+
".": {
|
|
9
|
+
"import": {
|
|
10
|
+
"types": "./dist/index.d.mts",
|
|
11
|
+
"default": "./dist/index.mjs"
|
|
12
|
+
},
|
|
13
|
+
"require": {
|
|
14
|
+
"types": "./dist/index.d.ts",
|
|
15
|
+
"default": "./dist/index.js"
|
|
16
|
+
},
|
|
17
|
+
"style": "./dist/index.css"
|
|
11
18
|
},
|
|
12
|
-
"
|
|
13
|
-
"types": "./dist/index.d.ts",
|
|
14
|
-
"default": "./dist/index.js"
|
|
15
|
-
}
|
|
19
|
+
"./dist/*": "./dist/*"
|
|
16
20
|
},
|
|
17
21
|
"types": "dist/index.d.ts",
|
|
18
22
|
"style": "dist/index.css",
|
|
@@ -25,11 +29,11 @@
|
|
|
25
29
|
"build": "tsup"
|
|
26
30
|
},
|
|
27
31
|
"dependencies": {
|
|
28
|
-
"@sikt/sds-core": "^3.0.
|
|
29
|
-
"@sikt/sds-form": "^2.
|
|
32
|
+
"@sikt/sds-core": "^3.0.2",
|
|
33
|
+
"@sikt/sds-form": "^2.1.0",
|
|
30
34
|
"@sikt/sds-icons": "^1.2.0",
|
|
31
|
-
"@sikt/sds-tokens": "^1.0.
|
|
32
|
-
"react-aria-components": "^1.
|
|
35
|
+
"@sikt/sds-tokens": "^1.0.1",
|
|
36
|
+
"react-aria-components": "^1.2.1"
|
|
33
37
|
},
|
|
34
38
|
"peerDependencies": {
|
|
35
39
|
"@types/react": "^18.0.0",
|