@digdir/designsystemet-react 1.1.0 → 1.1.2
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/Suggestion/Suggestion.js +3 -1
- package/dist/cjs/components/Tooltip/Tooltip.js +33 -1
- package/dist/esm/components/Suggestion/Suggestion.js +4 -2
- package/dist/esm/components/Tooltip/Tooltip.js +33 -1
- package/dist/types/components/Suggestion/Suggestion.d.ts.map +1 -1
- package/dist/types/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/package.json +9 -9
|
@@ -30,6 +30,8 @@ const nextItems = (data, prev, multiple) => {
|
|
|
30
30
|
const defaultFilter = ({ label, input }) => label.toLowerCase().includes(input.value.trim().toLowerCase());
|
|
31
31
|
const Suggestion = react.forwardRef(function Suggestion({ children, className, creatable = false, defaultValue, filter = true, multiple = false, name, onValueChange, value, ...rest }, ref) {
|
|
32
32
|
const uComboboxRef = react.useRef(null);
|
|
33
|
+
const generatedSelectId = react.useId();
|
|
34
|
+
const selectId = rest.id ? `${rest.id}-select` : generatedSelectId;
|
|
33
35
|
const isContolled = value !== undefined;
|
|
34
36
|
const mergedRefs = useMergeRefs.useMergeRefs([ref, uComboboxRef]);
|
|
35
37
|
const [isEmpty, setIsEmpty] = react.useState(false);
|
|
@@ -78,7 +80,7 @@ const Suggestion = react.forwardRef(function Suggestion({ children, className, c
|
|
|
78
80
|
}
|
|
79
81
|
setIsEmpty(index === disabled);
|
|
80
82
|
}, [filter]);
|
|
81
|
-
return (jsxRuntime.jsx(SuggestionContext.Provider, { value: { isEmpty, selectedItems, handleFilter }, children: jsxRuntime.jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [children, !!name && jsxRuntime.jsx("select", { name: name, multiple: true, hidden: true })] }) }));
|
|
83
|
+
return (jsxRuntime.jsx(SuggestionContext.Provider, { value: { isEmpty, selectedItems, handleFilter }, children: jsxRuntime.jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [children, !!name && (jsxRuntime.jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
|
|
82
84
|
});
|
|
83
85
|
|
|
84
86
|
exports.Suggestion = Suggestion;
|
|
@@ -57,6 +57,7 @@ const Tooltip = react.forwardRef(function Tooltip({ id, children, content, place
|
|
|
57
57
|
: []),
|
|
58
58
|
dom.shift(),
|
|
59
59
|
arrowPseudoElement,
|
|
60
|
+
safeAreaElement,
|
|
60
61
|
],
|
|
61
62
|
}).then(({ x, y }) => {
|
|
62
63
|
tooltip.style.translate = `${x}px ${y}px`;
|
|
@@ -89,7 +90,7 @@ const Tooltip = react.forwardRef(function Tooltip({ id, children, content, place
|
|
|
89
90
|
? 'popoverTargetAction'
|
|
90
91
|
: 'popovertargetaction']: 'show',
|
|
91
92
|
};
|
|
92
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsxRuntime.jsx("span", { ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, popover: 'manual', ...rest, children: content })] }));
|
|
93
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsxRuntime.jsx("span", { onMouseEnter: setOpen, onMouseLeave: setClose, ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, popover: 'manual', ...rest, children: content })] }));
|
|
93
94
|
});
|
|
94
95
|
const arrowPseudoElement = {
|
|
95
96
|
name: 'ArrowPseudoElement',
|
|
@@ -116,5 +117,36 @@ const arrowPseudoElement = {
|
|
|
116
117
|
return data;
|
|
117
118
|
},
|
|
118
119
|
};
|
|
120
|
+
const safeAreaElement = {
|
|
121
|
+
name: 'SafeAreaElement',
|
|
122
|
+
fn(data) {
|
|
123
|
+
const { elements, placement } = data;
|
|
124
|
+
let width = '100%';
|
|
125
|
+
let height = 'var(--dsc-tooltip-arrow-size)';
|
|
126
|
+
let translate = '0px';
|
|
127
|
+
switch (placement) {
|
|
128
|
+
case 'top':
|
|
129
|
+
translate = `-50% 0%`;
|
|
130
|
+
break;
|
|
131
|
+
case 'right':
|
|
132
|
+
height = '100%';
|
|
133
|
+
width = 'var(--dsc-tooltip-arrow-size)';
|
|
134
|
+
translate = '-100% -50%';
|
|
135
|
+
break;
|
|
136
|
+
case 'bottom':
|
|
137
|
+
translate = '-50% -100%';
|
|
138
|
+
break;
|
|
139
|
+
case 'left':
|
|
140
|
+
height = '100%';
|
|
141
|
+
width = 'var(--dsc-tooltip-arrow-size)';
|
|
142
|
+
translate = '0 -50%';
|
|
143
|
+
break;
|
|
144
|
+
}
|
|
145
|
+
elements.floating.style.setProperty('--_dsc-tooltip-safearea-height', height);
|
|
146
|
+
elements.floating.style.setProperty('--_dsc-tooltip-safearea-width', width);
|
|
147
|
+
elements.floating.style.setProperty('--_dsc-tooltip-safearea-translate', translate);
|
|
148
|
+
return data;
|
|
149
|
+
},
|
|
150
|
+
};
|
|
119
151
|
|
|
120
152
|
exports.Tooltip = Tooltip;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
-
import { forwardRef, createContext, useRef, useState, useEffect, useCallback } from 'react';
|
|
3
|
+
import { forwardRef, createContext, useRef, useId, useState, useEffect, useCallback } from 'react';
|
|
4
4
|
import '@u-elements/u-combobox';
|
|
5
5
|
import cl from 'clsx/lite';
|
|
6
6
|
import { useMergeRefs } from '../../utilities/hooks/useMergeRefs/useMergeRefs.js';
|
|
@@ -28,6 +28,8 @@ const nextItems = (data, prev, multiple) => {
|
|
|
28
28
|
const defaultFilter = ({ label, input }) => label.toLowerCase().includes(input.value.trim().toLowerCase());
|
|
29
29
|
const Suggestion = forwardRef(function Suggestion({ children, className, creatable = false, defaultValue, filter = true, multiple = false, name, onValueChange, value, ...rest }, ref) {
|
|
30
30
|
const uComboboxRef = useRef(null);
|
|
31
|
+
const generatedSelectId = useId();
|
|
32
|
+
const selectId = rest.id ? `${rest.id}-select` : generatedSelectId;
|
|
31
33
|
const isContolled = value !== undefined;
|
|
32
34
|
const mergedRefs = useMergeRefs([ref, uComboboxRef]);
|
|
33
35
|
const [isEmpty, setIsEmpty] = useState(false);
|
|
@@ -76,7 +78,7 @@ const Suggestion = forwardRef(function Suggestion({ children, className, creatab
|
|
|
76
78
|
}
|
|
77
79
|
setIsEmpty(index === disabled);
|
|
78
80
|
}, [filter]);
|
|
79
|
-
return (jsx(SuggestionContext.Provider, { value: { isEmpty, selectedItems, handleFilter }, children: jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [children, !!name && jsx("select", { name: name, multiple: true, hidden: true })] }) }));
|
|
81
|
+
return (jsx(SuggestionContext.Provider, { value: { isEmpty, selectedItems, handleFilter }, children: jsxs("u-combobox", { "data-multiple": multiple || undefined, "data-creatable": creatable || undefined, class: cl('ds-suggestion', className), ref: mergedRefs, ...rest, children: [children, !!name && (jsx("select", { name: name, multiple: true, hidden: true, id: selectId }))] }) }));
|
|
80
82
|
});
|
|
81
83
|
|
|
82
84
|
export { Suggestion, SuggestionContext };
|
|
@@ -55,6 +55,7 @@ const Tooltip = forwardRef(function Tooltip({ id, children, content, placement =
|
|
|
55
55
|
: []),
|
|
56
56
|
shift(),
|
|
57
57
|
arrowPseudoElement,
|
|
58
|
+
safeAreaElement,
|
|
58
59
|
],
|
|
59
60
|
}).then(({ x, y }) => {
|
|
60
61
|
tooltip.style.translate = `${x}px ${y}px`;
|
|
@@ -87,7 +88,7 @@ const Tooltip = forwardRef(function Tooltip({ id, children, content, placement =
|
|
|
87
88
|
? 'popoverTargetAction'
|
|
88
89
|
: 'popovertargetaction']: 'show',
|
|
89
90
|
};
|
|
90
|
-
return (jsxs(Fragment$1, { children: [jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsx("span", { ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, popover: 'manual', ...rest, children: content })] }));
|
|
91
|
+
return (jsxs(Fragment$1, { children: [jsx(ChildContainer, { ref: triggerRef, ...popoverProps, onMouseEnter: setOpen, onMouseLeave: setClose, onFocus: setOpen, onBlur: setClose, children: children }), jsx("span", { onMouseEnter: setOpen, onMouseLeave: setClose, ref: mergedRefs, role: 'tooltip', className: cl('ds-tooltip', className), id: id ?? randomTooltipId, popover: 'manual', ...rest, children: content })] }));
|
|
91
92
|
});
|
|
92
93
|
const arrowPseudoElement = {
|
|
93
94
|
name: 'ArrowPseudoElement',
|
|
@@ -114,5 +115,36 @@ const arrowPseudoElement = {
|
|
|
114
115
|
return data;
|
|
115
116
|
},
|
|
116
117
|
};
|
|
118
|
+
const safeAreaElement = {
|
|
119
|
+
name: 'SafeAreaElement',
|
|
120
|
+
fn(data) {
|
|
121
|
+
const { elements, placement } = data;
|
|
122
|
+
let width = '100%';
|
|
123
|
+
let height = 'var(--dsc-tooltip-arrow-size)';
|
|
124
|
+
let translate = '0px';
|
|
125
|
+
switch (placement) {
|
|
126
|
+
case 'top':
|
|
127
|
+
translate = `-50% 0%`;
|
|
128
|
+
break;
|
|
129
|
+
case 'right':
|
|
130
|
+
height = '100%';
|
|
131
|
+
width = 'var(--dsc-tooltip-arrow-size)';
|
|
132
|
+
translate = '-100% -50%';
|
|
133
|
+
break;
|
|
134
|
+
case 'bottom':
|
|
135
|
+
translate = '-50% -100%';
|
|
136
|
+
break;
|
|
137
|
+
case 'left':
|
|
138
|
+
height = '100%';
|
|
139
|
+
width = 'var(--dsc-tooltip-arrow-size)';
|
|
140
|
+
translate = '0 -50%';
|
|
141
|
+
break;
|
|
142
|
+
}
|
|
143
|
+
elements.floating.style.setProperty('--_dsc-tooltip-safearea-height', height);
|
|
144
|
+
elements.floating.style.setProperty('--_dsc-tooltip-safearea-width', width);
|
|
145
|
+
elements.floating.style.setProperty('--_dsc-tooltip-safearea-translate', translate);
|
|
146
|
+
return data;
|
|
147
|
+
},
|
|
148
|
+
};
|
|
117
149
|
|
|
118
150
|
export { Tooltip };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Suggestion.d.ts","sourceRoot":"","sources":["../../../src/components/Suggestion/Suggestion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,
|
|
1
|
+
{"version":3,"file":"Suggestion.d.ts","sourceRoot":"","sources":["../../../src/components/Suggestion/Suggestion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAC;AACf,OAAO,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAInE,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC;AAEtE,KAAK,IAAI,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7C,KAAK,MAAM,GAAG,CAAC,IAAI,EAAE;IACnB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,EAAE,iBAAiB,CAAC;IACjC;;OAEG;IACH,KAAK,EAAE,gBAAgB,CAAC;CACzB,KAAK,OAAO,CAAC;AAEd,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,IAAI,EAAE,CAAC;IACvB,YAAY,EAAE,CAAC,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;CACzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,sCAE5B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AA+BzC,eAAO,MAAM,UAAU;IAxErB;;;;;;;;OAQG;aACM,OAAO,GAAG,MAAM;IACzB;;;;OAIG;gBACS,OAAO;IACnB;;;;OAIG;eACQ,OAAO;IAClB;;;OAGG;YACK,gBAAgB;IACxB;;OAEG;mBACY,gBAAgB;IAC/B;;OAEG;oBACa,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI;IACvC;;;;OAIG;WACI,MAAM;qFAiId,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAWzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,YAAY,GAAG,UAAU,CACnC,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC,GAAG,cAAc,CAAC,cAAc,CAAC,EACjE;IACE;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,YAAY,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC;IAC/D;;QAEI;IACJ,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CACF,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO;IA1ChB;;;;;OAKG;cACO,CAAC,YAAY,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC,GAAG,MAAM;IAC9D;;QAEI;aACK,MAAM;IACf;;;OAGG;gBACS,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM;IAC/C;;;OAGG;oBACa,OAAO;IACvB;;;OAGG;WACI,OAAO;
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAWzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,YAAY,GAAG,UAAU,CACnC,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC,GAAG,cAAc,CAAC,cAAc,CAAC,EACjE;IACE;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,YAAY,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC;IAC/D;;QAEI;IACJ,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CACF,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO;IA1ChB;;;;;OAKG;cACO,CAAC,YAAY,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC,GAAG,MAAM;IAC9D;;QAEI;aACK,MAAM;IACf;;;OAGG;gBACS,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM;IAC/C;;;OAGG;oBACa,OAAO;IACvB;;;OAGG;WACI,OAAO;kCAiJjB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digdir/designsystemet-react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.2",
|
|
5
5
|
"description": "React components for Designsystemet",
|
|
6
6
|
"author": "Designsystemet team",
|
|
7
7
|
"repository": {
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@floating-ui/dom": "^1.7.1",
|
|
40
40
|
"@floating-ui/react": "0.26.23",
|
|
41
|
-
"@navikt/aksel-icons": "^7.
|
|
41
|
+
"@navikt/aksel-icons": "^7.23.2",
|
|
42
42
|
"@radix-ui/react-slot": "^1.2.3",
|
|
43
43
|
"@tanstack/react-virtual": "^3.13.10",
|
|
44
44
|
"@u-elements/u-combobox": "^0.0.14",
|
|
@@ -47,11 +47,11 @@
|
|
|
47
47
|
"clsx": "^2.1.1"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@rollup/plugin-commonjs": "^28.0.
|
|
50
|
+
"@rollup/plugin-commonjs": "^28.0.6",
|
|
51
51
|
"@rollup/plugin-node-resolve": "^16.0.1",
|
|
52
|
-
"@storybook/addon-docs": "^9.0.
|
|
53
|
-
"@storybook/addon-vitest": "^9.0.
|
|
54
|
-
"@storybook/react-vite": "^9.0.
|
|
52
|
+
"@storybook/addon-docs": "^9.0.12",
|
|
53
|
+
"@storybook/addon-vitest": "^9.0.12",
|
|
54
|
+
"@storybook/react-vite": "^9.0.12",
|
|
55
55
|
"@testing-library/dom": "^10.4.0",
|
|
56
56
|
"@testing-library/jest-dom": "^6.6.3",
|
|
57
57
|
"@testing-library/react": "^16.3.0",
|
|
@@ -62,12 +62,12 @@
|
|
|
62
62
|
"react": "^19.1.0",
|
|
63
63
|
"react-dom": "^19.1.0",
|
|
64
64
|
"rimraf": "^6.0.1",
|
|
65
|
-
"rollup": "^4.
|
|
65
|
+
"rollup": "^4.44.0",
|
|
66
66
|
"rollup-plugin-copy": "^3.5.0",
|
|
67
|
-
"storybook": "^9.0.
|
|
67
|
+
"storybook": "^9.0.12",
|
|
68
68
|
"tsx": "4.20.3",
|
|
69
69
|
"typescript": "^5.8.3",
|
|
70
|
-
"@digdir/designsystemet-css": "^1.1.
|
|
70
|
+
"@digdir/designsystemet-css": "^1.1.2"
|
|
71
71
|
},
|
|
72
72
|
"scripts": {
|
|
73
73
|
"build": "pnpm run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",
|