@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.
Files changed (40) hide show
  1. package/_docs.json +544 -64
  2. package/cjs/index.js +1 -0
  3. package/cjs/overlays/index.js +5 -0
  4. package/cjs/overlays/package.json +6 -0
  5. package/cjs/overlays/portal/Portal.js +55 -0
  6. package/cjs/tooltip/Tooltip.js +3 -7
  7. package/cjs/util/Slot.js +5 -2
  8. package/cjs/util/types/AsChildProps.js +2 -0
  9. package/esm/date/hooks/useDatepicker.d.ts +1 -1
  10. package/esm/date/hooks/useMonthPicker.d.ts +1 -1
  11. package/esm/date/parts/DateInput.d.ts +1 -1
  12. package/esm/index.d.ts +1 -0
  13. package/esm/index.js +1 -0
  14. package/esm/index.js.map +1 -1
  15. package/esm/overlays/index.d.ts +2 -0
  16. package/esm/overlays/index.js +2 -0
  17. package/esm/overlays/index.js.map +1 -0
  18. package/esm/overlays/portal/Portal.d.ts +11 -0
  19. package/esm/overlays/portal/Portal.js +27 -0
  20. package/esm/overlays/portal/Portal.js.map +1 -0
  21. package/esm/tooltip/Tooltip.js +4 -8
  22. package/esm/tooltip/Tooltip.js.map +1 -1
  23. package/esm/util/Slot.js +5 -2
  24. package/esm/util/Slot.js.map +1 -1
  25. package/esm/util/types/AsChildProps.d.ts +36 -0
  26. package/esm/util/types/AsChildProps.js +2 -0
  27. package/esm/util/types/AsChildProps.js.map +1 -0
  28. package/esm/util/types/index.d.ts +1 -0
  29. package/package.json +3 -3
  30. package/src/date/hooks/useDatepicker.tsx +1 -1
  31. package/src/date/hooks/useMonthPicker.tsx +1 -1
  32. package/src/date/parts/DateInput.tsx +1 -1
  33. package/src/index.ts +1 -0
  34. package/src/overlays/index.ts +2 -0
  35. package/src/overlays/portal/Portal.stories.tsx +99 -0
  36. package/src/overlays/portal/Portal.tsx +32 -0
  37. package/src/tooltip/Tooltip.tsx +4 -8
  38. package/src/util/Slot.tsx +4 -2
  39. package/src/util/types/AsChildProps.ts +37 -0
  40. 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,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Portal = void 0;
4
+ var Portal_1 = require("./portal/Portal");
5
+ Object.defineProperty(exports, "Portal", { enumerable: true, get: function () { return Portal_1.Portal; } });
@@ -0,0 +1,6 @@
1
+ {
2
+ "sideEffects": false,
3
+ "main": "./index.js",
4
+ "module": "../../esm/overlays/index.js",
5
+ "types": "../../esm/overlays/index.d.ts"
6
+ }
@@ -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;
@@ -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 provider_1 = require("../provider");
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 providerRootElement = (_b = (0, provider_1.useProvider)()) === null || _b === void 0 ? void 0 : _b.rootElement;
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(react_1.FloatingPortal, { root: rootElement }, _open && (react_2.default.createElement("div", Object.assign({}, getFloatingProps(Object.assign(Object.assign({}, rest), { ref: mergedRef, style: {
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
- console.error("Aksel: Components using 'asChild' expects to recieve a single React element child.");
50
- return React.Children.only(null);
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
  });
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -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 2023 this equals to 1943 - 2042
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 2023 this equals to 1943 - 2042
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 screenreaders-only
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
@@ -10,6 +10,7 @@ export * from "./expansion-card";
10
10
  export * from "./form";
11
11
  export * from "./grid";
12
12
  export * from "./guide-panel";
13
+ export * from "./overlays";
13
14
  export * from "./help-text";
14
15
  export * from "./internal-header";
15
16
  export * from "./link";
package/esm/index.js CHANGED
@@ -10,6 +10,7 @@ export * from "./expansion-card";
10
10
  export * from "./form";
11
11
  export * from "./grid";
12
12
  export * from "./guide-panel";
13
+ export * from "./overlays";
13
14
  export * from "./help-text";
14
15
  export * from "./internal-header";
15
16
  export * from "./link";
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,2 @@
1
+ export { Portal } from "./portal/Portal";
2
+ export type { PortalProps } from "./portal/Portal";
@@ -0,0 +1,2 @@
1
+ export { Portal } from "./portal/Portal";
2
+ //# sourceMappingURL=index.js.map
@@ -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"}
@@ -9,11 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
9
9
  }
10
10
  return t;
11
11
  };
12
- import { FloatingPortal, autoUpdate, arrow as flArrow, flip, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
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 { useProvider } from "../provider";
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 providerRootElement = (_b = useProvider()) === null || _b === void 0 ? void 0 : _b.rootElement;
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(FloatingPortal, { root: rootElement }, _open && (React.createElement("div", Object.assign({}, getFloatingProps(Object.assign(Object.assign({}, rest), { ref: mergedRef, style: {
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":"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"}
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
- console.error("Aksel: Components using 'asChild' expects to recieve a single React element child.");
24
- return React.Children.only(null);
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
  });
@@ -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;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,OAAO,CAAC,KAAK,CACX,oFAAoF,CACrF,CAAC;QACF,OAAO,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnC,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"}
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,2 @@
1
+ export {};
2
+ //# sourceMappingURL=AsChildProps.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AsChildProps.js","sourceRoot":"","sources":["../../../src/util/types/AsChildProps.ts"],"names":[],"mappings":""}
@@ -1 +1,2 @@
1
1
  export type { OverridableComponent } from "./OverridableComponent";
2
+ export type { AsChildProps } from "./AsChildProps";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-react",
3
- "version": "5.17.4",
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.17.4",
42
- "@navikt/ds-tokens": "^5.17.4",
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 2023 this equals to 1943 - 2042
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 2023 this equals to 1943 - 2042
42
+ * In 2024 this equals to 1944 - 2043
43
43
  */
44
44
  allowTwoDigitYear?: boolean;
45
45
  /**
@@ -15,7 +15,7 @@ export interface DateInputProps
15
15
  */
16
16
  label: React.ReactNode;
17
17
  /**
18
- * Shows label and description for screenreaders-only
18
+ * Shows label and description for screen readers only
19
19
  * @default false
20
20
  */
21
21
  hideLabel?: boolean;
package/src/index.ts CHANGED
@@ -10,6 +10,7 @@ export * from "./expansion-card";
10
10
  export * from "./form";
11
11
  export * from "./grid";
12
12
  export * from "./guide-panel";
13
+ export * from "./overlays";
13
14
  export * from "./help-text";
14
15
  export * from "./internal-header";
15
16
  export * from "./link";
@@ -0,0 +1,2 @@
1
+ export { Portal } from "./portal/Portal";
2
+ export type { PortalProps } from "./portal/Portal";
@@ -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;