@navikt/ds-react 3.4.1 → 4.0.0

package/esm/timeline/period/NonClickablePeriod.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { ariaLabel, getConditionalClasses } from "../utils/period";
+import cl from "clsx";
+const NonClickablePeriod = ({ start, end, status, cropped, direction, left, width, icon, statusLabel, restProps, periodRef, }) => {
+    return (React.createElement("div", Object.assign({ ref: periodRef }, restProps, { className: cl(getConditionalClasses(cropped, direction, status), restProps === null || restProps === void 0 ? void 0 : restProps.classname), style: {
+            width: `${width}%`,
+            [direction]: `${left}%`,
+        } }),
+        React.createElement("span", { className: "navds-timeline__period--inner" },
+            icon,
+            React.createElement("span", { className: "sr-only" }, ariaLabel(start, end, status, statusLabel)))));
+};
+export default NonClickablePeriod;
+//# sourceMappingURL=NonClickablePeriod.js.map

package/esm/timeline/period/NonClickablePeriod.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NonClickablePeriod.js","sourceRoot":"","sources":["../../../src/timeline/period/NonClickablePeriod.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAEnE,OAAO,EAAE,MAAM,MAAM,CAAC;AAMtB,MAAM,kBAAkB,GAAG,CAAC,EAC1B,KAAK,EACL,GAAG,EACH,MAAM,EACN,OAAO,EACP,SAAS,EACT,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,WAAW,EACX,SAAS,EACT,SAAS,GACuB,EAAE,EAAE;IACpC,OAAO,CACL,2CACE,GAAG,EAAE,SAAS,IACV,SAAS,IACb,SAAS,EAAE,EAAE,CACX,qBAAqB,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,EACjD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CACrB,EACD,KAAK,EAAE;YACL,KAAK,EAAE,GAAG,KAAK,GAAG;YAClB,CAAC,SAAS,CAAC,EAAE,GAAG,IAAI,GAAG;SACxB;QAED,8BAAM,SAAS,EAAC,+BAA+B;YAC5C,IAAI;YACL,8BAAM,SAAS,EAAC,SAAS,IACtB,SAAS,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,WAAW,CAAC,CACtC,CACF,CACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/esm/timeline/period/index.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+import { TimelineComponentTypes } from "../utils/types.internal";
+export interface TimelinePeriodProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Period start date.
+     */
+    start: Date;
+    /**
+     * Period end date.
+     */
+    end: Date;
+    /**
+     * Icon for easier visual identification.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Period status.
+     * @default "neutral"
+     */
+    status?: "success" | "warning" | "danger" | "info" | "neutral";
+    /**
+     * Status label for screen-readers
+     * e.g "Sykemeldt", "foreldrepermisjon"
+     */
+    statusLabel?: string;
+    /**
+     * Callback when selecting a period.
+     */
+    onSelectPeriod?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * Content displayed in Popover on click.
+     */
+    children?: React.ReactNode;
+    /**
+     * Visual active inidcation on period
+     * @note Make sure only one period is active at a time
+     */
+    isActive?: boolean;
+}
+export interface PeriodProps {
+    start: Date;
+    end: Date;
+    status: string;
+    cropped: string;
+    direction: string;
+    width: Number;
+    left: Number;
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    statusLabel?: string;
+    restProps?: any;
+}
+export interface PeriodType extends React.ForwardRefExoticComponent<TimelinePeriodProps & React.RefAttributes<HTMLDivElement | HTMLButtonElement>> {
+    componentType: TimelineComponentTypes;
+}
+export declare const Period: PeriodType;
+export default Period;

package/esm/timeline/period/index.js

@@ -0,0 +1,18 @@
+import React, { forwardRef } from "react";
+import { usePeriodContext } from "../hooks/usePeriodContext";
+import { useRowContext } from "../hooks/useRowContext";
+import ClickablePeriod from "./ClickablePeriod";
+import NonClickablePeriod from "./NonClickablePeriod";
+export const Period = forwardRef(({ icon }, ref) => {
+    const { periods } = useRowContext();
+    const { periodId, restProps } = usePeriodContext();
+    const period = periods.find((p) => p.id === periodId);
+    if (!period) {
+        return React.createElement(React.Fragment, null);
+    }
+    const { start, endInclusive, width, horizontalPosition, status = "neutral", onSelectPeriod, cropped, direction, children, isActive, statusLabel, } = period;
+    return onSelectPeriod || children ? (React.createElement(ClickablePeriod, { 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.createElement(NonClickablePeriod, { periodRef: ref, start: start, end: endInclusive, status: status, cropped: cropped || "", direction: direction, width: width, left: horizontalPosition, icon: icon, statusLabel: statusLabel, restProps: restProps }));
+});
+Period.componentType = "period";
+export default Period;
+//# sourceMappingURL=index.js.map

package/esm/timeline/period/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/timeline/period/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AA+DtD,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAChB,MAAM,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE,CAAC;IACpC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEnD,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC;IAEtD,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,yCAAK,CAAC;KACd;IACD,MAAM,EACJ,KAAK,EACL,YAAY,EACZ,KAAK,EACL,kBAAkB,EAClB,MAAM,GAAG,SAAS,EAClB,cAAc,EACd,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,WAAW,GACZ,GAAG,MAAM,CAAC;IAEX,OAAO,cAAc,IAAI,QAAQ,CAAC,CAAC,CAAC,CAClC,oBAAC,eAAe,IACd,SAAS,EAAE,GAA4C,EACvD,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,YAAY,EACjB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,OAAO,IAAI,EAAE,EACtB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,kBAAkB,EACxB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,kBAAkB,IACjB,SAAS,EAAE,GAAG,EACd,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,YAAY,EACjB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,IAAI,EAAE,EACtB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,kBAAkB,EACxB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CACY,CAAC;AAEhB,MAAM,CAAC,aAAa,GAAG,QAAQ,CAAC;AAEhC,eAAe,MAAM,CAAC"}

package/esm/timeline/utils/calc.d.ts

@@ -0,0 +1,5 @@
+export declare const position: (date: Date, start: Date, endInclusive: Date) => number;
+export declare const horizontalPositionAndWidth: (start: Date, endInclusive: Date, timelineStart: Date, timelineEndInclusive: Date) => {
+    horizontalPosition: number;
+    width: number;
+};

package/esm/timeline/utils/calc.js

@@ -0,0 +1,15 @@
+import { differenceInMilliseconds } from "date-fns";
+export const position = (date, start, endInclusive) => {
+    const diff = differenceInMilliseconds(endInclusive, start);
+    return (differenceInMilliseconds(date, start) / diff) * 100;
+};
+export const horizontalPositionAndWidth = (start, endInclusive, timelineStart, timelineEndInclusive) => {
+    const horizontalPosition = position(start, timelineStart, timelineEndInclusive);
+    const width = position(endInclusive, timelineStart, timelineEndInclusive) -
+        horizontalPosition;
+    return {
+        horizontalPosition: horizontalPosition,
+        width: width,
+    };
+};
+//# sourceMappingURL=calc.js.map

package/esm/timeline/utils/calc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calc.js","sourceRoot":"","sources":["../../../src/timeline/utils/calc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAEpD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,IAAU,EAAE,KAAW,EAAE,YAAkB,EAAE,EAAE;IACtE,MAAM,IAAI,GAAG,wBAAwB,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IAC3D,OAAO,CAAC,wBAAwB,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC;AAC9D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,KAAW,EACX,YAAkB,EAClB,aAAmB,EACnB,oBAA0B,EAC1B,EAAE;IACF,MAAM,kBAAkB,GAAG,QAAQ,CACjC,KAAK,EACL,aAAa,EACb,oBAAoB,CACrB,CAAC;IACF,MAAM,KAAK,GACT,QAAQ,CAAC,YAAY,EAAE,aAAa,EAAE,oBAAoB,CAAC;QAC3D,kBAAkB,CAAC;IACrB,OAAO;QACL,kBAAkB,EAAE,kBAAkB;QACtC,KAAK,EAAE,KAAK;KACb,CAAC;AACJ,CAAC,CAAC"}

package/esm/timeline/utils/filter.d.ts

@@ -0,0 +1,10 @@
+import { Spatial } from "./types.internal";
+export interface Positioned {
+    horizontalPosition: number;
+    direction: "left" | "right";
+}
+export declare const isVisible: ({ horizontalPosition }: Positioned) => boolean;
+export declare const getFirstDate: (periods: any) => any;
+export declare const getLastDate: (periods: any) => any;
+export declare const withinADay: (date1: Date, date2: Date) => boolean;
+export declare const invisiblePeriods: ({ horizontalPosition, width, }: Positioned & Spatial) => boolean;

package/esm/timeline/utils/filter.js

@@ -0,0 +1,11 @@
+import { differenceInDays } from "date-fns";
+export const isVisible = ({ horizontalPosition }) => horizontalPosition <= 98 && horizontalPosition >= 0;
+export const getFirstDate = (periods) => {
+    return periods.sort((a, b) => a.start.getTime() - b.start.getTime())[0].start;
+};
+export const getLastDate = (periods) => {
+    return periods.sort((a, b) => a.end.getTime() - b.end.getTime())[periods.length - 1].end;
+};
+export const withinADay = (date1, date2) => differenceInDays(date1, date2) <= 1;
+export const invisiblePeriods = ({ horizontalPosition, width, }) => horizontalPosition >= 0 && horizontalPosition <= 100 && width > 0;
+//# sourceMappingURL=filter.js.map

package/esm/timeline/utils/filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.js","sourceRoot":"","sources":["../../../src/timeline/utils/filter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAS5C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,kBAAkB,EAAc,EAAW,EAAE,CACvE,kBAAkB,IAAI,EAAE,IAAI,kBAAkB,IAAI,CAAC,CAAC;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,OAAY,EAAE,EAAE;IAC3C,OAAO,OAAO,CAAC,IAAI,CACjB,CAAC,CAAc,EAAE,CAAc,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,CAC1E,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAY,EAAE,EAAE;IAC1C,OAAO,OAAO,CAAC,IAAI,CACjB,CAAC,CAAc,EAAE,CAAc,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,CACtE,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;AAC5B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAW,EAAE,KAAW,EAAW,EAAE,CAC9D,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,kBAAkB,EAClB,KAAK,GACgB,EAAE,EAAE,CACzB,kBAAkB,IAAI,CAAC,IAAI,kBAAkB,IAAI,GAAG,IAAI,KAAK,GAAG,CAAC,CAAC"}

package/esm/timeline/utils/index.d.ts

@@ -0,0 +1 @@
+export { getFirstDate, getLastDate, isVisible, type Positioned, } from "./filter";

package/esm/timeline/utils/index.js

@@ -0,0 +1,2 @@
+export { getFirstDate, getLastDate, isVisible, } from "./filter";
+//# sourceMappingURL=index.js.map

package/esm/timeline/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/timeline/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,WAAW,EACX,SAAS,GAEV,MAAM,UAAU,CAAC"}

package/esm/timeline/utils/period.d.ts

@@ -0,0 +1,2 @@
+export declare const getConditionalClasses: (cropped: string, direction: string, status: string) => string;
+export declare const ariaLabel: (startDate: Date, endDate: Date, status: string, statusLabel?: string) => string;

package/esm/timeline/utils/period.js

@@ -0,0 +1,33 @@
+import cl from "clsx";
+import { format } from "date-fns";
+export const getConditionalClasses = (cropped, direction, status) => {
+    return cl(`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"),
+    });
+};
+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;
+    }
+};
+export const ariaLabel = (startDate, endDate, status, statusLabel) => {
+    const start = format(startDate, "dd.MM.yyyy");
+    const end = format(endDate, "dd.MM.yyyy");
+    return `${statusLabel ? statusLabel : translateStatus(status)} fra ${start} til ${end}`;
+};
+//# sourceMappingURL=period.js.map

package/esm/timeline/utils/period.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"period.js","sourceRoot":"","sources":["../../../src/timeline/utils/period.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACnC,OAAe,EACf,SAAiB,EACjB,MAAc,EACd,EAAE;IACF,OAAO,EAAE,CAAC,kDAAkD,MAAM,EAAE,EAAE;QACpE,wCAAwC,EAAE,OAAO,KAAK,MAAM;QAC5D,yCAAyC,EACvC,CAAC,OAAO,KAAK,OAAO,IAAI,SAAS,KAAK,MAAM,CAAC;YAC7C,CAAC,OAAO,KAAK,MAAM,IAAI,SAAS,KAAK,OAAO,CAAC;QAC/C,wCAAwC,EACtC,CAAC,OAAO,KAAK,MAAM,IAAI,SAAS,KAAK,MAAM,CAAC;YAC5C,CAAC,OAAO,KAAK,OAAO,IAAI,SAAS,KAAK,OAAO,CAAC;KACjD,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,MAAc,EAAU,EAAE;IACjD,QAAQ,MAAM,EAAE;QACd,KAAK,SAAS;YACZ,OAAO,SAAS,CAAC;QACnB,KAAK,SAAS;YACZ,OAAO,UAAU,CAAC;QACpB,KAAK,QAAQ;YACX,OAAO,MAAM,CAAC;QAChB,KAAK,MAAM;YACT,OAAO,MAAM,CAAC;QAChB,KAAK,SAAS;YACZ,OAAO,SAAS,CAAC;QACnB;YACE,OAAO,MAAM,CAAC;KACjB;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,SAAe,EACf,OAAa,EACb,MAAc,EACd,WAAoB,EACZ,EAAE;IACV,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;IAC9C,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;IAC1C,OAAO,GACL,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,MAAM,CACpD,QAAQ,KAAK,QAAQ,GAAG,EAAE,CAAC;AAC7B,CAAC,CAAC"}

package/esm/timeline/utils/sort.d.ts

@@ -0,0 +1,4 @@
+import { Period, PositionedPeriod } from "./types.internal";
+export declare const lastDate: (a: Date, b: Date) => number;
+export declare const lastPeriod: (a: PositionedPeriod, b: PositionedPeriod) => number;
+export declare const lastSinglePeriod: (a: Period, b: Period) => number;

package/esm/timeline/utils/sort.js

@@ -0,0 +1,5 @@
+import { differenceInMilliseconds } from "date-fns";
+export const lastDate = (a, b) => differenceInMilliseconds(a, b);
+export const lastPeriod = (a, b) => a.horizontalPosition - b.horizontalPosition;
+export const lastSinglePeriod = (a, b) => differenceInMilliseconds(b.endInclusive, a.endInclusive);
+//# sourceMappingURL=sort.js.map

package/esm/timeline/utils/sort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort.js","sourceRoot":"","sources":["../../../src/timeline/utils/sort.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAGpD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,CAAO,EAAE,CAAO,EAAU,EAAE,CACnD,wBAAwB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAEjC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,CAAmB,EAAE,CAAmB,EAAU,EAAE,CAC7E,CAAC,CAAC,kBAAkB,GAAG,CAAC,CAAC,kBAAkB,CAAC;AAE9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,CAAS,EAAE,CAAS,EAAU,EAAE,CAC/D,wBAAwB,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC"}

package/esm/timeline/utils/timeline.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+import { Period } from "./types.external";
+type ParsedChild = {
+    label?: string;
+    icon?: React.ReactNode;
+    headingTag: string;
+    periods: Omit<Period, "id" | "endInclusive">[];
+    restProps: any;
+    ref: any;
+};
+export declare const parseRows: (rowChildren: ReactNode[]) => ParsedChild[];
+export {};

package/esm/timeline/utils/timeline.js

@@ -0,0 +1,73 @@
+import { omit } from "../../util";
+import React from "react";
+export 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.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: 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: 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: omit(r.props, ["label", "icon", "headingTag"]),
+                ref: r === null || r === void 0 ? void 0 : r.ref,
+            });
+        }
+    });
+    return parsedChildren;
+};
+//# sourceMappingURL=timeline.js.map

package/esm/timeline/utils/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","sourceRoot":"","sources":["../../../src/timeline/utils/timeline.ts"],"names":[],"mappings":"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"}

package/esm/timeline/utils/types.external.d.ts

@@ -0,0 +1,53 @@
+import React from "react";
+export type PeriodStatus = "success" | "warning" | "danger" | "info" | "neutral";
+export type Percentage = number;
+export interface Positioned {
+    horizontalPosition: number;
+    direction: "left" | "right";
+}
+export interface Period {
+    id: string;
+    label?: string;
+    start: Date;
+    endInclusive: Date;
+    status?: PeriodStatus;
+    onSelectPeriod?: () => void;
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    end: Date;
+    isActive?: boolean;
+    statusLabel?: string;
+    restProps?: any;
+    ref?: Element;
+}
+export interface PositionedPeriod extends Period, Positioned {
+    width: number;
+    active?: boolean;
+    cropped?: "left" | "right" | "both";
+    disabled?: boolean;
+    className?: string;
+    hoverLabel?: React.ReactNode;
+    infoPin?: boolean;
+    start: Date;
+}
+export interface Spatial {
+    width: number;
+}
+export interface AxisLabel extends Positioned, Spatial {
+    label: string;
+    date: Date;
+}
+export interface InternalSimpleTimeline {
+    id: string;
+    periods: PositionedPeriod[];
+}
+export interface SimplePeriod {
+    /**
+     * Startdato for perioden, mao. periodens høyre kant.
+     */
+    start: Date;
+    /**
+     * Sluttdato for perioden, mao. periodens venstre kant.
+     */
+    end: Date;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.external.js.map

package/esm/timeline/utils/types.external.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.external.js","sourceRoot":"","sources":["../../../src/timeline/utils/types.external.ts"],"names":[],"mappings":""}

package/esm/timeline/utils/types.internal.d.ts

@@ -0,0 +1,61 @@
+import React from "react";
+export type TimelineComponentTypes = "row" | "pin" | "period";
+export type PeriodStatus = "success" | "warning" | "danger" | "info" | "neutral";
+export type Percentage = number;
+export interface Positioned {
+    horizontalPosition: number;
+    direction: "left" | "right";
+}
+export interface Period {
+    id: string;
+    start: Date;
+    endInclusive: Date;
+    status?: PeriodStatus;
+    onSelectPeriod?: () => void;
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    isActive?: boolean;
+}
+export interface PositionedPeriod extends Period, Positioned {
+    width: number;
+    active?: boolean;
+    cropped?: "left" | "right" | "both";
+    disabled?: boolean;
+    className?: string;
+    hoverLabel?: React.ReactNode;
+    infoPin?: boolean;
+    end: Date;
+    statusLabel?: string;
+    restProps?: any;
+    ref?: any;
+}
+export interface Spatial {
+    width: number;
+}
+export interface AxisLabel extends Positioned, Spatial {
+    label: string;
+    date: Date;
+}
+export interface InternalSimpleTimeline {
+    label: string;
+    id: string;
+    periods: PositionedPeriod[];
+    icon?: React.ReactNode;
+    headingTag: "h2" | "h3" | "h4" | "h5" | "h6";
+    restProps: any;
+    ref: any;
+}
+export interface SelectedPeriod {
+    /**
+     * Start of the period.
+     */
+    start: Date;
+    /**
+     * End of the period.
+     */
+    end: Date;
+    /**
+     * Period id
+     */
+    id: string;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.internal.js.map

package/esm/timeline/utils/types.internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.internal.js","sourceRoot":"","sources":["../../../src/timeline/utils/types.internal.ts"],"names":[],"mappings":""}

package/esm/timeline/zoom/ZoomButton.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface TimelineZoomButtonProps {
+    /**
+     * e.g 3mnd, 6mnd etc
+     */
+    label: string;
+    /**
+     * Zoom interval in months or years
+     */
+    interval: "month" | "year";
+    /**
+     * How many units of the interval that will be applied
+     * e.g interval="month" + count={3} equals 3 months
+     */
+    count: number;
+}
+export type ZoomButtonType = React.ForwardRefExoticComponent<TimelineZoomButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ZoomButton: ZoomButtonType;
+export default ZoomButton;

package/esm/timeline/zoom/ZoomButton.js

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

package/esm/timeline/zoom/ZoomButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZoomButton.js","sourceRoot":"","sources":["../../../src/timeline/zoom/ZoomButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EACL,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,SAAS,EACT,QAAQ,GACT,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAsBjE,MAAM,CAAC,MAAM,UAAU,GAAmB,UAAU,CAClD,CAAC,EAAmC,EAAE,GAAG,EAAE,EAAE;QAA5C,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,OAAW,EAAN,IAAI,cAAjC,8BAAmC,CAAF;IAChC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAEzE,IAAI,YAAkB,CAAC;IAEvB,IAAI,QAAQ,KAAK,OAAO,EAAE;QACxB,YAAY;YACV,SAAS,KAAK,MAAM;gBAClB,CAAC,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC;gBAC3B,CAAC,CAAC,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;KACnC;SAAM;QACL,YAAY;YACV,SAAS,KAAK,MAAM;gBAClB,CAAC,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC;gBAC1B,CAAC,CAAC,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;KAClC;IAED,MAAM,WAAW,GACf,SAAS,KAAK,MAAM;QAClB,CAAC,CAAC,SAAS,CAAC,SAAS,EAAE,YAAY,CAAC;QACpC,CAAC,CAAC,SAAS,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;IAEvC,OAAO,CACL,oBAAC,MAAM,IAAC,EAAE,EAAC,IAAI;QACb,8CACE,IAAI,EAAC,QAAQ,gBAEX,CAAC,WAAW;gBACV,CAAC,CAAC,mBAAmB,MAAM,CACvB,YAAY,EACZ,YAAY,CACb,QAAQ,MAAM,CAAC,OAAO,EAAE,YAAY,CAAC,EAAE;gBAC1C,CAAC,CAAC,0CAA0C,EAEhD,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,SAAS,EAAC,6BAA6B,EACvC,OAAO,EAAE,GAAG,EAAE;gBACZ,QAAQ,CAAC,YAAY,CAAC,CAAC;YACzB,CAAC,kBACa,WAAW,KAExB,KAAK,CACC,CACF,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/timeline/zoom/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ZoomButtonType } from "./ZoomButton";
+interface ZoomProps extends React.HTMLAttributes<HTMLUListElement> {
+    children: React.ReactNode;
+}
+export interface ZoomType<Props = ZoomProps> extends React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLUListElement>> {
+    Button: ZoomButtonType;
+    componentType: string;
+}
+export declare const Zoom: ZoomType<ZoomProps>;
+export default Zoom;

package/esm/timeline/zoom/index.js

@@ -0,0 +1,22 @@
+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;
+};
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import ZoomButton from "./ZoomButton";
+export const Zoom = forwardRef((_a, ref) => {
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    return (React.createElement("ul", Object.assign({ ref: ref, className: cl(className, "navds-timeline__zoom") }, rest), children));
+});
+Zoom.Button = ZoomButton;
+Zoom.componentType = "zoom";
+export default Zoom;
+//# sourceMappingURL=index.js.map

package/esm/timeline/zoom/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/timeline/zoom/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,UAA8B,MAAM,cAAc,CAAC;AAc1D,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,OAAO,CACL,0CAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,sBAAsB,CAAC,IAAM,IAAI,GACrE,QAAQ,CACN,CACN,CAAC;AACJ,CAAC,CACU,CAAC;AAEd,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC;AACzB,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;AAE5B,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "3.4.1",
+  "version": "4.0.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^3.4.1",
+    "@navikt/aksel-icons": "^4.0.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",