@navikt/ds-react 5.17.4 → 5.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/_docs.json +544 -64
- package/cjs/index.js +1 -0
- package/cjs/overlays/index.js +5 -0
- package/cjs/overlays/package.json +6 -0
- package/cjs/overlays/portal/Portal.js +55 -0
- package/cjs/tooltip/Tooltip.js +3 -7
- package/cjs/util/Slot.js +5 -2
- package/cjs/util/types/AsChildProps.js +2 -0
- package/esm/date/hooks/useDatepicker.d.ts +1 -1
- package/esm/date/hooks/useMonthPicker.d.ts +1 -1
- package/esm/date/parts/DateInput.d.ts +1 -1
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/esm/overlays/index.d.ts +2 -0
- package/esm/overlays/index.js +2 -0
- package/esm/overlays/index.js.map +1 -0
- package/esm/overlays/portal/Portal.d.ts +11 -0
- package/esm/overlays/portal/Portal.js +27 -0
- package/esm/overlays/portal/Portal.js.map +1 -0
- package/esm/tooltip/Tooltip.js +4 -8
- package/esm/tooltip/Tooltip.js.map +1 -1
- package/esm/util/Slot.js +5 -2
- package/esm/util/Slot.js.map +1 -1
- package/esm/util/types/AsChildProps.d.ts +36 -0
- package/esm/util/types/AsChildProps.js +2 -0
- package/esm/util/types/AsChildProps.js.map +1 -0
- package/esm/util/types/index.d.ts +1 -0
- package/package.json +3 -3
- package/src/date/hooks/useDatepicker.tsx +1 -1
- package/src/date/hooks/useMonthPicker.tsx +1 -1
- package/src/date/parts/DateInput.tsx +1 -1
- package/src/index.ts +1 -0
- package/src/overlays/index.ts +2 -0
- package/src/overlays/portal/Portal.stories.tsx +99 -0
- package/src/overlays/portal/Portal.tsx +32 -0
- package/src/tooltip/Tooltip.tsx +4 -8
- package/src/util/Slot.tsx +4 -2
- package/src/util/types/AsChildProps.ts +37 -0
- package/src/util/types/index.ts +1 -0
package/cjs/index.js
CHANGED
|
@@ -26,6 +26,7 @@ __exportStar(require("./expansion-card"), exports);
|
|
|
26
26
|
__exportStar(require("./form"), exports);
|
|
27
27
|
__exportStar(require("./grid"), exports);
|
|
28
28
|
__exportStar(require("./guide-panel"), exports);
|
|
29
|
+
__exportStar(require("./overlays"), exports);
|
|
29
30
|
__exportStar(require("./help-text"), exports);
|
|
30
31
|
__exportStar(require("./internal-header"), exports);
|
|
31
32
|
__exportStar(require("./link"), exports);
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
26
|
+
var t = {};
|
|
27
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
28
|
+
t[p] = s[p];
|
|
29
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
30
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
31
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
32
|
+
t[p[i]] = s[p[i]];
|
|
33
|
+
}
|
|
34
|
+
return t;
|
|
35
|
+
};
|
|
36
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
37
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
|
+
};
|
|
39
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
+
exports.Portal = void 0;
|
|
41
|
+
const react_1 = __importStar(require("react"));
|
|
42
|
+
const react_dom_1 = __importDefault(require("react-dom"));
|
|
43
|
+
const provider_1 = require("../../provider");
|
|
44
|
+
const Slot_1 = require("../../util/Slot");
|
|
45
|
+
exports.Portal = (0, react_1.forwardRef)((_a, ref) => {
|
|
46
|
+
var _b, _c, _d;
|
|
47
|
+
var { rootElement, asChild } = _a, rest = __rest(_a, ["rootElement", "asChild"]);
|
|
48
|
+
const contextRoot = (_b = (0, provider_1.useProvider)()) === null || _b === void 0 ? void 0 : _b.rootElement;
|
|
49
|
+
const root = (_c = rootElement !== null && rootElement !== void 0 ? rootElement : contextRoot) !== null && _c !== void 0 ? _c : (_d = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _d === void 0 ? void 0 : _d.body;
|
|
50
|
+
const Component = asChild ? Slot_1.Slot : "div";
|
|
51
|
+
return root
|
|
52
|
+
? react_dom_1.default.createPortal(react_1.default.createElement(Component, Object.assign({ ref: ref, "data-aksel-portal": "" }, rest)), root)
|
|
53
|
+
: null;
|
|
54
|
+
});
|
|
55
|
+
exports.default = exports.Portal;
|
package/cjs/tooltip/Tooltip.js
CHANGED
|
@@ -42,7 +42,7 @@ const react_1 = require("@floating-ui/react");
|
|
|
42
42
|
const clsx_1 = __importDefault(require("clsx"));
|
|
43
43
|
const react_2 = __importStar(require("react"));
|
|
44
44
|
const ModalContext_1 = require("../modal/ModalContext");
|
|
45
|
-
const
|
|
45
|
+
const Portal_1 = __importDefault(require("../overlays/portal/Portal"));
|
|
46
46
|
const typography_1 = require("../typography");
|
|
47
47
|
const hooks_1 = require("../util/hooks");
|
|
48
48
|
const useControllableState_1 = require("../util/hooks/useControllableState");
|
|
@@ -61,7 +61,6 @@ const useMergeRefs_1 = require("../util/hooks/useMergeRefs");
|
|
|
61
61
|
* ```
|
|
62
62
|
*/
|
|
63
63
|
exports.Tooltip = (0, react_2.forwardRef)((_a, ref) => {
|
|
64
|
-
var _b;
|
|
65
64
|
var { children, className, arrow: _arrow = true, placement: _placement = "top", open, defaultOpen = false, onOpenChange, offset: _offset, content, delay = 150, id, keys, maxChar = 80 } = _a, rest = __rest(_a, ["children", "className", "arrow", "placement", "open", "defaultOpen", "onOpenChange", "offset", "content", "delay", "id", "keys", "maxChar"]);
|
|
66
65
|
const [_open, _setOpen] = (0, useControllableState_1.useControllableState)({
|
|
67
66
|
defaultValue: defaultOpen,
|
|
@@ -70,10 +69,7 @@ exports.Tooltip = (0, react_2.forwardRef)((_a, ref) => {
|
|
|
70
69
|
});
|
|
71
70
|
const arrowRef = (0, react_2.useRef)(null);
|
|
72
71
|
const modalContext = (0, react_2.useContext)(ModalContext_1.ModalContext);
|
|
73
|
-
const
|
|
74
|
-
const rootElement = modalContext
|
|
75
|
-
? modalContext.ref.current
|
|
76
|
-
: providerRootElement;
|
|
72
|
+
const rootElement = modalContext ? modalContext.ref.current : undefined;
|
|
77
73
|
const { x, y, strategy, context, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: { referenceHidden } = {}, }, refs, } = (0, react_1.useFloating)({
|
|
78
74
|
placement: _placement,
|
|
79
75
|
open: _open,
|
|
@@ -114,7 +110,7 @@ exports.Tooltip = (0, react_2.forwardRef)((_a, ref) => {
|
|
|
114
110
|
(0, react_2.cloneElement)(children, getReferenceProps(Object.assign(Object.assign({}, children.props), { ref: childMergedRef, "aria-describedby": _open
|
|
115
111
|
? (0, clsx_1.default)(ariaId, children === null || children === void 0 ? void 0 : children.props["aria-describedby"])
|
|
116
112
|
: children === null || children === void 0 ? void 0 : children.props["aria-describedby"] }))),
|
|
117
|
-
react_2.default.createElement(
|
|
113
|
+
react_2.default.createElement(Portal_1.default, { rootElement: rootElement }, _open && (react_2.default.createElement("div", Object.assign({}, getFloatingProps(Object.assign(Object.assign({}, rest), { ref: mergedRef, style: {
|
|
118
114
|
position: strategy,
|
|
119
115
|
top: y !== null && y !== void 0 ? y : 0,
|
|
120
116
|
left: x !== null && x !== void 0 ? x : 0,
|
package/cjs/util/Slot.js
CHANGED
|
@@ -39,6 +39,7 @@ exports.Slot = void 0;
|
|
|
39
39
|
const React = __importStar(require("react"));
|
|
40
40
|
const useMergeRefs_1 = require("./hooks/useMergeRefs");
|
|
41
41
|
exports.Slot = React.forwardRef((props, forwardedRef) => {
|
|
42
|
+
var _a;
|
|
42
43
|
const { children } = props, slotProps = __rest(props, ["children"]);
|
|
43
44
|
if (React.isValidElement(children)) {
|
|
44
45
|
return React.cloneElement(children, Object.assign(Object.assign({}, mergeProps(slotProps, children.props)), { ref: forwardedRef
|
|
@@ -46,8 +47,10 @@ exports.Slot = React.forwardRef((props, forwardedRef) => {
|
|
|
46
47
|
: children.ref }));
|
|
47
48
|
}
|
|
48
49
|
if (React.Children.count(children) > 1) {
|
|
49
|
-
|
|
50
|
-
|
|
50
|
+
const error = new Error("Aksel: Components using 'asChild' expects to recieve a single React element child.");
|
|
51
|
+
error.name = "SlotError";
|
|
52
|
+
(_a = Error.captureStackTrace) === null || _a === void 0 ? void 0 : _a.call(Error, error, exports.Slot);
|
|
53
|
+
throw error;
|
|
51
54
|
}
|
|
52
55
|
return null;
|
|
53
56
|
});
|
|
@@ -31,7 +31,7 @@ export interface UseDatepickerOptions extends Pick<DatePickerProps, "locale" | "
|
|
|
31
31
|
* Allows input of with 'yy' year format.
|
|
32
32
|
* @default true
|
|
33
33
|
* @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
|
|
34
|
-
* In
|
|
34
|
+
* In 2024 this equals to 1944 - 2043
|
|
35
35
|
*/
|
|
36
36
|
allowTwoDigitYear?: boolean;
|
|
37
37
|
/**
|
|
@@ -27,7 +27,7 @@ export interface UseMonthPickerOptions extends Pick<MonthPickerProps, "locale" |
|
|
|
27
27
|
* Allows input of with 'yy' year format.
|
|
28
28
|
* @default true
|
|
29
29
|
* @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
|
|
30
|
-
* In
|
|
30
|
+
* In 2024 this equals to 1944 - 2043
|
|
31
31
|
*/
|
|
32
32
|
allowTwoDigitYear?: boolean;
|
|
33
33
|
/**
|
|
@@ -6,7 +6,7 @@ export interface DateInputProps extends FormFieldProps, Omit<InputHTMLAttributes
|
|
|
6
6
|
*/
|
|
7
7
|
label: React.ReactNode;
|
|
8
8
|
/**
|
|
9
|
-
* Shows label and description for
|
|
9
|
+
* Shows label and description for screen readers only
|
|
10
10
|
* @default false
|
|
11
11
|
*/
|
|
12
12
|
hideLabel?: boolean;
|
package/esm/index.d.ts
CHANGED
package/esm/index.js
CHANGED
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/overlays/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React, { HTMLAttributes } from "react";
|
|
2
|
+
import { AsChildProps } from "../../util/types";
|
|
3
|
+
interface PortalBaseProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
/**
|
|
5
|
+
* An optional container where the portaled content should be appended.
|
|
6
|
+
*/
|
|
7
|
+
rootElement?: HTMLElement | null;
|
|
8
|
+
}
|
|
9
|
+
export type PortalProps = PortalBaseProps & AsChildProps;
|
|
10
|
+
export declare const Portal: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
export default Portal;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import React, { forwardRef } from "react";
|
|
13
|
+
import ReactDOM from "react-dom";
|
|
14
|
+
import { useProvider } from "../../provider";
|
|
15
|
+
import { Slot } from "../../util/Slot";
|
|
16
|
+
export const Portal = forwardRef((_a, ref) => {
|
|
17
|
+
var _b, _c, _d;
|
|
18
|
+
var { rootElement, asChild } = _a, rest = __rest(_a, ["rootElement", "asChild"]);
|
|
19
|
+
const contextRoot = (_b = useProvider()) === null || _b === void 0 ? void 0 : _b.rootElement;
|
|
20
|
+
const root = (_c = rootElement !== null && rootElement !== void 0 ? rootElement : contextRoot) !== null && _c !== void 0 ? _c : (_d = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) === null || _d === void 0 ? void 0 : _d.body;
|
|
21
|
+
const Component = asChild ? Slot : "div";
|
|
22
|
+
return root
|
|
23
|
+
? ReactDOM.createPortal(React.createElement(Component, Object.assign({ ref: ref, "data-aksel-portal": "" }, rest)), root)
|
|
24
|
+
: null;
|
|
25
|
+
});
|
|
26
|
+
export default Portal;
|
|
27
|
+
//# sourceMappingURL=Portal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../../../src/overlays/portal/Portal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAkB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAYvC,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,EAAiC,EAAE,GAAG,EAAE,EAAE;;QAA1C,EAAE,WAAW,EAAE,OAAO,OAAW,EAAN,IAAI,cAA/B,0BAAiC,CAAF;IAC9B,MAAM,WAAW,GAAG,MAAA,WAAW,EAAE,0CAAE,WAAW,CAAC;IAC/C,MAAM,IAAI,GAAG,MAAA,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW,mCAAI,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,0CAAE,IAAI,CAAC;IAEtE,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,OAAO,IAAI;QACT,CAAC,CAAC,QAAQ,CAAC,YAAY,CACnB,oBAAC,SAAS,kBAAC,GAAG,EAAE,GAAG,uBAAoB,EAAE,IAAK,IAAI,EAAI,EACtD,IAAI,CACL;QACH,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
package/esm/tooltip/Tooltip.js
CHANGED
|
@@ -9,11 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import {
|
|
12
|
+
import { autoUpdate, arrow as flArrow, flip, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
|
|
13
13
|
import cl from "clsx";
|
|
14
14
|
import React, { cloneElement, forwardRef, useContext, useRef, } from "react";
|
|
15
15
|
import { ModalContext } from "../modal/ModalContext";
|
|
16
|
-
import
|
|
16
|
+
import Portal from "../overlays/portal/Portal";
|
|
17
17
|
import { Detail } from "../typography";
|
|
18
18
|
import { useId } from "../util/hooks";
|
|
19
19
|
import { useControllableState } from "../util/hooks/useControllableState";
|
|
@@ -32,7 +32,6 @@ import { useMergeRefs } from "../util/hooks/useMergeRefs";
|
|
|
32
32
|
* ```
|
|
33
33
|
*/
|
|
34
34
|
export const Tooltip = forwardRef((_a, ref) => {
|
|
35
|
-
var _b;
|
|
36
35
|
var { children, className, arrow: _arrow = true, placement: _placement = "top", open, defaultOpen = false, onOpenChange, offset: _offset, content, delay = 150, id, keys, maxChar = 80 } = _a, rest = __rest(_a, ["children", "className", "arrow", "placement", "open", "defaultOpen", "onOpenChange", "offset", "content", "delay", "id", "keys", "maxChar"]);
|
|
37
36
|
const [_open, _setOpen] = useControllableState({
|
|
38
37
|
defaultValue: defaultOpen,
|
|
@@ -41,10 +40,7 @@ export const Tooltip = forwardRef((_a, ref) => {
|
|
|
41
40
|
});
|
|
42
41
|
const arrowRef = useRef(null);
|
|
43
42
|
const modalContext = useContext(ModalContext);
|
|
44
|
-
const
|
|
45
|
-
const rootElement = modalContext
|
|
46
|
-
? modalContext.ref.current
|
|
47
|
-
: providerRootElement;
|
|
43
|
+
const rootElement = modalContext ? modalContext.ref.current : undefined;
|
|
48
44
|
const { x, y, strategy, context, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: { referenceHidden } = {}, }, refs, } = useFloating({
|
|
49
45
|
placement: _placement,
|
|
50
46
|
open: _open,
|
|
@@ -85,7 +81,7 @@ export const Tooltip = forwardRef((_a, ref) => {
|
|
|
85
81
|
cloneElement(children, getReferenceProps(Object.assign(Object.assign({}, children.props), { ref: childMergedRef, "aria-describedby": _open
|
|
86
82
|
? cl(ariaId, children === null || children === void 0 ? void 0 : children.props["aria-describedby"])
|
|
87
83
|
: children === null || children === void 0 ? void 0 : children.props["aria-describedby"] }))),
|
|
88
|
-
React.createElement(
|
|
84
|
+
React.createElement(Portal, { rootElement: rootElement }, _open && (React.createElement("div", Object.assign({}, getFloatingProps(Object.assign(Object.assign({}, rest), { ref: mergedRef, style: {
|
|
89
85
|
position: strategy,
|
|
90
86
|
top: y !== null && y !== void 0 ? y : 0,
|
|
91
87
|
left: x !== null && x !== void 0 ? x : 0,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EACL,
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}
|
package/esm/util/Slot.js
CHANGED
|
@@ -13,6 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
import * as React from "react";
|
|
14
14
|
import { mergeRefs } from "./hooks/useMergeRefs";
|
|
15
15
|
export const Slot = React.forwardRef((props, forwardedRef) => {
|
|
16
|
+
var _a;
|
|
16
17
|
const { children } = props, slotProps = __rest(props, ["children"]);
|
|
17
18
|
if (React.isValidElement(children)) {
|
|
18
19
|
return React.cloneElement(children, Object.assign(Object.assign({}, mergeProps(slotProps, children.props)), { ref: forwardedRef
|
|
@@ -20,8 +21,10 @@ export const Slot = React.forwardRef((props, forwardedRef) => {
|
|
|
20
21
|
: children.ref }));
|
|
21
22
|
}
|
|
22
23
|
if (React.Children.count(children) > 1) {
|
|
23
|
-
|
|
24
|
-
|
|
24
|
+
const error = new Error("Aksel: Components using 'asChild' expects to recieve a single React element child.");
|
|
25
|
+
error.name = "SlotError";
|
|
26
|
+
(_a = Error.captureStackTrace) === null || _a === void 0 ? void 0 : _a.call(Error, error, Slot);
|
|
27
|
+
throw error;
|
|
25
28
|
}
|
|
26
29
|
return null;
|
|
27
30
|
});
|
package/esm/util/Slot.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slot.js","sourceRoot":"","sources":["../../src/util/Slot.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,oFAAoF;AACpF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAMjD,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE
|
|
1
|
+
{"version":3,"file":"Slot.js","sourceRoot":"","sources":["../../src/util/Slot.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,oFAAoF;AACpF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAMjD,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;;IACtB,MAAM,EAAE,QAAQ,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAAlC,YAA0B,CAAQ,CAAC;IAEzC,IAAI,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;QACnC,OAAO,KAAK,CAAC,YAAY,CAAM,QAAQ,kCAClC,UAAU,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,KACxC,GAAG,EAAE,YAAY;gBACf,CAAC,CAAC,SAAS,CAAC,CAAC,YAAY,EAAG,QAAgB,CAAC,GAAG,CAAC,CAAC;gBAClD,CAAC,CAAE,QAAgB,CAAC,GAAG,IACzB,CAAC;IACL,CAAC;IAED,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QACvC,MAAM,KAAK,GAAG,IAAI,KAAK,CACrB,oFAAoF,CACrF,CAAC;QACF,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC;QACzB,MAAA,KAAK,CAAC,iBAAiB,sDAAG,KAAK,EAAE,IAAI,CAAC,CAAC;QACvC,MAAM,KAAK,CAAC;IACd,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CACF,CAAC;AAEF,SAAS,UAAU,CACjB,SAA8B,EAC9B,UAA+B;IAE/B,kCAAkC;IAClC,MAAM,aAAa,qBAAQ,UAAU,CAAE,CAAC;IAExC,KAAK,MAAM,QAAQ,IAAI,UAAU,EAAE,CAAC;QAClC,MAAM,aAAa,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;QAC1C,MAAM,cAAc,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;QAE5C,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5C,IAAI,SAAS,EAAE,CAAC;YACd,iDAAiD;YACjD,IAAI,aAAa,IAAI,cAAc,EAAE,CAAC;gBACpC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAe,EAAE,EAAE;oBAC/C,cAAc,CAAC,GAAG,IAAI,CAAC,CAAC;oBACxB,aAAa,CAAC,GAAG,IAAI,CAAC,CAAC;gBACzB,CAAC,CAAC;YACJ,CAAC;YACD,0DAA0D;iBACrD,IAAI,aAAa,EAAE,CAAC;gBACvB,aAAa,CAAC,QAAQ,CAAC,GAAG,aAAa,CAAC;YAC1C,CAAC;QACH,CAAC;QACD,iCAAiC;aAC5B,IAAI,QAAQ,KAAK,OAAO,EAAE,CAAC;YAC9B,aAAa,CAAC,QAAQ,CAAC,mCAAQ,aAAa,GAAK,cAAc,CAAE,CAAC;QACpE,CAAC;aAAM,IAAI,QAAQ,KAAK,WAAW,EAAE,CAAC;YACpC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,aAAa,EAAE,cAAc,CAAC;iBACtD,MAAM,CAAC,OAAO,CAAC;iBACf,IAAI,CAAC,GAAG,CAAC,CAAC;QACf,CAAC;IACH,CAAC;IAED,uCAAY,SAAS,GAAK,aAAa,EAAG;AAC5C,CAAC"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export type AsChildProps = {
|
|
3
|
+
children: React.ReactElement | false | null;
|
|
4
|
+
/**
|
|
5
|
+
* Renders the component and its child as a single element,
|
|
6
|
+
* merging the props of the component with the props of the child.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```tsx
|
|
10
|
+
* <Component asChild data-prop>
|
|
11
|
+
* <ChildComponent data-child />
|
|
12
|
+
* </Component>
|
|
13
|
+
*
|
|
14
|
+
* // Renders
|
|
15
|
+
* <MergedComponent data-prop data-child />
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
asChild: true;
|
|
19
|
+
} | {
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* Renders the component and its child as a single element,
|
|
23
|
+
* merging the props of the component with the props of the child.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```tsx
|
|
27
|
+
* <Component asChild data-prop>
|
|
28
|
+
* <ChildComponent data-child />
|
|
29
|
+
* </Component>
|
|
30
|
+
*
|
|
31
|
+
* // Renders
|
|
32
|
+
* <MergedComponent data-prop data-child />
|
|
33
|
+
* ```
|
|
34
|
+
*/
|
|
35
|
+
asChild?: false;
|
|
36
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AsChildProps.js","sourceRoot":"","sources":["../../../src/util/types/AsChildProps.ts"],"names":[],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.18.0",
|
|
4
4
|
"description": "Aksel react-components for NAV designsystem",
|
|
5
5
|
"author": "Aksel | NAV designsystem team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@floating-ui/react": "0.25.4",
|
|
41
|
-
"@navikt/aksel-icons": "^5.
|
|
42
|
-
"@navikt/ds-tokens": "^5.
|
|
41
|
+
"@navikt/aksel-icons": "^5.18.0",
|
|
42
|
+
"@navikt/ds-tokens": "^5.18.0",
|
|
43
43
|
"@radix-ui/react-tabs": "1.0.0",
|
|
44
44
|
"@radix-ui/react-toggle-group": "1.0.0",
|
|
45
45
|
"clsx": "^1.2.1",
|
|
@@ -53,7 +53,7 @@ export interface UseDatepickerOptions
|
|
|
53
53
|
* Allows input of with 'yy' year format.
|
|
54
54
|
* @default true
|
|
55
55
|
* @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
|
|
56
|
-
* In
|
|
56
|
+
* In 2024 this equals to 1944 - 2043
|
|
57
57
|
*/
|
|
58
58
|
allowTwoDigitYear?: boolean;
|
|
59
59
|
/**
|
|
@@ -39,7 +39,7 @@ export interface UseMonthPickerOptions
|
|
|
39
39
|
* Allows input of with 'yy' year format.
|
|
40
40
|
* @default true
|
|
41
41
|
* @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
|
|
42
|
-
* In
|
|
42
|
+
* In 2024 this equals to 1944 - 2043
|
|
43
43
|
*/
|
|
44
44
|
allowTwoDigitYear?: boolean;
|
|
45
45
|
/**
|
package/src/index.ts
CHANGED
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Box } from "../../layout/box";
|
|
3
|
+
import { Provider } from "../../provider";
|
|
4
|
+
import { Portal } from "./Portal";
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: "Utilities/Portal",
|
|
8
|
+
parameters: {
|
|
9
|
+
chromatic: { disable: true },
|
|
10
|
+
},
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export const Default = () => {
|
|
14
|
+
return (
|
|
15
|
+
<Box background="surface-neutral-subtle" border>
|
|
16
|
+
<h1>In regular DOM tree</h1>
|
|
17
|
+
<p>
|
|
18
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
|
|
19
|
+
necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio eum
|
|
20
|
+
commodi tempora unde. Nulla vel tempora incidunt? Voluptatem molestias
|
|
21
|
+
impedit commodi. Tenetur!
|
|
22
|
+
</p>
|
|
23
|
+
<Portal>
|
|
24
|
+
<h1>Inside Portal to different DOM tree</h1>
|
|
25
|
+
<p>
|
|
26
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
|
|
27
|
+
necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio
|
|
28
|
+
eum commodi tempora unde. Nulla vel tempora incidunt? Voluptatem
|
|
29
|
+
molestias impedit commodi. Tenetur!
|
|
30
|
+
</p>
|
|
31
|
+
</Portal>
|
|
32
|
+
</Box>
|
|
33
|
+
);
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export const CustomPortalRoot = () => {
|
|
37
|
+
const [portalContainer, setPortalContainer] =
|
|
38
|
+
React.useState<HTMLDivElement | null>(null);
|
|
39
|
+
|
|
40
|
+
return (
|
|
41
|
+
<Box background="surface-neutral-subtle">
|
|
42
|
+
<Box background="surface-alt-1-subtle">
|
|
43
|
+
<h1>Tree A</h1>
|
|
44
|
+
<Portal rootElement={portalContainer}>
|
|
45
|
+
<p>This is mounted to Tree B, while created inside Tree A</p>
|
|
46
|
+
</Portal>
|
|
47
|
+
</Box>
|
|
48
|
+
<Box background="surface-alt-3-subtle" ref={setPortalContainer}>
|
|
49
|
+
<h1>Tree B</h1>
|
|
50
|
+
</Box>
|
|
51
|
+
</Box>
|
|
52
|
+
);
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
export const CustomPortalRootFromProvider = () => {
|
|
56
|
+
const [portalContainer, setPortalContainer] =
|
|
57
|
+
React.useState<HTMLDivElement>();
|
|
58
|
+
|
|
59
|
+
return (
|
|
60
|
+
<Provider rootElement={portalContainer}>
|
|
61
|
+
<Box background="surface-neutral-subtle">
|
|
62
|
+
<Box background="surface-alt-1-subtle">
|
|
63
|
+
<h1>Tree A</h1>
|
|
64
|
+
<Portal>
|
|
65
|
+
<p>This is mounted to Tree B, while created inside Tree A</p>
|
|
66
|
+
</Portal>
|
|
67
|
+
</Box>
|
|
68
|
+
<Box background="surface-alt-3-subtle" ref={setPortalContainer}>
|
|
69
|
+
<h1>Tree B</h1>
|
|
70
|
+
</Box>
|
|
71
|
+
</Box>
|
|
72
|
+
</Provider>
|
|
73
|
+
);
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export const AsChild = () => {
|
|
77
|
+
return (
|
|
78
|
+
<Box background="surface-neutral-subtle" border>
|
|
79
|
+
<h1>In regular DOM tree</h1>
|
|
80
|
+
<p>
|
|
81
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
|
|
82
|
+
necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio eum
|
|
83
|
+
commodi tempora unde. Nulla vel tempora incidunt? Voluptatem molestias
|
|
84
|
+
impedit commodi. Tenetur!
|
|
85
|
+
</p>
|
|
86
|
+
<Portal asChild>
|
|
87
|
+
<div data-this-is-the-child>
|
|
88
|
+
<h1>Inside Portal to different DOM tree</h1>
|
|
89
|
+
<p>
|
|
90
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
|
|
91
|
+
necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio
|
|
92
|
+
eum commodi tempora unde. Nulla vel tempora incidunt? Voluptatem
|
|
93
|
+
molestias impedit commodi. Tenetur!
|
|
94
|
+
</p>
|
|
95
|
+
</div>
|
|
96
|
+
</Portal>
|
|
97
|
+
</Box>
|
|
98
|
+
);
|
|
99
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React, { HTMLAttributes, forwardRef } from "react";
|
|
2
|
+
import ReactDOM from "react-dom";
|
|
3
|
+
import { useProvider } from "../../provider";
|
|
4
|
+
import { Slot } from "../../util/Slot";
|
|
5
|
+
import { AsChildProps } from "../../util/types";
|
|
6
|
+
|
|
7
|
+
interface PortalBaseProps extends HTMLAttributes<HTMLDivElement> {
|
|
8
|
+
/**
|
|
9
|
+
* An optional container where the portaled content should be appended.
|
|
10
|
+
*/
|
|
11
|
+
rootElement?: HTMLElement | null;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export type PortalProps = PortalBaseProps & AsChildProps;
|
|
15
|
+
|
|
16
|
+
export const Portal = forwardRef<HTMLDivElement, PortalProps>(
|
|
17
|
+
({ rootElement, asChild, ...rest }, ref) => {
|
|
18
|
+
const contextRoot = useProvider()?.rootElement;
|
|
19
|
+
const root = rootElement ?? contextRoot ?? globalThis?.document?.body;
|
|
20
|
+
|
|
21
|
+
const Component = asChild ? Slot : "div";
|
|
22
|
+
|
|
23
|
+
return root
|
|
24
|
+
? ReactDOM.createPortal(
|
|
25
|
+
<Component ref={ref} data-aksel-portal="" {...rest} />,
|
|
26
|
+
root,
|
|
27
|
+
)
|
|
28
|
+
: null;
|
|
29
|
+
},
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
export default Portal;
|