@digdir/designsystemet-react 1.17.0 → 1.18.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/dist/cjs/components/chip/chips.js +2 -2
- package/dist/cjs/components/suggestion/suggestion.js +3 -0
- package/dist/esm/components/chip/chips.js +2 -2
- package/dist/esm/components/suggestion/suggestion.js +3 -0
- package/dist/types/components/chip/chips.d.ts +9 -4
- package/dist/types/components/chip/chips.d.ts.map +1 -1
- package/dist/types/components/suggestion/suggestion.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -31,10 +31,10 @@ const ChipRemovable = react.forwardRef(function ChipRemovable(props, ref) {
|
|
|
31
31
|
* <Chip.Checkbox name="language" value="nynorsk">Nynorsk</Chip.Checkbox>
|
|
32
32
|
* <Chip.Checkbox name="language" value="bokmål">Bokmål</Chip.Checkbox>
|
|
33
33
|
*/
|
|
34
|
-
const ChipCheckbox = react.forwardRef(function ChipCheckbox({ asChild, children, className, 'data-size': size, 'data-
|
|
34
|
+
const ChipCheckbox = react.forwardRef(function ChipCheckbox({ asChild, children, className, 'data-color': color, 'data-size': size, 'data-wrap': wrap, ...rest }, ref) {
|
|
35
35
|
const inputType = rest.type ?? 'checkbox';
|
|
36
36
|
const Component = asChild ? reactSlot.Slot : 'label';
|
|
37
|
-
return (jsxRuntime.jsxs(Component, { className: cl('ds-chip', className), "data-size": size, "data-
|
|
37
|
+
return (jsxRuntime.jsxs(Component, { className: cl('ds-chip', className), "data-color": color, "data-size": size, "data-wrap": wrap, ref: ref, children: [jsxRuntime.jsx(input.Input, { ...rest, type: inputType }), jsxRuntime.jsx(reactSlot.Slottable, { children: children })] }));
|
|
38
38
|
});
|
|
39
39
|
/**
|
|
40
40
|
* Chip.Radio used for single selection
|
|
@@ -48,8 +48,11 @@ const Suggestion = react.forwardRef(function Suggestion({ children, className, c
|
|
|
48
48
|
const beforeChange = (event) => {
|
|
49
49
|
event.preventDefault();
|
|
50
50
|
const multiple = combobox?.multiple;
|
|
51
|
+
const input = combobox?.control;
|
|
51
52
|
const data = event.detail;
|
|
52
53
|
const nextItem = nextItems(data, selectedItemsRef.current, multiple);
|
|
54
|
+
if (!multiple && input)
|
|
55
|
+
input.value = data?.textContent || ''; // Sync input value for single selection
|
|
53
56
|
onSelectedChangeRef.current?.(nextItem || null);
|
|
54
57
|
if (!isControlled)
|
|
55
58
|
setDefaultItems(sanitizeItems(nextItem));
|
|
@@ -29,10 +29,10 @@ const ChipRemovable = forwardRef(function ChipRemovable(props, ref) {
|
|
|
29
29
|
* <Chip.Checkbox name="language" value="nynorsk">Nynorsk</Chip.Checkbox>
|
|
30
30
|
* <Chip.Checkbox name="language" value="bokmål">Bokmål</Chip.Checkbox>
|
|
31
31
|
*/
|
|
32
|
-
const ChipCheckbox = forwardRef(function ChipCheckbox({ asChild, children, className, 'data-size': size, 'data-
|
|
32
|
+
const ChipCheckbox = forwardRef(function ChipCheckbox({ asChild, children, className, 'data-color': color, 'data-size': size, 'data-wrap': wrap, ...rest }, ref) {
|
|
33
33
|
const inputType = rest.type ?? 'checkbox';
|
|
34
34
|
const Component = asChild ? Slot : 'label';
|
|
35
|
-
return (jsxs(Component, { className: cl('ds-chip', className), "data-size": size, "data-
|
|
35
|
+
return (jsxs(Component, { className: cl('ds-chip', className), "data-color": color, "data-size": size, "data-wrap": wrap, ref: ref, children: [jsx(Input, { ...rest, type: inputType }), jsx(Slottable, { children: children })] }));
|
|
36
36
|
});
|
|
37
37
|
/**
|
|
38
38
|
* Chip.Radio used for single selection
|
|
@@ -46,8 +46,11 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
|
|
|
46
46
|
const beforeChange = (event) => {
|
|
47
47
|
event.preventDefault();
|
|
48
48
|
const multiple = combobox?.multiple;
|
|
49
|
+
const input = combobox?.control;
|
|
49
50
|
const data = event.detail;
|
|
50
51
|
const nextItem = nextItems(data, selectedItemsRef.current, multiple);
|
|
52
|
+
if (!multiple && input)
|
|
53
|
+
input.value = data?.textContent || ''; // Sync input value for single selection
|
|
51
54
|
onSelectedChangeRef.current?.(nextItem || null);
|
|
52
55
|
if (!isControlled)
|
|
53
56
|
setDefaultItems(sanitizeItems(nextItem));
|
|
@@ -7,6 +7,11 @@ type ChipBaseProps = {
|
|
|
7
7
|
* @default false
|
|
8
8
|
*/
|
|
9
9
|
asChild?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Change the text wrapping behavior of the chip. Use `wrap` to allow the chip to wrap text, and `nowrap` to prevent it from wrapping.
|
|
12
|
+
* @default 'nowrap'
|
|
13
|
+
*/
|
|
14
|
+
'data-wrap'?: 'nowrap' | 'wrap';
|
|
10
15
|
};
|
|
11
16
|
export type ChipRemovableProps = ChipButtonProps;
|
|
12
17
|
export type ChipRadioProps = ChipCheckboxProps;
|
|
@@ -18,26 +23,26 @@ export type ChipCheckboxProps = MergeRight<DefaultProps & Omit<InputHTMLAttribut
|
|
|
18
23
|
* @example
|
|
19
24
|
* <Chip.Button>Click me</Chip.Button>
|
|
20
25
|
*/
|
|
21
|
-
export declare const ChipButton: import("react").ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>,
|
|
26
|
+
export declare const ChipButton: import("react").ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, keyof ChipBaseProps> & ChipBaseProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
22
27
|
/**
|
|
23
28
|
* Chip.Removable used for interaction
|
|
24
29
|
* @example
|
|
25
30
|
* <Chip.Removable>Click to remove me</Chip.Removable>
|
|
26
31
|
*/
|
|
27
|
-
export declare const ChipRemovable: import("react").ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>,
|
|
32
|
+
export declare const ChipRemovable: import("react").ForwardRefExoticComponent<Omit<DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>, keyof ChipBaseProps> & ChipBaseProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
28
33
|
/**
|
|
29
34
|
* Chip.Checkbox used for multiselection
|
|
30
35
|
* @example
|
|
31
36
|
* <Chip.Checkbox name="language" value="nynorsk">Nynorsk</Chip.Checkbox>
|
|
32
37
|
* <Chip.Checkbox name="language" value="bokmål">Bokmål</Chip.Checkbox>
|
|
33
38
|
*/
|
|
34
|
-
export declare const ChipCheckbox: import("react").ForwardRefExoticComponent<Omit<DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size">,
|
|
39
|
+
export declare const ChipCheckbox: import("react").ForwardRefExoticComponent<Omit<DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size">, keyof ChipBaseProps> & ChipBaseProps & import("react").RefAttributes<HTMLLabelElement>>;
|
|
35
40
|
/**
|
|
36
41
|
* Chip.Radio used for single selection
|
|
37
42
|
* @example
|
|
38
43
|
* <Chip.Radio name="language" value="nynorsk">Nynorsk</Chip.Radio>
|
|
39
44
|
* <Chip.Radio name="language" value="bokmål">Bokmål</Chip.Radio>
|
|
40
45
|
*/
|
|
41
|
-
export declare const ChipRadio: import("react").ForwardRefExoticComponent<Omit<DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size">,
|
|
46
|
+
export declare const ChipRadio: import("react").ForwardRefExoticComponent<Omit<DefaultProps & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size">, keyof ChipBaseProps> & ChipBaseProps & import("react").RefAttributes<HTMLLabelElement>>;
|
|
42
47
|
export {};
|
|
43
48
|
//# sourceMappingURL=chips.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chips.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chips.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,KAAK,aAAa,GAAG;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"chips.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chips.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,KAAK,aAAa,GAAG;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC;AACjD,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAAC;AAC/C,MAAM,MAAM,eAAe,GAAG,UAAU,CACtC,YAAY,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,EACtD,aAAa,CACd,CAAC;AACF,MAAM,MAAM,iBAAiB,GAAG,UAAU,CACxC,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,EAC3E,aAAa,CACd,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,iMAatB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,iMAIzB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,qNA8BxB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,SAAS,qNAIrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"suggestion.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"suggestion.d.ts","sourceRoot":"","sources":["../../../src/components/suggestion/suggestion.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digdir/designsystemet-react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.18.0",
|
|
5
5
|
"description": "React components for Designsystemet",
|
|
6
6
|
"author": "Designsystemet team",
|
|
7
7
|
"repository": {
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
"@radix-ui/react-slot": "^1.2.5",
|
|
42
42
|
"@tanstack/react-virtual": "^3.14.2",
|
|
43
43
|
"clsx": "^2.1.1",
|
|
44
|
-
"@digdir/designsystemet-types": "1.
|
|
45
|
-
"@digdir/designsystemet-web": "1.
|
|
44
|
+
"@digdir/designsystemet-types": "1.18.0",
|
|
45
|
+
"@digdir/designsystemet-web": "1.18.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@rollup/plugin-commonjs": "29.0.3",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"storybook": "10.4.4",
|
|
64
64
|
"tsx": "4.22.4",
|
|
65
65
|
"typescript": "5.9.3",
|
|
66
|
-
"@digdir/designsystemet-css": "^1.
|
|
66
|
+
"@digdir/designsystemet-css": "^1.18.0"
|
|
67
67
|
},
|
|
68
68
|
"scripts": {
|
|
69
69
|
"build": "pnpm run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",
|