@navikt/ds-react 3.4.2 → 4.0.0

package/esm/timeline/Timeline.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import { PeriodType } from "./period";
+import { PinType } from "./Pin";
+import { TimelineRowType } from "./TimelineRow";
+import { ZoomType } from "./zoom";
+export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Decides startingpoint in timeline.
+     * Defaults to earliest date among the timeline periods.
+     * @note Using this disables use of ZoomButtons. You will need to control zooming yourself.
+     */
+    startDate?: Date;
+    /**
+     * Decides end-date for timeline.
+     * Defaults to the latest date among the timeline periods.
+     * @note Using this disables use of ZoomButtons. You will need to control zooming yourself.
+     */
+    endDate?: Date;
+    /**
+     * Decides direction which periods are sorted/displayed. "left" ascends from earliest date on left.
+     * @default "left"
+     */
+    direction?: "left" | "right";
+}
+interface TimelineComponent extends React.ForwardRefExoticComponent<TimelineProps> {
+    /**
+     * Built-in timeline row
+     */
+    Row: TimelineRowType;
+    /**
+     * Built-in row period
+     */
+    Period: PeriodType;
+    /**
+     * Built-in timeline pin
+     */
+    Pin: PinType;
+    /**
+     * Built-in timeline zoom-component
+     */
+    Zoom: ZoomType;
+}
+export declare const Timeline: TimelineComponent;
+export default Timeline;

package/esm/timeline/Timeline.js

@@ -0,0 +1,134 @@
+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 { endOfDay, isSameDay, startOfDay } from "date-fns";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
+import { AxisLabels } from "./AxisLabels";
+import { RowContext } from "./hooks/useRowContext";
+import { TimelineContext } from "./hooks/useTimelineContext";
+import { useEarliestDate, useLatestDate, useTimelineRows, } from "./hooks/useTimelineRows";
+import Period from "./period";
+import Pin from "./Pin";
+import TimelineRow from "./TimelineRow";
+import { parseRows } from "./utils/timeline";
+import Zoom from "./zoom";
+export const Timeline = forwardRef((_a, ref) => {
+    var { children, startDate, endDate, direction = "left" } = _a, rest = __rest(_a, ["children", "startDate", "endDate", "direction"]);
+    const isMultipleRows = Array.isArray(children);
+    const firstFocusabled = useRef([]);
+    if (!isMultipleRows) {
+        children = [children];
+    }
+    const rowChildren = React.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.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.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 = useMemo(() => {
+        return parseRows(rowChildren);
+    }, [rowChildren]);
+    const rows = rowsRaw.map((r) => {
+        if (r === null || r === void 0 ? void 0 : r.periods) {
+            return r.periods;
+        }
+        return [];
+    });
+    const initialStartDate = startOfDay(useEarliestDate({ startDate, rows }));
+    const [start, setStart] = useState(initialStartDate);
+    const [activeRow, setActiveRow] = useState(null);
+    const [endInclusive, setEndInclusive] = useState(endOfDay(useLatestDate({ endDate, rows })));
+    const initialEndDate = endOfDay(useLatestDate({ endDate, rows }));
+    const processedRows = 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 (isSameDay(zoomStart, start)) {
+                setStart(initialStartDate);
+                return;
+            }
+            setStart(zoomStart);
+        }
+        else {
+            if (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.createElement(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.createElement("div", Object.assign({}, rest, { ref: ref }),
+            React.createElement("div", { className: "navds-timeline" },
+                React.createElement(AxisLabels, null),
+                pins.map((pin) => {
+                    return pin;
+                }),
+                processedRows.map((row, i) => {
+                    return (React.createElement(RowContext.Provider, { key: `row-${row.id}`, value: {
+                            periods: row.periods,
+                            id: row.id,
+                            active: activeRow === i,
+                            index: i,
+                        } },
+                        React.createElement(TimelineRow, 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)));
+});
+Timeline.Row = TimelineRow;
+Timeline.Period = Period;
+Timeline.Pin = Pin;
+Timeline.Zoom = Zoom;
+export default Timeline;
+//# sourceMappingURL=Timeline.js.map

package/esm/timeline/Timeline.js.map

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

package/esm/timeline/TimelineRow.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { TimelineComponentTypes } from "./utils/types.internal";
+export interface TimelineRowProps extends React.HTMLAttributes<HTMLOListElement> {
+    /**
+     * Label for the timeline row
+     */
+    label: string;
+    /**
+     * Heading level for the label e.g h2, h3...
+     * @default "h3"
+     */
+    headingTag?: "h2" | "h3" | "h4" | "h5" | "h6";
+    /**
+     * Icon next to label
+     */
+    icon?: React.ReactNode;
+}
+export interface TimelineRowType extends React.ForwardRefExoticComponent<TimelineRowProps & React.RefAttributes<HTMLOListElement>> {
+    componentType: TimelineComponentTypes;
+}
+export declare const TimelineRow: TimelineRowType;
+export default TimelineRow;

package/esm/timeline/TimelineRow.js

@@ -0,0 +1,58 @@
+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 { BodyShort } from "../typography/BodyShort";
+import { format } from "date-fns";
+import React, { forwardRef } from "react";
+import { PeriodContext } from "./hooks/usePeriodContext";
+import { useRowContext } from "./hooks/useRowContext";
+import { useTimelineContext } from "./hooks/useTimelineContext";
+import Period from "./period";
+import cl from "clsx";
+export const TimelineRow = forwardRef((_a, ref) => {
+    var { label, className, headingTag = "h3", icon } = _a, rest = __rest(_a, ["label", "className", "headingTag", "icon"]);
+    const { periods, id, active } = useRowContext();
+    const { setActiveRow } = 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.createElement(React.Fragment, null,
+        label && (React.createElement(BodyShort, { as: headingTag, id: `timeline-row-${id}`, className: "navds-timeline__row-label", size: "small" },
+            icon,
+            label)),
+        React.createElement("div", { className: cl("navds-timeline__row", {
+                "navds-timeline__row--active": active,
+            }) },
+            React.createElement("ol", Object.assign({}, rest, { ref: ref, "aria-label": periods.length === 0
+                    ? "Ingen perioder"
+                    : `${format(earliest.start, "dd.MM.yyyy")} til ${format(latest.end, "dd.MM.yyyy")}`, className: cl("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.createElement("li", { key: `period-${period.id}` },
+                        React.createElement(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.createElement(Period, { start: period.start, end: period.endInclusive, icon: period.icon, ref: period === null || period === void 0 ? void 0 : period.ref }))));
+                })))));
+});
+TimelineRow.componentType = "row";
+export default TimelineRow;
+//# sourceMappingURL=TimelineRow.js.map

package/esm/timeline/TimelineRow.js.map

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

package/esm/timeline/hooks/usePeriodContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface PeriodContextProps {
+    periodId: String;
+    firstFocus: boolean;
+    restProps?: any;
+}
+export declare const PeriodContext: import("react").Context<PeriodContextProps>;
+export declare const usePeriodContext: () => PeriodContextProps;
+export {};

package/esm/timeline/hooks/usePeriodContext.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+export const PeriodContext = createContext({
+    periodId: "",
+    firstFocus: false,
+});
+export const usePeriodContext = () => {
+    const context = useContext(PeriodContext);
+    if (!context) {
+        console.warn("usePeriodContext must be used with PeriodContext");
+    }
+    return context;
+};
+//# sourceMappingURL=usePeriodContext.js.map

package/esm/timeline/hooks/usePeriodContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePeriodContext.js","sourceRoot":"","sources":["../../../src/timeline/hooks/usePeriodContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAQlD,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAqB;IAC7D,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,KAAK;CAClB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAE1C,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,CAAC,IAAI,CAAC,kDAAkD,CAAC,CAAC;KAClE;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}

package/esm/timeline/hooks/useRowContext.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { PositionedPeriod } from "../utils/types.internal";
+interface RowContextProps {
+    periods: PositionedPeriod[];
+    id: string;
+    active: boolean;
+    index: number;
+}
+export declare const RowContext: import("react").Context<RowContextProps>;
+export declare const useRowContext: () => RowContextProps;
+export {};

package/esm/timeline/hooks/useRowContext.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+export const RowContext = createContext({
+    periods: [],
+    id: "",
+    active: false,
+    index: 0,
+});
+export const useRowContext = () => {
+    const context = useContext(RowContext);
+    if (!context) {
+        console.warn("useRowContext must be used with RowContext");
+    }
+    return context;
+};
+//# sourceMappingURL=useRowContext.js.map

package/esm/timeline/hooks/useRowContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRowContext.js","sourceRoot":"","sources":["../../../src/timeline/hooks/useRowContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAUlD,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAkB;IACvD,OAAO,EAAE,EAAE;IACX,EAAE,EAAE,EAAE;IACN,MAAM,EAAE,KAAK;IACb,KAAK,EAAE,CAAC;CACT,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IAEvC,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,CAAC,IAAI,CAAC,4CAA4C,CAAC,CAAC;KAC5D;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}

package/esm/timeline/hooks/useTimelineContext.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+interface TimelineContextProps {
+    startDate: Date;
+    endDate: Date;
+    direction: "left" | "right";
+    setStart: (d: Date) => void;
+    setEndInclusive: (d: Date) => void;
+    activeRow: number | null;
+    setActiveRow: (i: string) => void;
+    initiate: (i: number) => void;
+    addFocusable: (ref: HTMLButtonElement | null, id: number) => void;
+}
+export declare const TimelineContext: import("react").Context<TimelineContextProps>;
+export declare const useTimelineContext: () => TimelineContextProps;
+export {};

package/esm/timeline/hooks/useTimelineContext.js

@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+export const TimelineContext = createContext({
+    startDate: new Date(),
+    endDate: new Date(),
+    direction: "left",
+    setStart: () => null,
+    setEndInclusive: () => null,
+    activeRow: 0,
+    setActiveRow: () => null,
+    initiate: () => null,
+    addFocusable: () => null,
+});
+export const useTimelineContext = () => {
+    const context = useContext(TimelineContext);
+    if (!context) {
+        console.warn("useTimelineContext must be used with TimelineContext (<Timeline />)");
+    }
+    return context;
+};
+//# sourceMappingURL=useTimelineContext.js.map

package/esm/timeline/hooks/useTimelineContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimelineContext.js","sourceRoot":"","sources":["../../../src/timeline/hooks/useTimelineContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAclD,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAuB;IACjE,SAAS,EAAE,IAAI,IAAI,EAAE;IACrB,OAAO,EAAE,IAAI,IAAI,EAAE;IACnB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;IACpB,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI;IAC3B,SAAS,EAAE,CAAC;IACZ,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI;IACxB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI;IACpB,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI;CACzB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,MAAM,OAAO,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE5C,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,CAAC,IAAI,CACV,qEAAqE,CACtE,CAAC;KACH;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}

package/esm/timeline/hooks/useTimelineRows.d.ts

@@ -0,0 +1,4 @@
+import { InternalSimpleTimeline } from "../utils/types.internal";
+export declare const useTimelineRows: (rows: any, startDate: Date, endDate: Date, direction: "left" | "right") => InternalSimpleTimeline[];
+export declare const useEarliestDate: ({ startDate, rows }: any) => any;
+export declare const useLatestDate: ({ endDate, rows }: any) => any;

package/esm/timeline/hooks/useTimelineRows.js

@@ -0,0 +1,74 @@
+import { useMemo } from "react";
+import { addDays, endOfDay, isAfter, startOfDay, subDays } from "date-fns";
+import { lastPeriod } from "../utils/sort";
+import { horizontalPositionAndWidth } from "../utils/calc";
+import { invisiblePeriods, withinADay } from "../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 && !isAfter(periods[i + 1].start, endInclusive);
+    const { horizontalPosition, width } = horizontalPositionAndWidth(startOfDay(start), endOfDay(rightOverlap ? startOfDay(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 && withinADay(period.start, allPeriods[i - 1].endInclusive);
+    const right = i < allPeriods.length - 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 });
+};
+export const useTimelineRows = (rows, startDate, endDate, direction) => 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(lastPeriod)
+        .map(adjustedEdges)
+        .map(trimmedPeriods)
+        .filter(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]);
+const earliestDate = (earliest, period) => period.start < earliest ? period.start : earliest;
+const earliestFomDate = (rader) => rader.flat().reduce(earliestDate, new Date());
+export const useEarliestDate = ({ startDate, rows }) => useMemo(() => (startDate ? startDate : earliestFomDate(rows)), [startDate, rows]);
+const latestDate = (latest, period) => period.end > latest ? period.end : latest;
+const latestTomDate = (rows) => rows.flat().reduce(latestDate, new Date(0));
+export const useLatestDate = ({ endDate, rows }) => useMemo(() => (endDate ? endDate : addDays(latestTomDate(rows), 1)), [endDate, rows]);
+//# sourceMappingURL=useTimelineRows.js.map

package/esm/timeline/hooks/useTimelineRows.js.map

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

package/esm/timeline/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Timeline } from "./Timeline";
+export type { TimelineProps } from "./Timeline";
+export type { TimelineRowProps } from "./TimelineRow";
+export type { TimelinePinProps } from "./Pin";
+export type { TimelinePeriodProps } from "./period";
+export type { TimelineZoomButtonProps } from "./zoom/ZoomButton";

package/esm/timeline/index.js

@@ -0,0 +1,2 @@
+export { default as Timeline } from "./Timeline";
+//# sourceMappingURL=index.js.map

package/esm/timeline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/timeline/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC"}

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { PeriodProps } from "./index";
+interface TimelineClickablePeriodProps extends PeriodProps {
+    onSelectPeriod?: (e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void;
+    isActive?: boolean;
+    periodRef: React.ForwardedRef<HTMLButtonElement>;
+}
+declare const ClickablePeriod: React.MemoExoticComponent<({ onSelectPeriod, start, end, status, cropped, direction, left, width, icon, children, isActive, statusLabel, restProps, periodRef, }: TimelineClickablePeriodProps) => React.JSX.Element>;
+export default ClickablePeriod;

package/esm/timeline/period/ClickablePeriod.js

@@ -0,0 +1,93 @@
+import { autoUpdate, arrow as flArrow, flip, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
+import { useEventListener, mergeRefs } from "../../util";
+import cl from "clsx";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { usePeriodContext } from "../hooks/usePeriodContext";
+import { useRowContext } from "../hooks/useRowContext";
+import { useTimelineContext } from "../hooks/useTimelineContext";
+import { ariaLabel, getConditionalClasses } from "../utils/period";
+const ClickablePeriod = React.memo(({ onSelectPeriod, start, end, status, cropped, direction, left, width, icon, children, isActive, statusLabel, restProps, periodRef, }) => {
+    const [open, setOpen] = useState(false);
+    const { index } = useRowContext();
+    const { firstFocus } = usePeriodContext();
+    const { initiate, addFocusable } = useTimelineContext();
+    const arrowRef = useRef(null);
+    const { context, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, refs, floatingStyles, } = useFloating({
+        placement: "top",
+        open: open,
+        onOpenChange: setOpen,
+        middleware: [
+            offset(16),
+            shift(),
+            flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+            flArrow({ element: arrowRef, padding: 5 }),
+        ],
+        whileElementsMounted: autoUpdate,
+    });
+    const { getFloatingProps, getReferenceProps } = useInteractions([
+        useHover(context, {
+            handleClose: safePolygon(),
+            restMs: 25,
+            delay: { open: 1000 },
+        }),
+        useFocus(context),
+        useDismiss(context),
+    ]);
+    const mergedRef = useMemo(() => mergeRefs([refs.setReference, periodRef]), [periodRef, refs.setReference]);
+    useEventListener("focusin", 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.createElement(React.Fragment, null,
+        React.createElement("button", Object.assign({}, restProps, { type: "button", ref: (r) => {
+                firstFocus && addFocusable(r, index);
+                mergedRef(r);
+            }, "aria-label": ariaLabel(start, end, status, statusLabel), className: cl("navds-timeline__period--clickable", 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.createElement("span", { className: "navds-timeline__period--inner" }, icon)),
+        children && (React.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.createElement("div", { className: "navds-timeline__popover-content" }, children),
+            React.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" })))));
+});
+export default ClickablePeriod;
+//# sourceMappingURL=ClickablePeriod.js.map

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

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

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { PeriodProps } from "./index";
+interface TimelineNonClickablePeriodProps extends PeriodProps {
+    periodRef?: React.ForwardedRef<HTMLDivElement>;
+}
+declare const NonClickablePeriod: ({ start, end, status, cropped, direction, left, width, icon, statusLabel, restProps, periodRef, }: TimelineNonClickablePeriodProps) => React.JSX.Element;
+export default NonClickablePeriod;