@navikt/ds-react 3.4.2 → 4.1.0

package/cjs/timeline/hooks/useTimelineRows.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLatestDate = exports.useEarliestDate = exports.useTimelineRows = void 0;
+const react_1 = require("react");
+const date_fns_1 = require("date-fns");
+const sort_1 = require("../utils/sort");
+const calc_1 = require("../utils/calc");
+const filter_1 = require("../utils/filter");
+const spatialPeriod = (period, timelineStart, timelineEndInclusive, direction = "left", i, periods, rowIndex) => {
+    const start = period.start;
+    const endInclusive = period.end;
+    const rightOverlap = i < periods.length - 1 && !(0, date_fns_1.isAfter)(periods[i + 1].start, endInclusive);
+    const { horizontalPosition, width } = (0, calc_1.horizontalPositionAndWidth)((0, date_fns_1.startOfDay)(start), (0, date_fns_1.endOfDay)(rightOverlap ? (0, date_fns_1.startOfDay)((0, date_fns_1.subDays)(periods[i + 1].start, 1)) : endInclusive), timelineStart, timelineEndInclusive);
+    return {
+        id: `r-${rowIndex}-p-${i}`,
+        start: start,
+        endInclusive: endInclusive,
+        horizontalPosition: horizontalPosition,
+        direction: direction,
+        width: width,
+        end: endInclusive,
+        status: period.status,
+        onSelectPeriod: period.onSelectPeriod,
+        icon: period.icon,
+        children: period.children,
+        isActive: period.isActive,
+        statusLabel: period.statusLabel,
+    };
+};
+const adjustedEdges = (period, i, allPeriods) => {
+    const left = i > 0 && (0, filter_1.withinADay)(period.start, allPeriods[i - 1].endInclusive);
+    const right = i < allPeriods.length - 1 &&
+        (0, filter_1.withinADay)(allPeriods[i + 1].start, period.endInclusive);
+    return left && right
+        ? Object.assign(Object.assign({}, period), { cropped: "both" }) : left
+        ? Object.assign(Object.assign({}, period), { cropped: "left" }) : right
+        ? Object.assign(Object.assign({}, period), { cropped: "right" }) : period;
+};
+const trimmedPeriods = (period) => {
+    let { horizontalPosition, width, cropped } = period;
+    if (horizontalPosition + width > 100) {
+        width = 100 - horizontalPosition;
+        cropped = cropped === "left" || cropped === "both" ? "both" : "right";
+    }
+    if (horizontalPosition < 0 && horizontalPosition + width > 0) {
+        width = horizontalPosition + width;
+        horizontalPosition = 0;
+        cropped = cropped === "right" || cropped === "both" ? "both" : "left";
+    }
+    return Object.assign(Object.assign({}, period), { width: width, horizontalPosition: horizontalPosition, cropped: cropped });
+};
+const useTimelineRows = (rows, startDate, endDate, direction) => (0, react_1.useMemo)(() => rows.map((periods, i) => {
+    const rowIndex = i;
+    const timelinePeriods = periods.periods
+        .sort((a, b) => a.start.valueOf() - b.start.valueOf())
+        .map((period, i) => (Object.assign(Object.assign({}, spatialPeriod(period, startDate, endDate, direction, i, periods.periods, rowIndex)), { restProps: period === null || period === void 0 ? void 0 : period.restProps, ref: period === null || period === void 0 ? void 0 : period.ref })))
+        .sort(sort_1.lastPeriod)
+        .map(adjustedEdges)
+        .map(trimmedPeriods)
+        .filter(filter_1.invisiblePeriods);
+    return {
+        id: `tl-row-${rowIndex}`,
+        label: periods.label,
+        headingTag: periods.headingTag || "h3",
+        icon: periods.icon,
+        periods: direction === "left" ? timelinePeriods : timelinePeriods.reverse(),
+        restProps: periods === null || periods === void 0 ? void 0 : periods.restProps,
+        ref: periods === null || periods === void 0 ? void 0 : periods.ref,
+    };
+}), [rows, startDate, endDate, direction]);
+exports.useTimelineRows = useTimelineRows;
+const earliestDate = (earliest, period) => period.start < earliest ? period.start : earliest;
+const earliestFomDate = (rader) => rader.flat().reduce(earliestDate, new Date());
+const useEarliestDate = ({ startDate, rows }) => (0, react_1.useMemo)(() => (startDate ? startDate : earliestFomDate(rows)), [startDate, rows]);
+exports.useEarliestDate = useEarliestDate;
+const latestDate = (latest, period) => period.end > latest ? period.end : latest;
+const latestTomDate = (rows) => rows.flat().reduce(latestDate, new Date(0));
+const useLatestDate = ({ endDate, rows }) => (0, react_1.useMemo)(() => (endDate ? endDate : (0, date_fns_1.addDays)(latestTomDate(rows), 1)), [endDate, rows]);
+exports.useLatestDate = useLatestDate;

package/cjs/timeline/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.Timeline = void 0;
+var Timeline_1 = require("./Timeline");
+Object.defineProperty(exports, "Timeline", { enumerable: true, get: function () { return __importDefault(Timeline_1).default; } });

package/cjs/timeline/package.json

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

package/cjs/timeline/period/ClickablePeriod.js

@@ -0,0 +1,120 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@floating-ui/react");
+const util_1 = require("../../util");
+const clsx_1 = __importDefault(require("clsx"));
+const react_2 = __importStar(require("react"));
+const usePeriodContext_1 = require("../hooks/usePeriodContext");
+const useRowContext_1 = require("../hooks/useRowContext");
+const useTimelineContext_1 = require("../hooks/useTimelineContext");
+const period_1 = require("../utils/period");
+const ClickablePeriod = react_2.default.memo(({ onSelectPeriod, start, end, status, cropped, direction, left, width, icon, children, isActive, statusLabel, restProps, periodRef, }) => {
+    const [open, setOpen] = (0, react_2.useState)(false);
+    const { index } = (0, useRowContext_1.useRowContext)();
+    const { firstFocus } = (0, usePeriodContext_1.usePeriodContext)();
+    const { initiate, addFocusable } = (0, useTimelineContext_1.useTimelineContext)();
+    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, periodRef]), [periodRef, 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("button", Object.assign({}, restProps, { type: "button", ref: (r) => {
+                firstFocus && addFocusable(r, index);
+                mergedRef(r);
+            }, "aria-label": (0, period_1.ariaLabel)(start, end, status, statusLabel), className: (0, clsx_1.default)("navds-timeline__period--clickable", (0, period_1.getConditionalClasses)(cropped, direction, status), restProps === null || restProps === void 0 ? void 0 : restProps.className, {
+                "navds-timeline__period--selected": isActive,
+            }), "aria-expanded": children ? open : undefined, "aria-current": isActive || undefined }, getReferenceProps({
+            onFocus: () => {
+                initiate(index);
+            },
+            onKeyDown: (e) => {
+                var _a;
+                (_a = restProps === null || restProps === void 0 ? void 0 : restProps.onKeydown) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                if (e.key === "Enter") {
+                    setOpen((prev) => !prev);
+                }
+                if (e.key === " ") {
+                    onSelectPeriod === null || onSelectPeriod === void 0 ? void 0 : onSelectPeriod(e);
+                    setOpen(false);
+                }
+            },
+            style: {
+                width: `${width}%`,
+                [direction]: `${left}%`,
+            },
+            onClick: (e) => {
+                var _a;
+                (_a = restProps === null || restProps === void 0 ? void 0 : restProps.onClick) === null || _a === void 0 ? void 0 : _a.call(restProps, e);
+                if (e.detail === 0) {
+                    return;
+                }
+                onSelectPeriod === null || onSelectPeriod === void 0 ? void 0 : onSelectPeriod(e);
+            },
+        })),
+            react_2.default.createElement("span", { className: "navds-timeline__period--inner" }, icon)),
+        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.default = ClickablePeriod;

package/cjs/timeline/period/NonClickablePeriod.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const period_1 = require("../utils/period");
+const clsx_1 = __importDefault(require("clsx"));
+const NonClickablePeriod = ({ start, end, status, cropped, direction, left, width, icon, statusLabel, restProps, periodRef, }) => {
+    return (react_1.default.createElement("div", Object.assign({ ref: periodRef }, restProps, { className: (0, clsx_1.default)((0, period_1.getConditionalClasses)(cropped, direction, status), restProps === null || restProps === void 0 ? void 0 : restProps.classname), style: {
+            width: `${width}%`,
+            [direction]: `${left}%`,
+        } }),
+        react_1.default.createElement("span", { className: "navds-timeline__period--inner" },
+            icon,
+            react_1.default.createElement("span", { className: "sr-only" }, (0, period_1.ariaLabel)(start, end, status, statusLabel)))));
+};
+exports.default = NonClickablePeriod;

package/cjs/timeline/period/index.js

@@ -0,0 +1,46 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Period = void 0;
+const react_1 = __importStar(require("react"));
+const usePeriodContext_1 = require("../hooks/usePeriodContext");
+const useRowContext_1 = require("../hooks/useRowContext");
+const ClickablePeriod_1 = __importDefault(require("./ClickablePeriod"));
+const NonClickablePeriod_1 = __importDefault(require("./NonClickablePeriod"));
+exports.Period = (0, react_1.forwardRef)(({ icon }, ref) => {
+    const { periods } = (0, useRowContext_1.useRowContext)();
+    const { periodId, restProps } = (0, usePeriodContext_1.usePeriodContext)();
+    const period = periods.find((p) => p.id === periodId);
+    if (!period) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+    const { start, endInclusive, width, horizontalPosition, status = "neutral", onSelectPeriod, cropped, direction, children, isActive, statusLabel, } = period;
+    return onSelectPeriod || children ? (react_1.default.createElement(ClickablePeriod_1.default, { periodRef: ref, start: start, end: endInclusive, status: status, onSelectPeriod: onSelectPeriod, cropped: cropped || "", direction: direction, width: width, left: horizontalPosition, icon: icon, children: children, isActive: isActive, statusLabel: statusLabel, restProps: restProps })) : (react_1.default.createElement(NonClickablePeriod_1.default, { periodRef: ref, start: start, end: endInclusive, status: status, cropped: cropped || "", direction: direction, width: width, left: horizontalPosition, icon: icon, statusLabel: statusLabel, restProps: restProps }));
+});
+exports.Period.componentType = "period";
+exports.default = exports.Period;

package/cjs/timeline/period/package.json

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

package/cjs/timeline/utils/calc.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.horizontalPositionAndWidth = exports.position = void 0;
+const date_fns_1 = require("date-fns");
+const position = (date, start, endInclusive) => {
+    const diff = (0, date_fns_1.differenceInMilliseconds)(endInclusive, start);
+    return ((0, date_fns_1.differenceInMilliseconds)(date, start) / diff) * 100;
+};
+exports.position = position;
+const horizontalPositionAndWidth = (start, endInclusive, timelineStart, timelineEndInclusive) => {
+    const horizontalPosition = (0, exports.position)(start, timelineStart, timelineEndInclusive);
+    const width = (0, exports.position)(endInclusive, timelineStart, timelineEndInclusive) -
+        horizontalPosition;
+    return {
+        horizontalPosition: horizontalPosition,
+        width: width,
+    };
+};
+exports.horizontalPositionAndWidth = horizontalPositionAndWidth;

package/cjs/timeline/utils/filter.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.invisiblePeriods = exports.withinADay = exports.getLastDate = exports.getFirstDate = exports.isVisible = void 0;
+const date_fns_1 = require("date-fns");
+const isVisible = ({ horizontalPosition }) => horizontalPosition <= 98 && horizontalPosition >= 0;
+exports.isVisible = isVisible;
+const getFirstDate = (periods) => {
+    return periods.sort((a, b) => a.start.getTime() - b.start.getTime())[0].start;
+};
+exports.getFirstDate = getFirstDate;
+const getLastDate = (periods) => {
+    return periods.sort((a, b) => a.end.getTime() - b.end.getTime())[periods.length - 1].end;
+};
+exports.getLastDate = getLastDate;
+const withinADay = (date1, date2) => (0, date_fns_1.differenceInDays)(date1, date2) <= 1;
+exports.withinADay = withinADay;
+const invisiblePeriods = ({ horizontalPosition, width, }) => horizontalPosition >= 0 && horizontalPosition <= 100 && width > 0;
+exports.invisiblePeriods = invisiblePeriods;

package/cjs/timeline/utils/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isVisible = exports.getLastDate = exports.getFirstDate = void 0;
+var filter_1 = require("./filter");
+Object.defineProperty(exports, "getFirstDate", { enumerable: true, get: function () { return filter_1.getFirstDate; } });
+Object.defineProperty(exports, "getLastDate", { enumerable: true, get: function () { return filter_1.getLastDate; } });
+Object.defineProperty(exports, "isVisible", { enumerable: true, get: function () { return filter_1.isVisible; } });

package/cjs/timeline/utils/package.json

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

package/cjs/timeline/utils/period.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ariaLabel = exports.getConditionalClasses = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const date_fns_1 = require("date-fns");
+const getConditionalClasses = (cropped, direction, status) => {
+    return (0, clsx_1.default)(`navds-timeline__period navds-timeline__period--${status}`, {
+        "navds-timeline__period--connected-both": cropped === "both",
+        "navds-timeline__period--connected-right": (cropped === "right" && direction === "left") ||
+            (cropped === "left" && direction === "right"),
+        "navds-timeline__period--connected-left": (cropped === "left" && direction === "left") ||
+            (cropped === "right" && direction === "right"),
+    });
+};
+exports.getConditionalClasses = getConditionalClasses;
+const translateStatus = (status) => {
+    switch (status) {
+        case "success":
+            return "Suksess";
+        case "warning":
+            return "Advarsel";
+        case "danger":
+            return "Fare";
+        case "info":
+            return "Info";
+        case "neutral":
+            return "Nøytral";
+        default:
+            return status;
+    }
+};
+const ariaLabel = (startDate, endDate, status, statusLabel) => {
+    const start = (0, date_fns_1.format)(startDate, "dd.MM.yyyy");
+    const end = (0, date_fns_1.format)(endDate, "dd.MM.yyyy");
+    return `${statusLabel ? statusLabel : translateStatus(status)} fra ${start} til ${end}`;
+};
+exports.ariaLabel = ariaLabel;

package/cjs/timeline/utils/sort.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lastSinglePeriod = exports.lastPeriod = exports.lastDate = void 0;
+const date_fns_1 = require("date-fns");
+const lastDate = (a, b) => (0, date_fns_1.differenceInMilliseconds)(a, b);
+exports.lastDate = lastDate;
+const lastPeriod = (a, b) => a.horizontalPosition - b.horizontalPosition;
+exports.lastPeriod = lastPeriod;
+const lastSinglePeriod = (a, b) => (0, date_fns_1.differenceInMilliseconds)(b.endInclusive, a.endInclusive);
+exports.lastSinglePeriod = lastSinglePeriod;

package/cjs/timeline/utils/timeline.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseRows = void 0;
+const util_1 = require("../../util");
+const react_1 = __importDefault(require("react"));
+const parseRows = (rowChildren) => {
+    let parsedChildren = [];
+    rowChildren === null || rowChildren === void 0 ? void 0 : rowChildren.forEach((r) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        let periods = [];
+        if (react_1.default.isValidElement(r) && ((_a = r === null || r === void 0 ? void 0 : r.props) === null || _a === void 0 ? void 0 : _a.children)) {
+            if (Array.isArray(r.props.children)) {
+                for (let i = 0; i < r.props.children.length; i++) {
+                    const p = r.props.children[i];
+                    periods.push({
+                        start: (_b = p === null || p === void 0 ? void 0 : p.props) === null || _b === void 0 ? void 0 : _b.start,
+                        end: (_c = p === null || p === void 0 ? void 0 : p.props) === null || _c === void 0 ? void 0 : _c.end,
+                        status: ((_d = p === null || p === void 0 ? void 0 : p.props) === null || _d === void 0 ? void 0 : _d.status) || "neutral",
+                        onSelectPeriod: (_e = p.props) === null || _e === void 0 ? void 0 : _e.onSelectPeriod,
+                        label: r.props.label,
+                        icon: p.props.icon,
+                        children: p.props.children,
+                        isActive: p.props.isActive,
+                        statusLabel: p.props.statusLabel,
+                        restProps: (0, util_1.omit)(p.props, [
+                            "start",
+                            "end",
+                            "status",
+                            "onSelectPeriod",
+                            "label",
+                            "icon",
+                            "children",
+                            "isActive",
+                            "statusLabel",
+                        ]),
+                        ref: p === null || p === void 0 ? void 0 : p.ref,
+                    });
+                }
+            }
+            else {
+                periods.push({
+                    start: r.props.children.props.start,
+                    end: r.props.children.props.end,
+                    status: ((_f = r.props.children.props) === null || _f === void 0 ? void 0 : _f.status) || "neutral",
+                    onSelectPeriod: (_g = r.props.children.props) === null || _g === void 0 ? void 0 : _g.onSelectPeriod,
+                    label: r.props.label,
+                    icon: (_h = r.props.children.props) === null || _h === void 0 ? void 0 : _h.icon,
+                    children: (_j = r.props.children.props) === null || _j === void 0 ? void 0 : _j.children,
+                    statusLabel: (_k = r.props.children.props) === null || _k === void 0 ? void 0 : _k.statusLabel,
+                    restProps: (0, util_1.omit)(r.props.children.props, [
+                        "start",
+                        "end",
+                        "status",
+                        "onSelectPeriod",
+                        "label",
+                        "icon",
+                        "children",
+                        "isActive",
+                        "statusLabel",
+                    ]),
+                    ref: (_m = (_l = r.props) === null || _l === void 0 ? void 0 : _l.children) === null || _m === void 0 ? void 0 : _m.ref,
+                });
+            }
+            parsedChildren.push({
+                label: r.props.label,
+                icon: r.props.icon,
+                headingTag: r.props.headingTag,
+                periods: periods,
+                restProps: (0, util_1.omit)(r.props, ["label", "icon", "headingTag"]),
+                ref: r === null || r === void 0 ? void 0 : r.ref,
+            });
+        }
+    });
+    return parsedChildren;
+};
+exports.parseRows = parseRows;

package/cjs/timeline/utils/types.external.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/timeline/utils/types.internal.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/timeline/zoom/ZoomButton.js

@@ -0,0 +1,68 @@
+"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.ZoomButton = void 0;
+const Detail_1 = require("../../typography/Detail");
+const date_fns_1 = require("date-fns");
+const react_1 = __importStar(require("react"));
+const useTimelineContext_1 = require("../hooks/useTimelineContext");
+exports.ZoomButton = (0, react_1.forwardRef)((_a, ref) => {
+    var { label, interval, count } = _a, rest = __rest(_a, ["label", "interval", "count"]);
+    const { setStart, endDate, startDate, direction } = (0, useTimelineContext_1.useTimelineContext)();
+    let startOfRange;
+    if (interval === "month") {
+        startOfRange =
+            direction === "left"
+                ? (0, date_fns_1.subMonths)(endDate, count)
+                : (0, date_fns_1.addMonths)(startDate, count);
+    }
+    else {
+        startOfRange =
+            direction === "left"
+                ? (0, date_fns_1.subYears)(endDate, count)
+                : (0, date_fns_1.addYears)(startDate, count);
+    }
+    const currentZoom = direction === "left"
+        ? (0, date_fns_1.isSameDay)(startDate, startOfRange)
+        : (0, date_fns_1.isSameDay)(endDate, startOfRange);
+    return (react_1.default.createElement(Detail_1.Detail, { as: "li" },
+        react_1.default.createElement("button", Object.assign({ type: "button", "aria-label": !currentZoom
+                ? `Zoom tidslinjen ${(0, date_fns_1.format)(startOfRange, "dd.MM.yyyy")} til ${(0, date_fns_1.format)(endDate, "dd.MM.yyyy")}`
+                : "Tilbakestill til initiell tidsperspektiv", ref: ref }, rest, { className: "navds-timeline__zoom-button", onClick: () => {
+                setStart(startOfRange);
+            }, "aria-pressed": currentZoom }), label)));
+});
+exports.default = exports.ZoomButton;

package/cjs/timeline/zoom/index.js

@@ -0,0 +1,50 @@
+"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.Zoom = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const ZoomButton_1 = __importDefault(require("./ZoomButton"));
+exports.Zoom = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    return (react_1.default.createElement("ul", Object.assign({ ref: ref, className: (0, clsx_1.default)(className, "navds-timeline__zoom") }, rest), children));
+});
+exports.Zoom.Button = ZoomButton_1.default;
+exports.Zoom.componentType = "zoom";
+exports.default = exports.Zoom;

package/cjs/timeline/zoom/package.json

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

package/cjs/toggle-group/ToggleGroup.js

@@ -38,12 +38,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleGroup = exports.ToggleGroupContext = void 0;
+const RadixToggleGroup = __importStar(require("@radix-ui/react-toggle-group"));
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const ToggleItem_1 = __importDefault(require("./ToggleItem"));
-const RadixToggleGroup = __importStar(require("@radix-ui/react-toggle-group"));
 const __1 = require("..");
+const ToggleItem_1 = __importDefault(require("./ToggleItem"));
 exports.ToggleGroupContext = (0, react_1.createContext)(null);
+/**
+ * A component that displays a group of toggle buttons.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/toggle-group)
+ * @see 🏷️ {@link ToggleGroupProps}
+ *
+ * @example
+ * ```jsx
+ * <ToggleGroup defaultValue="lest" onChange={console.log} size="small">
+ *   <ToggleGroup.Item value="ulest">Ulest</ToggleGroup.Item>
+ *   <ToggleGroup.Item value="lest">Leste</ToggleGroup.Item>
+ *   <ToggleGroup.Item value="sendt">Sendt</ToggleGroup.Item>
+ * </ToggleGroup>
+ * ```
+ */
 exports.ToggleGroup = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, onChange, size = "medium", label, value, defaultValue, id, "aria-describedby": desc, variant = "action" } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "label", "value", "defaultValue", "id", "aria-describedby", "variant"]);
     const [groupValue, setGroupValue] = (0, react_1.useState)(defaultValue);