@navikt/ds-react 3.4.2 → 4.1.0

package/cjs/stepper/Stepper.js

@@ -42,6 +42,30 @@ const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const Step_1 = __importDefault(require("./Step"));
 exports.StepperContext = (0, react_1.createContext)(null);
+/**
+ * A component that displays a stepper with clickable steps.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/stepper)
+ * @see 🏷️ {@link StepperProps}
+ *
+ * @example
+ * ```jsx
+ * <>
+ *   <Heading size="medium" spacing level="2" id="stepper-heading">
+ *     Søknadssteg
+ *   </Heading>
+ *   <Stepper
+ *     aria-labelledby="stepper-heading"
+ *     activeStep={activeStep}
+ *     onStepChange={(x) => setActiveStep(x)}
+ *   >
+ *     <Stepper.Step href="#">Start søknad</Stepper.Step>
+ *     <Stepper.Step href="#">Saksopplysninger</Stepper.Step>
+ *     <Stepper.Step href="#">Vedlegg</Stepper.Step>
+ *   </Stepper>
+ * </>
+ * ```
+ */
 exports.Stepper = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, activeStep, orientation = "vertical", onStepChange = () => { }, interactive = true } = _a, rest = __rest(_a, ["children", "className", "activeStep", "orientation", "onStepChange", "interactive"]);
     activeStep = activeStep - 1;

package/cjs/table/Table.js

@@ -48,6 +48,38 @@ const HeaderCell_1 = __importDefault(require("./HeaderCell"));
 const DataCell_1 = __importDefault(require("./DataCell"));
 const ExpandableRow_1 = __importDefault(require("./ExpandableRow"));
 exports.TableContext = (0, react_1.createContext)(null);
+/**
+ * A component that displays a table with headers and rows.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/table)
+ * @see 🏷️ {@link TableProps}
+ *
+ * @example
+ * ```jsx
+ * <Table>
+ *   <Table.Header>
+ *     <Table.Row>
+ *       <Table.HeaderCell scope="col">Navn</Table.HeaderCell>
+ *       <Table.HeaderCell scope="col">Fødseslnr.</Table.HeaderCell>
+ *       <Table.HeaderCell scope="col">Start</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     {data.map(({ name, fnr, start }, i) => {
+ *       return (
+ *         <Table.Row key={i + fnr}>
+ *           <Table.HeaderCell scope="row">{name}</Table.HeaderCell>
+ *           <Table.DataCell>{fnr}</Table.DataCell>
+ *           <Table.DataCell>
+ *             {format(new Date(start), "dd.MM.yyyy")}
+ *           </Table.DataCell>
+ *         </Table.Row>
+ *       );
+ *     })}
+ *   </Table.Body>
+ * </Table>
+ * ```
+ */
 exports.Table = (0, react_1.forwardRef)((_a, ref) => {
     var { className, zebraStripes = false, size = "medium", onSortChange, sort } = _a, rest = __rest(_a, ["className", "zebraStripes", "size", "onSortChange", "sort"]);
     return (react_1.default.createElement(exports.TableContext.Provider, { value: { size, onSortChange, sort } },

package/cjs/tabs/Tabs.js

@@ -38,13 +38,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = exports.TabsContext = void 0;
+const RadixTabs = __importStar(require("@radix-ui/react-tabs"));
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const RadixTabs = __importStar(require("@radix-ui/react-tabs"));
 const Tab_1 = __importDefault(require("./Tab"));
 const TabList_1 = __importDefault(require("./TabList"));
 const TabPanel_1 = __importDefault(require("./TabPanel"));
 exports.TabsContext = (0, react_1.createContext)(null);
+/**
+ * A component that displays a set of tabs that can be used to switch between different views.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/tabs)
+ * @see 🏷️ {@link TabsProps}
+ *
+ * @example
+ * ```jsx
+ * <Tabs defaultValue="logg">
+ *   <Tabs.List>
+ *     <Tabs.Tab value="logg" label="Logg" />
+ *     <Tabs.Tab value="inbox" label="Inbox" />
+ *     <Tabs.Tab value="sendt" label="Sendt" />
+ *   </Tabs.List>
+ *   <Tabs.Panel value="logg" className="h-24 w-full bg-gray-50 p-4">
+ *     Logg-tab
+ *   </Tabs.Panel>
+ *   <Tabs.Panel value="inbox" className="h-24 w-full bg-gray-50 p-4">
+ *     Inbox-tab
+ *   </Tabs.Panel>
+ *   <Tabs.Panel value="sendt" className="h-24  w-full bg-gray-50 p-4">
+ *     Sendt-tab
+ *   </Tabs.Panel>
+ * </Tabs>
+ * ```
+ */
 exports.Tabs = (0, react_1.forwardRef)((_a, ref) => {
     var { className, children, onChange, size = "medium", selectionFollowsFocus = false, loop = false, iconPosition = "left" } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "selectionFollowsFocus", "loop", "iconPosition"]);
     return (react_1.default.createElement(RadixTabs.Root, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-tabs", className, `navds-tabs--${size}`), activationMode: selectionFollowsFocus ? "automatic" : "manual", onValueChange: onChange }),

package/cjs/tag/Tag.js

@@ -41,6 +41,17 @@ exports.Tag = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
+/**
+ * A component that displays a small label with a text and a background color.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/tag)
+ * @see 🏷️ {@link TagProps}
+ *
+ * @example
+ * ```jsx
+ * <Tag variant="success">Success</Tag>
+ * ```
+ */
 exports.Tag = (0, react_1.forwardRef)((_a, ref) => {
     var { className, variant, size = "medium" } = _a, rest = __rest(_a, ["className", "variant", "size"]);
     return (react_1.default.createElement(__1.BodyShort, Object.assign({}, rest, { ref: ref, as: "span", size: size === "medium" ? "medium" : "small", className: (0, clsx_1.default)("navds-tag", className, `navds-tag--${variant}`, `navds-tag--${size}`) })));

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,180 @@
+"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"));
+/**
+ * A component that displays a timeline of events. Meant for Internal systems.
+ * @note Component is made for desktop enviroments and will start having issues on smaller screens.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/timeline)
+ * @see 🏷️ {@link TimelineProps}
+ *
+ * @example
+ * ```jsx
+ * <Timeline>
+ *   <Timeline.Row>
+ *    <Timeline.Period start={new Date("2020-01-01")} end={new Date("2020-01-31")}>
+ *    <p>Period 1</p>
+ *   </Timeline.Period>
+ *  <Timeline.Row>
+ * </Timeline>
+ * ```
+ */
+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;

package/cjs/timeline/TimelineRow.js

@@ -0,0 +1,86 @@
+"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.TimelineRow = void 0;
+const BodyShort_1 = require("../typography/BodyShort");
+const date_fns_1 = require("date-fns");
+const react_1 = __importStar(require("react"));
+const usePeriodContext_1 = require("./hooks/usePeriodContext");
+const useRowContext_1 = require("./hooks/useRowContext");
+const useTimelineContext_1 = require("./hooks/useTimelineContext");
+const period_1 = __importDefault(require("./period"));
+const clsx_1 = __importDefault(require("clsx"));
+exports.TimelineRow = (0, react_1.forwardRef)((_a, ref) => {
+    var { label, className, headingTag = "h3", icon } = _a, rest = __rest(_a, ["label", "className", "headingTag", "icon"]);
+    const { periods, id, active } = (0, useRowContext_1.useRowContext)();
+    const { setActiveRow } = (0, useTimelineContext_1.useTimelineContext)();
+    const latest = periods.reduce((a, b) => {
+        return a.end > b.end ? a : b;
+    }, {});
+    const earliest = periods.reduce((a, b) => {
+        return a.end < b.end ? a : b;
+    }, {});
+    const firstFocusable = periods.find((p) => !!p.children || !!p.onSelectPeriod);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        label && (react_1.default.createElement(BodyShort_1.BodyShort, { as: headingTag, id: `timeline-row-${id}`, className: "navds-timeline__row-label", size: "small" },
+            icon,
+            label)),
+        react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-timeline__row", {
+                "navds-timeline__row--active": active,
+            }) },
+            react_1.default.createElement("ol", Object.assign({}, rest, { ref: ref, "aria-label": periods.length === 0
+                    ? "Ingen perioder"
+                    : `${(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) => {
+                    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                        e.preventDefault();
+                        setActiveRow(e.key);
+                    }
+                } }), periods &&
+                periods.map((period) => {
+                    return (react_1.default.createElement("li", { key: `period-${period.id}` },
+                        react_1.default.createElement(usePeriodContext_1.PeriodContext.Provider, { value: {
+                                periodId: period.id,
+                                firstFocus: (firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.id) === period.id,
+                                restProps: period === null || period === void 0 ? void 0 : period.restProps,
+                            } },
+                            react_1.default.createElement(period_1.default, { start: period.start, end: period.endInclusive, icon: period.icon, ref: period === null || period === void 0 ? void 0 : period.ref }))));
+                })))));
+});
+exports.TimelineRow.componentType = "row";
+exports.default = exports.TimelineRow;

package/cjs/timeline/hooks/usePeriodContext.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePeriodContext = exports.PeriodContext = void 0;
+const react_1 = require("react");
+exports.PeriodContext = (0, react_1.createContext)({
+    periodId: "",
+    firstFocus: false,
+});
+const usePeriodContext = () => {
+    const context = (0, react_1.useContext)(exports.PeriodContext);
+    if (!context) {
+        console.warn("usePeriodContext must be used with PeriodContext");
+    }
+    return context;
+};
+exports.usePeriodContext = usePeriodContext;

package/cjs/timeline/hooks/useRowContext.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRowContext = exports.RowContext = void 0;
+const react_1 = require("react");
+exports.RowContext = (0, react_1.createContext)({
+    periods: [],
+    id: "",
+    active: false,
+    index: 0,
+});
+const useRowContext = () => {
+    const context = (0, react_1.useContext)(exports.RowContext);
+    if (!context) {
+        console.warn("useRowContext must be used with RowContext");
+    }
+    return context;
+};
+exports.useRowContext = useRowContext;

package/cjs/timeline/hooks/useTimelineContext.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineContext = exports.TimelineContext = void 0;
+const react_1 = require("react");
+exports.TimelineContext = (0, react_1.createContext)({
+    startDate: new Date(),
+    endDate: new Date(),
+    direction: "left",
+    setStart: () => null,
+    setEndInclusive: () => null,
+    activeRow: 0,
+    setActiveRow: () => null,
+    initiate: () => null,
+    addFocusable: () => null,
+});
+const useTimelineContext = () => {
+    const context = (0, react_1.useContext)(exports.TimelineContext);
+    if (!context) {
+        console.warn("useTimelineContext must be used with TimelineContext (<Timeline />)");
+    }
+    return context;
+};
+exports.useTimelineContext = useTimelineContext;