@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.
@@ -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,EAKpB,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;qFA6Hd,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;kCA8IjB,CAAC"}
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.0",
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.22.0",
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.5",
50
+ "@rollup/plugin-commonjs": "^28.0.6",
51
51
  "@rollup/plugin-node-resolve": "^16.0.1",
52
- "@storybook/addon-docs": "^9.0.10",
53
- "@storybook/addon-vitest": "^9.0.10",
54
- "@storybook/react-vite": "^9.0.10",
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.43.0",
65
+ "rollup": "^4.44.0",
66
66
  "rollup-plugin-copy": "^3.5.0",
67
- "storybook": "^9.0.10",
67
+ "storybook": "^9.0.12",
68
68
  "tsx": "4.20.3",
69
69
  "typescript": "^5.8.3",
70
- "@digdir/designsystemet-css": "^1.1.0"
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",