@navikt/ds-react 3.4.2 → 4.0.0

package/cjs/internal-header/InternalHeader.js

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InternalHeader = void 0;
+const react_1 = __importStar(require("react"));
+const InternalHeaderTitle_1 = __importDefault(require("./InternalHeaderTitle"));
+const InternalHeaderUser_1 = __importDefault(require("./InternalHeaderUser"));
+const InternalHeaderButton_1 = __importDefault(require("./InternalHeaderButton"));
+const InternalHeaderUserButton_1 = __importDefault(require("./InternalHeaderUserButton"));
+const clsx_1 = __importDefault(require("clsx"));
+exports.InternalHeader = (0, react_1.forwardRef)((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (react_1.default.createElement("header", Object.assign({ "data-theme": "dark" }, rest, { ref: ref, className: (0, clsx_1.default)("navds-internalheader", className) })));
+});
+exports.InternalHeader.Title = InternalHeaderTitle_1.default;
+exports.InternalHeader.User = InternalHeaderUser_1.default;
+exports.InternalHeader.Button = InternalHeaderButton_1.default;
+exports.InternalHeader.UserButton = InternalHeaderUserButton_1.default;
+exports.default = exports.InternalHeader;

package/cjs/internal-header/InternalHeaderButton.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InternalHeaderButton = void 0;
+const react_1 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+exports.InternalHeaderButton = (0, react_1.forwardRef)((_a, ref) => {
+    var { as: Component = "button", className } = _a, rest = __rest(_a, ["as", "className"]);
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-internalheader__button", className) })));
+});
+exports.default = exports.InternalHeaderButton;

package/cjs/internal-header/InternalHeaderTitle.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InternalHeaderTitle = void 0;
+const react_1 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+exports.InternalHeaderTitle = (0, react_1.forwardRef)((_a, ref) => {
+    var { as: Component = "a", children, className } = _a, rest = __rest(_a, ["as", "children", "className"]);
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, size: "xsmall", className: (0, clsx_1.default)("navds-internalheader__title", "navds-body-short", className) }),
+        react_1.default.createElement("span", null, children)));
+});
+exports.default = exports.InternalHeaderTitle;

package/cjs/internal-header/InternalHeaderUser.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InternalHeaderUser = void 0;
+const react_1 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const typography_1 = require("../typography");
+exports.InternalHeaderUser = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, name, description } = _a, rest = __rest(_a, ["className", "name", "description"]);
+    return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-internalheader__user", className) }),
+        react_1.default.createElement("span", null,
+            react_1.default.createElement(typography_1.BodyShort, { size: "small", as: "div" }, name),
+            description && react_1.default.createElement(typography_1.Detail, { as: "div" }, description))));
+});
+exports.default = exports.InternalHeaderUser;

package/cjs/internal-header/InternalHeaderUserButton.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InternalHeaderUserButton = void 0;
+const aksel_icons_1 = require("@navikt/aksel-icons");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const typography_1 = require("../typography");
+const InternalHeaderButton_1 = __importDefault(require("./InternalHeaderButton"));
+exports.InternalHeaderUserButton = (0, react_1.forwardRef)((_a, ref) => {
+    var { as, name, description, className } = _a, rest = __rest(_a, ["as", "name", "description", "className"]);
+    return (react_1.default.createElement(InternalHeaderButton_1.default, Object.assign({}, rest, { as: as, ref: ref, className: (0, clsx_1.default)("navds-internalheader__user-button", className) }),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(typography_1.BodyShort, { size: "small", as: "div" }, name),
+            description && react_1.default.createElement(typography_1.Detail, { as: "div" }, description)),
+        react_1.default.createElement(aksel_icons_1.ChevronDownIcon, { title: "vis meny" })));
+});
+exports.default = exports.InternalHeaderUserButton;

package/cjs/internal-header/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InternalHeader = void 0;
+var InternalHeader_1 = require("./InternalHeader");
+Object.defineProperty(exports, "InternalHeader", { enumerable: true, get: function () { return __importDefault(InternalHeader_1).default; } });

package/cjs/internal-header/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../esm/internal-header/index.js",
+  "types": "../../esm/internal-header/index.d.ts"
+}

package/cjs/read-more/ReadMore.js

@@ -42,6 +42,23 @@ const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const typography_1 = require("../typography");
 const aksel_icons_1 = require("@navikt/aksel-icons");
+/**
+ * ReadMore
+ * @see https://aksel.nav.no/komponenter/core/read-more
+ * @see {@link ReadMoreProps}
+ *
+ * @example
+ * // Default
+ * <ReadMore header="Dette regnes som helsemessige begrensninger">
+ *  Med helsemessige begrensninger mener vi funksjonshemming, sykdom...
+ * </ReadMore>
+ *
+ * @example
+ * // Litt mindre versjon
+ * <ReadMore size="small" header="Dette regnes som helsemessige begrensninger">
+ *   Med helsemessige begrensninger mener vi funksjonshemming, sykdom...
+ * </ReadMore>
+ */
 exports.ReadMore = (0, react_1.forwardRef)((_a, ref) => {
     var { className, header, children, open, defaultOpen = false, onClick, size = "medium" } = _a, rest = __rest(_a, ["className", "header", "children", "open", "defaultOpen", "onClick", "size"]);
     const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);

package/cjs/timeline/AxisLabels.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AxisLabels = exports.yearLabels = exports.monthLabels = exports.dayLabels = void 0;
+const Detail_1 = require("../typography/Detail");
+const date_fns_1 = require("date-fns");
+const nb_1 = __importDefault(require("date-fns/locale/nb"));
+const react_1 = __importDefault(require("react"));
+const useTimelineContext_1 = require("./hooks/useTimelineContext");
+const utils_1 = require("./utils");
+const calc_1 = require("./utils/calc");
+const dayLabels = (start, end, totalDays, direction) => {
+    const increment = Math.ceil(totalDays / 10);
+    const lastDay = (0, date_fns_1.startOfDay)(end);
+    return new Array(totalDays)
+        .fill(lastDay)
+        .map((thisDay, i) => {
+        if (i % increment !== 0)
+            return null;
+        const day = (0, date_fns_1.subDays)(thisDay, i);
+        const { horizontalPosition, width } = (0, calc_1.horizontalPositionAndWidth)(day, (0, date_fns_1.addDays)(day, 1), start, end);
+        return {
+            direction: direction,
+            horizontalPosition: horizontalPosition,
+            label: (0, date_fns_1.format)(day, "dd.MM", { locale: nb_1.default }),
+            date: day,
+            width: width,
+        };
+    })
+        .filter((label) => label !== null);
+};
+exports.dayLabels = dayLabels;
+const monthLabels = (start, end, direction) => {
+    const startMonth = (0, date_fns_1.startOfMonth)(start);
+    const endMonth = (0, date_fns_1.endOfMonth)(end);
+    const numberOfMonths = (0, date_fns_1.differenceInMonths)(endMonth, startMonth) + 1;
+    return new Array(numberOfMonths).fill(startMonth).map((thisMonth, i) => {
+        const month = (0, date_fns_1.addMonths)(thisMonth, i);
+        const { horizontalPosition, width } = (0, calc_1.horizontalPositionAndWidth)(month, (0, date_fns_1.addMonths)(month, 1), start, end);
+        return {
+            direction: direction,
+            horizontalPosition: horizontalPosition,
+            label: (0, date_fns_1.format)(month, "MMM yy", { locale: nb_1.default }),
+            date: month,
+            width: width,
+        };
+    });
+};
+exports.monthLabels = monthLabels;
+const yearLabels = (start, end, direction) => {
+    const firstYear = (0, date_fns_1.startOfYear)(start);
+    const lastYear = (0, date_fns_1.endOfYear)(end);
+    const yearCount = (0, date_fns_1.differenceInYears)(lastYear, start) + 1;
+    return new Array(yearCount).fill(firstYear).map((thisYear, i) => {
+        const year = (0, date_fns_1.addYears)(thisYear, i);
+        const { horizontalPosition, width } = (0, calc_1.horizontalPositionAndWidth)(year, (0, date_fns_1.addYears)(year, 1), start, end);
+        return {
+            direction: direction,
+            horizontalPosition: horizontalPosition,
+            label: year.getFullYear().toString(),
+            date: year,
+            width: width,
+        };
+    });
+};
+exports.yearLabels = yearLabels;
+const axisLabels = (start, end, direction) => {
+    const totalDays = (0, date_fns_1.differenceInDays)(end, start);
+    if (totalDays < 40) {
+        return (0, exports.dayLabels)(start, end, totalDays, direction);
+    }
+    else if (totalDays < 370) {
+        return (0, exports.monthLabels)(start, end, direction);
+    }
+    else {
+        return (0, exports.yearLabels)(start, end, direction);
+    }
+};
+const AxisLabels = () => {
+    const { endDate, startDate, direction } = (0, useTimelineContext_1.useTimelineContext)();
+    const labels = axisLabels(startDate, endDate, direction).filter(utils_1.isVisible);
+    return (react_1.default.createElement("div", { className: "navds-timeline__axislabels", "aria-hidden": "true" }, labels.map((etikett) => (react_1.default.createElement(Detail_1.Detail, { className: "navds-timeline__axislabels-label", as: "div", key: etikett.label, style: {
+            justifyContent: direction === "left" ? "flex-start" : "flex-end",
+            [direction]: `${etikett.horizontalPosition}%`,
+            width: `${etikett.width}%`,
+        } }, etikett.label)))));
+};
+exports.AxisLabels = AxisLabels;

package/cjs/timeline/Pin.js

@@ -0,0 +1,106 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pin = void 0;
+const react_1 = require("@floating-ui/react");
+const util_1 = require("../util");
+const date_fns_1 = require("date-fns");
+const react_2 = __importStar(require("react"));
+const useTimelineContext_1 = require("./hooks/useTimelineContext");
+const calc_1 = require("./utils/calc");
+exports.Pin = (0, react_2.forwardRef)((_a, ref) => {
+    var { date, children } = _a, rest = __rest(_a, ["date", "children"]);
+    const { startDate, endDate, direction } = (0, useTimelineContext_1.useTimelineContext)();
+    const [open, setOpen] = (0, react_2.useState)(false);
+    const arrowRef = (0, react_2.useRef)(null);
+    const { context, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, refs, floatingStyles, } = (0, react_1.useFloating)({
+        placement: "top",
+        open: open,
+        onOpenChange: setOpen,
+        middleware: [
+            (0, react_1.offset)(16),
+            (0, react_1.shift)(),
+            (0, react_1.flip)({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+            (0, react_1.arrow)({ element: arrowRef, padding: 5 }),
+        ],
+        whileElementsMounted: react_1.autoUpdate,
+    });
+    const { getFloatingProps, getReferenceProps } = (0, react_1.useInteractions)([
+        (0, react_1.useHover)(context, {
+            handleClose: (0, react_1.safePolygon)(),
+            restMs: 25,
+            delay: { open: 1000 },
+        }),
+        (0, react_1.useFocus)(context),
+        (0, react_1.useDismiss)(context),
+    ]);
+    const mergedRef = (0, react_2.useMemo)(() => (0, util_1.mergeRefs)([refs.setReference, ref]), [ref, refs.setReference]);
+    (0, util_1.useEventListener)("focusin", (0, react_2.useCallback)((e) => {
+        var _a;
+        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))) {
+            open && setOpen(false);
+        }
+    }, [open, refs.domReference, refs === null || refs === void 0 ? void 0 : refs.floating]));
+    const staticSide = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right",
+    }[placement.split("-")[0]];
+    return (react_2.default.createElement(react_2.default.Fragment, null,
+        react_2.default.createElement("div", { className: "navds-timeline__pin-wrapper", style: { [direction]: `${(0, calc_1.position)(date, startDate, endDate)}%` } },
+            react_2.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, className: "navds-timeline__pin-button", "aria-label": `pin:${(0, date_fns_1.format)(date, "dd.MM.yyyy")}`, type: "button", "aria-expanded": children ? open : undefined }, getReferenceProps({
+                onKeyDown: (e) => {
+                    var _a;
+                    (_a = rest === null || rest === void 0 ? void 0 : rest.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+                    if (e.key === "Enter") {
+                        setOpen((prev) => !prev);
+                    }
+                    else if (e.key === " ") {
+                        setOpen(false);
+                    }
+                },
+            })))),
+        children && (react_2.default.createElement("div", Object.assign({ className: "navds-timeline__popover", "data-placement": placement, "aria-hidden": !open, ref: refs.setFloating }, getFloatingProps({
+            tabIndex: -1,
+        }), { style: Object.assign(Object.assign({}, floatingStyles), { display: open ? undefined : "none" }) }),
+            react_2.default.createElement("div", { className: "navds-timeline__popover-content" }, children),
+            react_2.default.createElement("div", { ref: (node) => {
+                    arrowRef.current = node;
+                }, style: Object.assign(Object.assign(Object.assign({}, (arrowX != null ? { left: arrowX } : {})), (arrowY != null ? { top: arrowY } : {})), (staticSide ? { [staticSide]: "-0.5rem" } : {})), className: "navds-timeline__popover-arrow" })))));
+});
+exports.Pin.componentType = "pin";
+exports.default = exports.Pin;

package/cjs/timeline/Timeline.js

@@ -0,0 +1,162 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timeline = void 0;
+const date_fns_1 = require("date-fns");
+const react_1 = __importStar(require("react"));
+const AxisLabels_1 = require("./AxisLabels");
+const useRowContext_1 = require("./hooks/useRowContext");
+const useTimelineContext_1 = require("./hooks/useTimelineContext");
+const useTimelineRows_1 = require("./hooks/useTimelineRows");
+const period_1 = __importDefault(require("./period"));
+const Pin_1 = __importDefault(require("./Pin"));
+const TimelineRow_1 = __importDefault(require("./TimelineRow"));
+const timeline_1 = require("./utils/timeline");
+const zoom_1 = __importDefault(require("./zoom"));
+exports.Timeline = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, startDate, endDate, direction = "left" } = _a, rest = __rest(_a, ["children", "startDate", "endDate", "direction"]);
+    const isMultipleRows = Array.isArray(children);
+    const firstFocusabled = (0, react_1.useRef)([]);
+    if (!isMultipleRows) {
+        children = [children];
+    }
+    const rowChildren = react_1.default.Children.toArray(children).filter((c) => { var _a; return ((_a = c === null || c === void 0 ? void 0 : c.type) === null || _a === void 0 ? void 0 : _a.componentType) === "row"; });
+    const pins = react_1.default.Children.toArray(children).filter((c) => { var _a; return ((_a = c === null || c === void 0 ? void 0 : c.type) === null || _a === void 0 ? void 0 : _a.componentType) === "pin"; });
+    const zoomComponent = react_1.default.Children.toArray(children).find((c) => { var _a; return ((_a = c === null || c === void 0 ? void 0 : c.type) === null || _a === void 0 ? void 0 : _a.componentType) === "zoom"; });
+    const rowsRaw = (0, react_1.useMemo)(() => {
+        return (0, timeline_1.parseRows)(rowChildren);
+    }, [rowChildren]);
+    const rows = rowsRaw.map((r) => {
+        if (r === null || r === void 0 ? void 0 : r.periods) {
+            return r.periods;
+        }
+        return [];
+    });
+    const initialStartDate = (0, date_fns_1.startOfDay)((0, useTimelineRows_1.useEarliestDate)({ startDate, rows }));
+    const [start, setStart] = (0, react_1.useState)(initialStartDate);
+    const [activeRow, setActiveRow] = (0, react_1.useState)(null);
+    const [endInclusive, setEndInclusive] = (0, react_1.useState)((0, date_fns_1.endOfDay)((0, useTimelineRows_1.useLatestDate)({ endDate, rows })));
+    const initialEndDate = (0, date_fns_1.endOfDay)((0, useTimelineRows_1.useLatestDate)({ endDate, rows }));
+    const processedRows = (0, useTimelineRows_1.useTimelineRows)(rowsRaw, startDate !== null && startDate !== void 0 ? startDate : start, endDate !== null && endDate !== void 0 ? endDate : endInclusive, direction);
+    const handleZoomChange = (zoomStart) => {
+        if (startDate || endDate) {
+            if (process.env.NODE_ENV !== "production") {
+                console.warn("Zooming is not supported when startDate or endDate is set");
+            }
+            return;
+        }
+        if (direction === "left") {
+            if ((0, date_fns_1.isSameDay)(zoomStart, start)) {
+                setStart(initialStartDate);
+                return;
+            }
+            setStart(zoomStart);
+        }
+        else {
+            if ((0, date_fns_1.isSameDay)(zoomStart, endInclusive)) {
+                setEndInclusive(initialEndDate);
+                return;
+            }
+            setEndInclusive(zoomStart);
+        }
+    };
+    const handleActiveRowChange = (key) => {
+        var _a, _b, _c, _d;
+        if (activeRow !== null && key === "ArrowDown") {
+            for (let i = activeRow + 1; i < processedRows.length; i++) {
+                const row = processedRows[i];
+                if (row.periods.find((p) => !!p.children || !!p.onSelectPeriod)) {
+                    setActiveRow(i);
+                    (_b = (_a = firstFocusabled.current.find((x) => x.id === i)) === null || _a === void 0 ? void 0 : _a.ref) === null || _b === void 0 ? void 0 : _b.focus();
+                    break;
+                }
+            }
+            return;
+        }
+        if (activeRow !== null && key === "ArrowUp") {
+            for (let i = activeRow - 1; i >= 0; i--) {
+                const row = processedRows[i];
+                if (row.periods.find((p) => !!p.children || !!p.onSelectPeriod)) {
+                    setActiveRow(i);
+                    (_d = (_c = firstFocusabled.current.find((x) => x.id === i)) === null || _c === void 0 ? void 0 : _c.ref) === null || _d === void 0 ? void 0 : _d.focus();
+                    break;
+                }
+            }
+            return;
+        }
+    };
+    const addFocusable = (ref, id) => {
+        let items = firstFocusabled.current;
+        items = items.filter((x) => x.id !== id);
+        items.push({ ref, id });
+        firstFocusabled.current = items;
+    };
+    return (react_1.default.createElement(useTimelineContext_1.TimelineContext.Provider, { value: {
+            startDate: startDate !== null && startDate !== void 0 ? startDate : start,
+            endDate: endDate !== null && endDate !== void 0 ? endDate : endInclusive,
+            direction: direction,
+            setStart: (d) => handleZoomChange(d),
+            setEndInclusive: (d) => setEndInclusive(d),
+            activeRow: activeRow,
+            setActiveRow: (key) => handleActiveRowChange(key),
+            initiate: (i) => setActiveRow(i),
+            addFocusable,
+        } },
+        react_1.default.createElement("div", Object.assign({}, rest, { ref: ref }),
+            react_1.default.createElement("div", { className: "navds-timeline" },
+                react_1.default.createElement(AxisLabels_1.AxisLabels, null),
+                pins.map((pin) => {
+                    return pin;
+                }),
+                processedRows.map((row, i) => {
+                    return (react_1.default.createElement(useRowContext_1.RowContext.Provider, { key: `row-${row.id}`, value: {
+                            periods: row.periods,
+                            id: row.id,
+                            active: activeRow === i,
+                            index: i,
+                        } },
+                        react_1.default.createElement(TimelineRow_1.default, Object.assign({}, row === null || row === void 0 ? void 0 : row.restProps, { ref: row === null || row === void 0 ? void 0 : row.ref, label: row.label, icon: row.icon, headingTag: row.headingTag }))));
+                })),
+            zoomComponent && zoomComponent)));
+});
+exports.Timeline.Row = TimelineRow_1.default;
+exports.Timeline.Period = period_1.default;
+exports.Timeline.Pin = Pin_1.default;
+exports.Timeline.Zoom = zoom_1.default;
+exports.default = exports.Timeline;