@digdir/designsystemet-react 1.1.0 → 1.1.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.
Files changed (4) hide show
  1. package/dist/cjs/components/Tooltip/Tooltip.js +33 -1
  2. package/dist/esm/components/Tooltip/Tooltip.js +33 -1
  3. package/dist/types/components/Tooltip/Tooltip.d.ts.map +1 -1
  4. package/package.json +9 -9
package/dist/cjs/components/Tooltip/Tooltip.js CHANGED
@@ -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;
package/dist/esm/components/Tooltip/Tooltip.js CHANGED
@@ -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 };
package/dist/types/components/Tooltip/Tooltip.d.ts.map CHANGED
@@ -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.1",
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.1"
71
71
  },
72
72
  "scripts": {
73
73
  "build": "pnpm run clean && tsc -b tsconfig.lib.json --emitDeclarationOnly false && rollup -c --bundleConfigAsCjs",