@sikt/sds-combobox 2.0.0 → 2.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/README.md +3 -5
- 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 +11 -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
|
+
## [2.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-combobox@2.0.0...@sikt/sds-combobox@2.0.1) (2024-11-20)
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
- **deps:** correct deps on @sikt/sds-tokens ([b47f8a4](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/b47f8a4d27e99dcc731036ccf2b7b58a27d88da6))
|
|
10
|
+
- **deps:** peer deps react@19.0.0 ([17352e2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/17352e291153f79c66a9de317ca42820159aee8a))
|
|
11
|
+
- **deps:** update @sikt/sds-core@4.1.1 & @sikt/sds-icons@2.0.2 ([09e97cf](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/09e97cfe35780cc239ae2b7f55f4e793ec72e479))
|
|
12
|
+
- **deps:** update @sikt/sds-form@3.0.1 ([8edf559](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/8edf55939469d254e70c081c9e5153fc0b45b5f4))
|
|
13
|
+
- **deps:** update react-aria-components@1.4.1 ([14c37e7](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/14c37e72df0ae3bacf7b5a8bfa02db0dd5d077d0))
|
|
14
|
+
|
|
5
15
|
## [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
16
|
|
|
7
17
|
### ⚠ BREAKING CHANGES
|
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Consume
|
|
4
4
|
|
|
5
5
|
```sh
|
|
6
|
-
npm i -s @sikt/sds-combobox
|
|
6
|
+
npm i -s @sikt/sds-{combobox,form}
|
|
7
7
|
```
|
|
8
8
|
|
|
9
9
|
### React
|
|
@@ -12,6 +12,7 @@ npm i -s @sikt/sds-combobox
|
|
|
12
12
|
|
|
13
13
|
```js
|
|
14
14
|
import { Combobox, ComboBoxItem } from "@sikt/sds-combobox";
|
|
15
|
+
import "@sikt/sds-form/dist/index.css";
|
|
15
16
|
import "@sikt/sds-combobox/dist/index.css";
|
|
16
17
|
|
|
17
18
|
<Combobox
|
|
@@ -28,13 +29,10 @@ import "@sikt/sds-combobox/dist/index.css";
|
|
|
28
29
|
#### With static content
|
|
29
30
|
|
|
30
31
|
```js
|
|
31
|
-
import { Combobox, ComboBoxItem } from "@sikt/sds-combobox";
|
|
32
|
-
import "@sikt/sds-combobox/dist/index.css";
|
|
33
|
-
|
|
34
32
|
<Combobox label="...">
|
|
35
33
|
<ComboBoxItem id="Foo">Foo</ComboBoxItem>
|
|
36
34
|
<ComboBoxItem id="Baz">Baz</ComboBoxItem>
|
|
37
|
-
</Combobox
|
|
35
|
+
</Combobox>
|
|
38
36
|
```
|
|
39
37
|
|
|
40
38
|
### Additional information
|
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"),t=require("react-aria-components"),a=require("react/jsx-runtime"),l=Object.defineProperty,c=Object.defineProperties,i=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,m=(e,r,o)=>r in e?l(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,d=(e,r)=>{for(var o in r||(r={}))b.call(r,o)&&m(e,o,r[o]);if(n)for(var o of n(r))x.call(r,o)&&m(e,o,r[o]);return e},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 n=l,{children:b,className:x,errorText:m,helpText:p,label:h,"aria-labelledby":f,menuTrigger:j="focus"}=n,v=u(n,["children","className","errorText","helpText","label","aria-labelledby","menuTrigger"]);const _=s.useId(),N="".concat(_,"-help-text"),[O,y]=s.useState(!1);return a.jsx(e.FormField,{className:o.clsx("sds-combobox",m&&"sds-combobox--invalid",x),label:h,errorText:m,helpText:O?"":p,htmlFor:_,helpTextId:N,children:a.jsxs(t.ComboBox,(g=d({menuTrigger:j,onOpenChange:function(e){y(e)},id:_,"aria-label":h,"aria-labelledby":f},v),T={children:[a.jsxs("div",{className:"sds-combobox__combobox",children:[a.jsx(t.Input,{className:"sds-combobox__combobox-input"}),a.jsx(t.Button,{className:"sds-combobox__combobox-button",children:a.jsx(r.CaretCircleDownIcon,{})})]}),a.jsx(t.Popover,{className:"sds-combobox__popover",children:a.jsx(t.ListBox,{className:"sds-combobox__listbox",children:b})})]},c(g,i(T))))});var g,T},exports.ComboboxHeader=function({children:e}){return a.jsx(t.Header,{className:"sds-combobox__header",children:e})},exports.ComboboxItem=function(e){var r=e,{className:s}=r,l=u(r,["className"]);return a.jsx(t.ListBoxItem,d({className:o.clsx("sds-combobox__item",s)},l))},exports.ComboboxSection=function({children:e}){return a.jsx(t.Section,{children:e})};//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Combobox.tsx"],"names":["useId","useState","jsx","FormField","clsx","jsxs","AriaCombobox","Input","Button","CaretCircleDownIcon","Popover","ListBox","ListBoxItem","Header","Section"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/Combobox.tsx"],"names":["useId","useState","jsx","FormField","clsx","jsxs","AriaCombobox","Input","Button","CaretCircleDownIcon","Popover","ListBox","ListBoxItem","Header","Section"],"mappings":"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","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{FormField as
|
|
1
|
+
import{FormField as e}from"@sikt/sds-form";import{CaretCircleDownIcon as r}from"@sikt/sds-icons";import{clsx as o}from"clsx/lite";import{useId as a,useState as l}from"react";import{ComboBox as c,ListBoxItem as t,Header as s,Section as n,Input as i,Button as b,Popover as m,ListBox as d}from"react-aria-components";import{jsx as p,jsxs as f}from"react/jsx-runtime";var x=Object.defineProperty,u=Object.defineProperties,h=Object.getOwnPropertyDescriptors,_=Object.getOwnPropertySymbols,v=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable,O=(e,r,o)=>r in e?x(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,y=(e,r)=>{for(var o in r||(r={}))v.call(r,o)&&O(e,o,r[o]);if(_)for(var o of _(r))N.call(r,o)&&O(e,o,r[o]);return e},g=(e,r)=>{var o={};for(var a in e)v.call(e,a)&&r.indexOf(a)<0&&(o[a]=e[a]);if(null!=e&&_)for(var a of _(e))r.indexOf(a)<0&&N.call(e,a)&&(o[a]=e[a]);return o};function T(t){var s=t,{children:n,className:x,errorText:_,helpText:v,label:N,"aria-labelledby":O,menuTrigger:T="focus"}=s,j=g(s,["children","className","errorText","helpText","label","aria-labelledby","menuTrigger"]);const P=a(),w="".concat(P,"-help-text"),[k,I]=l(!1);return p(e,{className:o("sds-combobox",_&&"sds-combobox--invalid",x),label:N,errorText:_,helpText:k?"":v,htmlFor:P,helpTextId:w,children:f(c,(C=y({menuTrigger:T,onOpenChange:function(e){I(e)},id:P,"aria-label":N,"aria-labelledby":O},j),D={children:[f("div",{className:"sds-combobox__combobox",children:[p(i,{className:"sds-combobox__combobox-input"}),p(b,{className:"sds-combobox__combobox-button",children:p(r,{})})]}),p(m,{className:"sds-combobox__popover",children:p(d,{className:"sds-combobox__listbox",children:n})})]},u(C,h(D))))});var C,D}function j(e){var r=e,{className:a}=r,l=g(r,["className"]);return p(t,y({className:o("sds-combobox__item",a)},l))}function P({children:e}){return p(s,{className:"sds-combobox__header",children:e})}function w({children:e}){return p(n,{children:e})}export{T 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":"
|
|
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 { 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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sikt/sds-combobox",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"homepage": "https://designsystem.sikt.no/",
|
|
6
6
|
"repository": {
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
"module": "dist/index.mjs",
|
|
12
12
|
"exports": {
|
|
13
13
|
".": {
|
|
14
|
+
"style": "./dist/index.css",
|
|
14
15
|
"import": {
|
|
15
16
|
"types": "./dist/index.d.mts",
|
|
16
17
|
"default": "./dist/index.mjs"
|
|
@@ -18,8 +19,7 @@
|
|
|
18
19
|
"require": {
|
|
19
20
|
"types": "./dist/index.d.ts",
|
|
20
21
|
"default": "./dist/index.js"
|
|
21
|
-
}
|
|
22
|
-
"style": "./dist/index.css"
|
|
22
|
+
}
|
|
23
23
|
},
|
|
24
24
|
"./dist/*": "./dist/*"
|
|
25
25
|
},
|
|
@@ -34,17 +34,16 @@
|
|
|
34
34
|
"build": "tsup"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@sikt/sds-core": "^
|
|
38
|
-
"@sikt/sds-form": "^3.0.
|
|
39
|
-
"@sikt/sds-icons": "^
|
|
40
|
-
"
|
|
41
|
-
"react-aria-components": "^1.3.3"
|
|
37
|
+
"@sikt/sds-core": "^4.1.1",
|
|
38
|
+
"@sikt/sds-form": "^3.0.1",
|
|
39
|
+
"@sikt/sds-icons": "^2.0.2",
|
|
40
|
+
"react-aria-components": "^1.4.1"
|
|
42
41
|
},
|
|
43
42
|
"peerDependencies": {
|
|
44
|
-
"@types/react": "^18.0.0",
|
|
45
|
-
"@types/react-dom": "^18.0.0",
|
|
43
|
+
"@types/react": "^18.0.0 || ^19.0.0",
|
|
44
|
+
"@types/react-dom": "^18.0.0 || ^19.0.0",
|
|
46
45
|
"clsx": "^2.1.0",
|
|
47
|
-
"react": "^18.0.0",
|
|
48
|
-
"react-dom": "^18.0.0"
|
|
46
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
47
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
49
48
|
}
|
|
50
49
|
}
|