@navikt/ds-react 4.1.5 → 4.1.7
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 +19 -0
- package/cjs/help-text/HelpText.js +2 -2
- package/cjs/timeline/Pin.js +4 -7
- package/cjs/timeline/TimelineRow.js +1 -1
- package/cjs/timeline/period/ClickablePeriod.js +4 -7
- package/esm/help-text/HelpText.d.ts +4 -0
- package/esm/help-text/HelpText.js +2 -2
- package/esm/help-text/HelpText.js.map +1 -1
- package/esm/timeline/Pin.js +5 -8
- package/esm/timeline/Pin.js.map +1 -1
- package/esm/timeline/TimelineRow.js +1 -1
- package/esm/timeline/TimelineRow.js.map +1 -1
- package/esm/timeline/period/ClickablePeriod.js +5 -8
- package/esm/timeline/period/ClickablePeriod.js.map +1 -1
- package/package.json +2 -2
- package/src/help-text/HelpText.tsx +6 -1
- package/src/help-text/help-text.stories.tsx +34 -1
- package/src/timeline/Pin.tsx +6 -24
- package/src/timeline/TimelineRow.tsx +1 -0
- package/src/timeline/period/ClickablePeriod.tsx +6 -18
package/_docs.json
CHANGED
|
@@ -4359,6 +4359,25 @@
|
|
|
4359
4359
|
"name": "\"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\""
|
|
4360
4360
|
}
|
|
4361
4361
|
},
|
|
4362
|
+
"wrapperClassName": {
|
|
4363
|
+
"defaultValue": null,
|
|
4364
|
+
"description": "Classname for wrapper",
|
|
4365
|
+
"name": "wrapperClassName",
|
|
4366
|
+
"parent": {
|
|
4367
|
+
"fileName": "src/help-text/HelpText.tsx",
|
|
4368
|
+
"name": "HelpTextProps"
|
|
4369
|
+
},
|
|
4370
|
+
"declarations": [
|
|
4371
|
+
{
|
|
4372
|
+
"fileName": "src/help-text/HelpText.tsx",
|
|
4373
|
+
"name": "HelpTextProps"
|
|
4374
|
+
}
|
|
4375
|
+
],
|
|
4376
|
+
"required": false,
|
|
4377
|
+
"type": {
|
|
4378
|
+
"name": "string"
|
|
4379
|
+
}
|
|
4380
|
+
},
|
|
4362
4381
|
"className": {
|
|
4363
4382
|
"defaultValue": null,
|
|
4364
4383
|
"description": "",
|
|
@@ -56,11 +56,11 @@ const HelpTextIcon_1 = require("./HelpTextIcon");
|
|
|
56
56
|
* ```
|
|
57
57
|
*/
|
|
58
58
|
exports.HelpText = (0, react_1.forwardRef)((_a, ref) => {
|
|
59
|
-
var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick"]);
|
|
59
|
+
var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick, wrapperClassName } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick", "wrapperClassName"]);
|
|
60
60
|
const buttonRef = (0, react_1.useRef)(null);
|
|
61
61
|
const mergedRef = (0, react_1.useMemo)(() => (0, __1.mergeRefs)([buttonRef, ref]), [ref]);
|
|
62
62
|
const [open, setOpen] = (0, react_1.useState)(false);
|
|
63
|
-
return (react_1.default.createElement("div", { className: "navds-help-text" },
|
|
63
|
+
return (react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-help-text", wrapperClassName) },
|
|
64
64
|
react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => {
|
|
65
65
|
setOpen((x) => !x);
|
|
66
66
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
package/cjs/timeline/Pin.js
CHANGED
|
@@ -36,9 +36,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
exports.Pin = void 0;
|
|
38
38
|
const react_1 = require("@floating-ui/react");
|
|
39
|
-
const util_1 = require("../util");
|
|
40
39
|
const date_fns_1 = require("date-fns");
|
|
41
40
|
const react_2 = __importStar(require("react"));
|
|
41
|
+
const util_1 = require("../util");
|
|
42
42
|
const useTimelineContext_1 = require("./hooks/useTimelineContext");
|
|
43
43
|
const calc_1 = require("./utils/calc");
|
|
44
44
|
exports.Pin = (0, react_2.forwardRef)((_a, ref) => {
|
|
@@ -68,12 +68,6 @@ exports.Pin = (0, react_2.forwardRef)((_a, ref) => {
|
|
|
68
68
|
(0, react_1.useDismiss)(context),
|
|
69
69
|
]);
|
|
70
70
|
const mergedRef = (0, react_2.useMemo)(() => (0, util_1.mergeRefs)([refs.setReference, ref]), [ref, refs.setReference]);
|
|
71
|
-
(0, util_1.useEventListener)("focusin", (0, react_2.useCallback)((e) => {
|
|
72
|
-
var _a;
|
|
73
|
-
if (![refs.domReference.current, (_a = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _a === void 0 ? void 0 : _a.current].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target))) {
|
|
74
|
-
open && setOpen(false);
|
|
75
|
-
}
|
|
76
|
-
}, [open, refs.domReference, refs === null || refs === void 0 ? void 0 : refs.floating]));
|
|
77
71
|
const staticSide = {
|
|
78
72
|
top: "bottom",
|
|
79
73
|
right: "left",
|
|
@@ -96,6 +90,9 @@ exports.Pin = (0, react_2.forwardRef)((_a, ref) => {
|
|
|
96
90
|
})))),
|
|
97
91
|
children && (react_2.default.createElement("div", Object.assign({ className: "navds-timeline__popover", "data-placement": placement, "aria-hidden": !open, ref: refs.setFloating }, getFloatingProps({
|
|
98
92
|
tabIndex: -1,
|
|
93
|
+
onBlur: (e) => e.target.previousSibling !== document.activeElement &&
|
|
94
|
+
open &&
|
|
95
|
+
setOpen(false),
|
|
99
96
|
}), { style: Object.assign(Object.assign({}, floatingStyles), { display: open ? undefined : "none" }) }),
|
|
100
97
|
react_2.default.createElement("div", { className: "navds-timeline__popover-content" }, children),
|
|
101
98
|
react_2.default.createElement("div", { ref: (node) => {
|
|
@@ -64,7 +64,7 @@ exports.TimelineRow = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
64
64
|
react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-timeline__row", {
|
|
65
65
|
"navds-timeline__row--active": active,
|
|
66
66
|
}) },
|
|
67
|
-
react_1.default.createElement("ol", Object.assign({}, rest, { ref: ref, "aria-label": periods.length === 0
|
|
67
|
+
react_1.default.createElement("ol", Object.assign({}, rest, { tabIndex: -1, ref: ref, "aria-label": periods.length === 0
|
|
68
68
|
? "Ingen perioder"
|
|
69
69
|
: `${(0, date_fns_1.format)(earliest.start, "dd.MM.yyyy")} til ${(0, date_fns_1.format)(latest.end, "dd.MM.yyyy")}`, className: (0, clsx_1.default)("navds-timeline__row-periods", className), onKeyDown: (e) => {
|
|
70
70
|
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
|
|
@@ -27,9 +27,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
const react_1 = require("@floating-ui/react");
|
|
30
|
-
const util_1 = require("../../util");
|
|
31
30
|
const clsx_1 = __importDefault(require("clsx"));
|
|
32
31
|
const react_2 = __importStar(require("react"));
|
|
32
|
+
const util_1 = require("../../util");
|
|
33
33
|
const usePeriodContext_1 = require("../hooks/usePeriodContext");
|
|
34
34
|
const useRowContext_1 = require("../hooks/useRowContext");
|
|
35
35
|
const useTimelineContext_1 = require("../hooks/useTimelineContext");
|
|
@@ -62,12 +62,6 @@ const ClickablePeriod = react_2.default.memo(({ onSelectPeriod, start, end, stat
|
|
|
62
62
|
(0, react_1.useDismiss)(context),
|
|
63
63
|
]);
|
|
64
64
|
const mergedRef = (0, react_2.useMemo)(() => (0, util_1.mergeRefs)([refs.setReference, periodRef]), [periodRef, refs.setReference]);
|
|
65
|
-
(0, util_1.useEventListener)("focusin", (0, react_2.useCallback)((e) => {
|
|
66
|
-
var _a;
|
|
67
|
-
if (![refs.domReference.current, (_a = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _a === void 0 ? void 0 : _a.current].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target))) {
|
|
68
|
-
open && setOpen(false);
|
|
69
|
-
}
|
|
70
|
-
}, [open, refs.domReference, refs === null || refs === void 0 ? void 0 : refs.floating]));
|
|
71
65
|
const staticSide = {
|
|
72
66
|
top: "bottom",
|
|
73
67
|
right: "left",
|
|
@@ -111,6 +105,9 @@ const ClickablePeriod = react_2.default.memo(({ onSelectPeriod, start, end, stat
|
|
|
111
105
|
react_2.default.createElement("span", { className: "navds-timeline__period--inner" }, icon)),
|
|
112
106
|
children && (react_2.default.createElement("div", Object.assign({ className: "navds-timeline__popover", "data-placement": placement, "aria-hidden": !open, ref: refs.setFloating }, getFloatingProps({
|
|
113
107
|
tabIndex: -1,
|
|
108
|
+
onBlur: (e) => e.target.previousSibling !== document.activeElement &&
|
|
109
|
+
open &&
|
|
110
|
+
setOpen(false),
|
|
114
111
|
}), { style: Object.assign(Object.assign({}, floatingStyles), { display: open ? undefined : "none" }) }),
|
|
115
112
|
react_2.default.createElement("div", { className: "navds-timeline__popover-content" }, children),
|
|
116
113
|
react_2.default.createElement("div", { ref: (node) => {
|
|
@@ -12,6 +12,10 @@ export interface HelpTextProps extends React.ButtonHTMLAttributes<HTMLButtonElem
|
|
|
12
12
|
* @default "top"
|
|
13
13
|
*/
|
|
14
14
|
placement?: "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end";
|
|
15
|
+
/**
|
|
16
|
+
* Classname for wrapper
|
|
17
|
+
*/
|
|
18
|
+
wrapperClassName?: string;
|
|
15
19
|
}
|
|
16
20
|
/**
|
|
17
21
|
* A component that displays a help text button with a popover.
|
|
@@ -27,11 +27,11 @@ import { HelpTextIcon } from "./HelpTextIcon";
|
|
|
27
27
|
* ```
|
|
28
28
|
*/
|
|
29
29
|
export const HelpText = forwardRef((_a, ref) => {
|
|
30
|
-
var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick"]);
|
|
30
|
+
var { className, children, placement = "top", strategy = "absolute", title = "hjelp", onClick, wrapperClassName } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title", "onClick", "wrapperClassName"]);
|
|
31
31
|
const buttonRef = useRef(null);
|
|
32
32
|
const mergedRef = useMemo(() => mergeRefs([buttonRef, ref]), [ref]);
|
|
33
33
|
const [open, setOpen] = useState(false);
|
|
34
|
-
return (React.createElement("div", { className: "navds-help-text" },
|
|
34
|
+
return (React.createElement("div", { className: cl("navds-help-text", wrapperClassName) },
|
|
35
35
|
React.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => {
|
|
36
36
|
setOpen((x) => !x);
|
|
37
37
|
onClick === null || onClick === void 0 ? void 0 : onClick(e);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HelpText.js","sourceRoot":"","sources":["../../src/help-text/HelpText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,OAAO,EAAgB,SAAS,EAAE,MAAM,IAAI,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"HelpText.js","sourceRoot":"","sources":["../../src/help-text/HelpText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,OAAO,EAAgB,SAAS,EAAE,MAAM,IAAI,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAkC9C;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,UAAU,EACrB,KAAK,GAAG,OAAO,EACf,OAAO,EACP,gBAAgB,OAEjB,EADI,IAAI,cART,0FASC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACpE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,gBAAgB,CAAC;QACrD,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBACnB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAC;YACf,CAAC,EACD,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,IAAI,EAAC,QAAQ,mBACE,IAAI;YAEnB,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI;YAC9B,oBAAC,YAAY,IAAC,MAAM,QAAC,KAAK,EAAE,KAAK,GAAI,CAC9B;QACT,oBAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,SAAS,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,kBAAkB,IAC1C,QAAQ,CACO,CACV,CACN,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
package/esm/timeline/Pin.js
CHANGED
|
@@ -10,9 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import { autoUpdate, arrow as flArrow, flip, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
|
|
13
|
-
import { useEventListener, mergeRefs } from "../util";
|
|
14
13
|
import { format } from "date-fns";
|
|
15
|
-
import React, { forwardRef,
|
|
14
|
+
import React, { forwardRef, useMemo, useRef, useState } from "react";
|
|
15
|
+
import { mergeRefs } from "../util";
|
|
16
16
|
import { useTimelineContext } from "./hooks/useTimelineContext";
|
|
17
17
|
import { position } from "./utils/calc";
|
|
18
18
|
export const Pin = forwardRef((_a, ref) => {
|
|
@@ -42,12 +42,6 @@ export const Pin = forwardRef((_a, ref) => {
|
|
|
42
42
|
useDismiss(context),
|
|
43
43
|
]);
|
|
44
44
|
const mergedRef = useMemo(() => mergeRefs([refs.setReference, ref]), [ref, refs.setReference]);
|
|
45
|
-
useEventListener("focusin", useCallback((e) => {
|
|
46
|
-
var _a;
|
|
47
|
-
if (![refs.domReference.current, (_a = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _a === void 0 ? void 0 : _a.current].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target))) {
|
|
48
|
-
open && setOpen(false);
|
|
49
|
-
}
|
|
50
|
-
}, [open, refs.domReference, refs === null || refs === void 0 ? void 0 : refs.floating]));
|
|
51
45
|
const staticSide = {
|
|
52
46
|
top: "bottom",
|
|
53
47
|
right: "left",
|
|
@@ -70,6 +64,9 @@ export const Pin = forwardRef((_a, ref) => {
|
|
|
70
64
|
})))),
|
|
71
65
|
children && (React.createElement("div", Object.assign({ className: "navds-timeline__popover", "data-placement": placement, "aria-hidden": !open, ref: refs.setFloating }, getFloatingProps({
|
|
72
66
|
tabIndex: -1,
|
|
67
|
+
onBlur: (e) => e.target.previousSibling !== document.activeElement &&
|
|
68
|
+
open &&
|
|
69
|
+
setOpen(false),
|
|
73
70
|
}), { style: Object.assign(Object.assign({}, floatingStyles), { display: open ? undefined : "none" }) }),
|
|
74
71
|
React.createElement("div", { className: "navds-timeline__popover-content" }, children),
|
|
75
72
|
React.createElement("div", { ref: (node) => {
|
package/esm/timeline/Pin.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pin.js","sourceRoot":"","sources":["../../src/timeline/Pin.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EACL,UAAU,EACV,KAAK,IAAI,OAAO,EAChB,IAAI,EACJ,MAAM,EACN,WAAW,EACX,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Pin.js","sourceRoot":"","sources":["../../src/timeline/Pin.tsx"],"names":[],"mappings":"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"}
|
|
@@ -35,7 +35,7 @@ export const TimelineRow = forwardRef((_a, ref) => {
|
|
|
35
35
|
React.createElement("div", { className: cl("navds-timeline__row", {
|
|
36
36
|
"navds-timeline__row--active": active,
|
|
37
37
|
}) },
|
|
38
|
-
React.createElement("ol", Object.assign({}, rest, { ref: ref, "aria-label": periods.length === 0
|
|
38
|
+
React.createElement("ol", Object.assign({}, rest, { tabIndex: -1, ref: ref, "aria-label": periods.length === 0
|
|
39
39
|
? "Ingen perioder"
|
|
40
40
|
: `${format(earliest.start, "dd.MM.yyyy")} til ${format(latest.end, "dd.MM.yyyy")}`, className: cl("navds-timeline__row-periods", className), onKeyDown: (e) => {
|
|
41
41
|
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineRow.js","sourceRoot":"","sources":["../../src/timeline/TimelineRow.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"TimelineRow.js","sourceRoot":"","sources":["../../src/timeline/TimelineRow.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { autoUpdate, arrow as flArrow, flip, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
|
|
2
|
-
import { useEventListener, mergeRefs } from "../../util";
|
|
3
2
|
import cl from "clsx";
|
|
4
|
-
import React, {
|
|
3
|
+
import React, { useMemo, useRef, useState } from "react";
|
|
4
|
+
import { mergeRefs } from "../../util";
|
|
5
5
|
import { usePeriodContext } from "../hooks/usePeriodContext";
|
|
6
6
|
import { useRowContext } from "../hooks/useRowContext";
|
|
7
7
|
import { useTimelineContext } from "../hooks/useTimelineContext";
|
|
@@ -34,12 +34,6 @@ const ClickablePeriod = React.memo(({ onSelectPeriod, start, end, status, croppe
|
|
|
34
34
|
useDismiss(context),
|
|
35
35
|
]);
|
|
36
36
|
const mergedRef = useMemo(() => mergeRefs([refs.setReference, periodRef]), [periodRef, refs.setReference]);
|
|
37
|
-
useEventListener("focusin", useCallback((e) => {
|
|
38
|
-
var _a;
|
|
39
|
-
if (![refs.domReference.current, (_a = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _a === void 0 ? void 0 : _a.current].some((element) => element === null || element === void 0 ? void 0 : element.contains(e.target))) {
|
|
40
|
-
open && setOpen(false);
|
|
41
|
-
}
|
|
42
|
-
}, [open, refs.domReference, refs === null || refs === void 0 ? void 0 : refs.floating]));
|
|
43
37
|
const staticSide = {
|
|
44
38
|
top: "bottom",
|
|
45
39
|
right: "left",
|
|
@@ -83,6 +77,9 @@ const ClickablePeriod = React.memo(({ onSelectPeriod, start, end, status, croppe
|
|
|
83
77
|
React.createElement("span", { className: "navds-timeline__period--inner" }, icon)),
|
|
84
78
|
children && (React.createElement("div", Object.assign({ className: "navds-timeline__popover", "data-placement": placement, "aria-hidden": !open, ref: refs.setFloating }, getFloatingProps({
|
|
85
79
|
tabIndex: -1,
|
|
80
|
+
onBlur: (e) => e.target.previousSibling !== document.activeElement &&
|
|
81
|
+
open &&
|
|
82
|
+
setOpen(false),
|
|
86
83
|
}), { style: Object.assign(Object.assign({}, floatingStyles), { display: open ? undefined : "none" }) }),
|
|
87
84
|
React.createElement("div", { className: "navds-timeline__popover-content" }, children),
|
|
88
85
|
React.createElement("div", { ref: (node) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClickablePeriod.js","sourceRoot":"","sources":["../../../src/timeline/period/ClickablePeriod.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,KAAK,IAAI,OAAO,EAChB,IAAI,EACJ,MAAM,EACN,WAAW,EACX,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ClickablePeriod.js","sourceRoot":"","sources":["../../../src/timeline/period/ClickablePeriod.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.7",
|
|
4
4
|
"description": "Aksel react-components for NAV designsystem",
|
|
5
5
|
"author": "Aksel | NAV designsystem team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@floating-ui/react": "0.24.1",
|
|
41
|
-
"@navikt/aksel-icons": "^4.1.
|
|
41
|
+
"@navikt/aksel-icons": "^4.1.7",
|
|
42
42
|
"@radix-ui/react-tabs": "1.0.0",
|
|
43
43
|
"@radix-ui/react-toggle-group": "1.0.0",
|
|
44
44
|
"clsx": "^1.2.1",
|
|
@@ -29,6 +29,10 @@ export interface HelpTextProps
|
|
|
29
29
|
| "right-end"
|
|
30
30
|
| "left-start"
|
|
31
31
|
| "left-end";
|
|
32
|
+
/**
|
|
33
|
+
* Classname for wrapper
|
|
34
|
+
*/
|
|
35
|
+
wrapperClassName?: string;
|
|
32
36
|
}
|
|
33
37
|
|
|
34
38
|
/**
|
|
@@ -53,6 +57,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
|
|
|
53
57
|
strategy = "absolute",
|
|
54
58
|
title = "hjelp",
|
|
55
59
|
onClick,
|
|
60
|
+
wrapperClassName,
|
|
56
61
|
...rest
|
|
57
62
|
},
|
|
58
63
|
ref
|
|
@@ -62,7 +67,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
|
|
|
62
67
|
const [open, setOpen] = useState(false);
|
|
63
68
|
|
|
64
69
|
return (
|
|
65
|
-
<div className="navds-help-text">
|
|
70
|
+
<div className={cl("navds-help-text", wrapperClassName)}>
|
|
66
71
|
<button
|
|
67
72
|
{...rest}
|
|
68
73
|
ref={mergedRef}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useEffect, useRef } from "react";
|
|
2
|
-
import { HelpText } from "..";
|
|
2
|
+
import { BodyLong, Heading, HelpText } from "..";
|
|
3
3
|
|
|
4
4
|
export default {
|
|
5
5
|
title: "ds-react/HelpText",
|
|
@@ -65,3 +65,36 @@ export const Open = () => {
|
|
|
65
65
|
</HelpText>
|
|
66
66
|
);
|
|
67
67
|
};
|
|
68
|
+
|
|
69
|
+
export const WrapperClassName = {
|
|
70
|
+
render: () => {
|
|
71
|
+
return (
|
|
72
|
+
<div>
|
|
73
|
+
<BodyLong spacing>
|
|
74
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
|
|
75
|
+
perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
|
|
76
|
+
ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
|
|
77
|
+
ab quam ea quas?
|
|
78
|
+
</BodyLong>
|
|
79
|
+
|
|
80
|
+
<Heading level="2" size="medium">
|
|
81
|
+
67 år og 1 måneder øklasdjkl askdak døkasøk daøkdkølasøkld asølkdøka
|
|
82
|
+
<HelpText wrapperClassName="testClass">
|
|
83
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
|
|
84
|
+
perspiciatis vero voluptatum, asperiores cumque, deserunt
|
|
85
|
+
accusantium ullam ipsa accusamus officia cupiditate quae unde esse
|
|
86
|
+
culpa, ratione ab quam ea quas?
|
|
87
|
+
</HelpText>
|
|
88
|
+
<style>{`.testClass {display: inline-block; margin-left: 0.5rem; vertical-align: middle;}`}</style>
|
|
89
|
+
</Heading>
|
|
90
|
+
|
|
91
|
+
<BodyLong spacing>
|
|
92
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
|
|
93
|
+
perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
|
|
94
|
+
ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
|
|
95
|
+
ab quam ea quas?
|
|
96
|
+
</BodyLong>
|
|
97
|
+
</div>
|
|
98
|
+
);
|
|
99
|
+
},
|
|
100
|
+
};
|
package/src/timeline/Pin.tsx
CHANGED
|
@@ -11,15 +11,9 @@ import {
|
|
|
11
11
|
useHover,
|
|
12
12
|
useInteractions,
|
|
13
13
|
} from "@floating-ui/react";
|
|
14
|
-
import { useEventListener, mergeRefs } from "../util";
|
|
15
14
|
import { format } from "date-fns";
|
|
16
|
-
import React, {
|
|
17
|
-
|
|
18
|
-
useCallback,
|
|
19
|
-
useMemo,
|
|
20
|
-
useRef,
|
|
21
|
-
useState,
|
|
22
|
-
} from "react";
|
|
15
|
+
import React, { forwardRef, useMemo, useRef, useState } from "react";
|
|
16
|
+
import { mergeRefs } from "../util";
|
|
23
17
|
import { useTimelineContext } from "./hooks/useTimelineContext";
|
|
24
18
|
import { position } from "./utils/calc";
|
|
25
19
|
import { TimelineComponentTypes } from "./utils/types.internal";
|
|
@@ -83,22 +77,6 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
|
|
|
83
77
|
[ref, refs.setReference]
|
|
84
78
|
);
|
|
85
79
|
|
|
86
|
-
useEventListener(
|
|
87
|
-
"focusin",
|
|
88
|
-
useCallback(
|
|
89
|
-
(e: FocusEvent) => {
|
|
90
|
-
if (
|
|
91
|
-
![refs.domReference.current, refs?.floating?.current].some(
|
|
92
|
-
(element) => element?.contains(e.target as Node)
|
|
93
|
-
)
|
|
94
|
-
) {
|
|
95
|
-
open && setOpen(false);
|
|
96
|
-
}
|
|
97
|
-
},
|
|
98
|
-
[open, refs.domReference, refs?.floating]
|
|
99
|
-
)
|
|
100
|
-
);
|
|
101
|
-
|
|
102
80
|
const staticSide = {
|
|
103
81
|
top: "bottom",
|
|
104
82
|
right: "left",
|
|
@@ -139,6 +117,10 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
|
|
|
139
117
|
ref={refs.setFloating}
|
|
140
118
|
{...getFloatingProps({
|
|
141
119
|
tabIndex: -1,
|
|
120
|
+
onBlur: (e) =>
|
|
121
|
+
e.target.previousSibling !== document.activeElement &&
|
|
122
|
+
open &&
|
|
123
|
+
setOpen(false),
|
|
142
124
|
})}
|
|
143
125
|
style={{
|
|
144
126
|
...floatingStyles,
|
|
@@ -11,9 +11,9 @@ import {
|
|
|
11
11
|
useHover,
|
|
12
12
|
useInteractions,
|
|
13
13
|
} from "@floating-ui/react";
|
|
14
|
-
import { useEventListener, mergeRefs } from "../../util";
|
|
15
14
|
import cl from "clsx";
|
|
16
|
-
import React, {
|
|
15
|
+
import React, { useMemo, useRef, useState } from "react";
|
|
16
|
+
import { mergeRefs } from "../../util";
|
|
17
17
|
import { usePeriodContext } from "../hooks/usePeriodContext";
|
|
18
18
|
import { useRowContext } from "../hooks/useRowContext";
|
|
19
19
|
import { useTimelineContext } from "../hooks/useTimelineContext";
|
|
@@ -85,22 +85,6 @@ const ClickablePeriod = React.memo(
|
|
|
85
85
|
[periodRef, refs.setReference]
|
|
86
86
|
);
|
|
87
87
|
|
|
88
|
-
useEventListener(
|
|
89
|
-
"focusin",
|
|
90
|
-
useCallback(
|
|
91
|
-
(e: FocusEvent) => {
|
|
92
|
-
if (
|
|
93
|
-
![refs.domReference.current, refs?.floating?.current].some(
|
|
94
|
-
(element) => element?.contains(e.target as Node)
|
|
95
|
-
)
|
|
96
|
-
) {
|
|
97
|
-
open && setOpen(false);
|
|
98
|
-
}
|
|
99
|
-
},
|
|
100
|
-
[open, refs.domReference, refs?.floating]
|
|
101
|
-
)
|
|
102
|
-
);
|
|
103
|
-
|
|
104
88
|
const staticSide = {
|
|
105
89
|
top: "bottom",
|
|
106
90
|
right: "left",
|
|
@@ -165,6 +149,10 @@ const ClickablePeriod = React.memo(
|
|
|
165
149
|
ref={refs.setFloating}
|
|
166
150
|
{...getFloatingProps({
|
|
167
151
|
tabIndex: -1,
|
|
152
|
+
onBlur: (e) =>
|
|
153
|
+
e.target.previousSibling !== document.activeElement &&
|
|
154
|
+
open &&
|
|
155
|
+
setOpen(false),
|
|
168
156
|
})}
|
|
169
157
|
style={{
|
|
170
158
|
...floatingStyles,
|