react-timelane 1.2.0 → 1.2.2

package/dist/_virtual/bind-all.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/dist/_virtual/bind.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/dist/_virtual/index.js

@@ -0,0 +1,5 @@
+import { __require as r } from "../node_modules/bind-event-listener/dist/index.js";
+var i = /* @__PURE__ */ r();
+export {
+  i as d
+};

package/dist/_virtual/index2.js

@@ -0,0 +1,4 @@
+var r = {};
+export {
+  r as __exports
+};

package/dist/_virtual/index3.js

@@ -0,0 +1,5 @@
+import { __require as r } from "../node_modules/react-dom/index.js";
+var o = r();
+export {
+  o as r
+};

package/dist/_virtual/index4.js

@@ -0,0 +1,4 @@
+var e = { exports: {} };
+export {
+  e as __module
+};

package/dist/_virtual/react-dom.development.js

@@ -0,0 +1,4 @@
+var e = {};
+export {
+  e as __exports
+};

package/dist/_virtual/react-dom.production.js

@@ -0,0 +1,4 @@
+var o = {};
+export {
+  o as __exports
+};

package/dist/components/Timelane/Timelane.css

@@ -0,0 +1 @@
+*{box-sizing:border-box}.timelane{--timelane-aside-width: 150px;--timelane-border-color-light: #f0f0f0;--timelane-border-color-normal: lightgray;--timelane-border-color-dark: gray;--timelane-highlight-color: #f8f8f8;--timelane-focused-color: rgba(0, 0, 255, .1);--timelane-hover-color: rgba(0, 0, 0, .05);overflow:auto;position:relative;width:100%;height:100%}.timelane .timelane-header{width:fit-content;top:0;z-index:101;background:#fff}.timelane .timelane-header .timelane-header-months{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-months .timelane-header-month-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:1em;height:30px;line-height:30px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-months .timelane-header-month-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-weeks{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-weeks .timelane-header-week-label{border-right:1px solid var(--timelane-border-color-normal);border-bottom:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:1em;height:30px;line-height:30px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-weeks .timelane-header-week-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-days{display:flex;flex-flow:row nowrap}.timelane .timelane-header .timelane-header-days .timelane-header-day-label{border-right:1px solid var(--timelane-border-color-normal);overflow:hidden;font-size:.8em;height:20px;line-height:20px;text-align:center;cursor:pointer}.timelane .timelane-header .timelane-header-days .timelane-header-day-label:hover{background:var(--timelane-hover-color)}.timelane .timelane-header .timelane-header-days .timelane-header-day-label.timelane-header-day-label-focused{background:var(--timelane-focused-color)}.timelane .timelane-header-corner{z-index:102;background:#fff}.timelane .timelane-body{z-index:99;position:relative;width:fit-content}.timelane .timelane-body .timelane-lane{border-color:var(--timelane-border-color-normal)!important;border-top:1px solid gray;margin-top:-1px;overflow:hidden}.timelane .timelane-body .timelane-lane .timelane-drop-target{position:relative;width:100%;height:100%}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item{position:absolute;cursor:pointer;border-radius:3px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item.timelane-item-marked .timelane-allocation{border:2px dashed rgba(0,0,0,.5)}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-drag-handle{height:100%}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle{background:#bed7dc;border-radius:5px;top:4px!important;bottom:4px!important;height:auto!important;width:6px!important;z-index:2;background:transparent!important;transition:.2s}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle:hover{background:#0000001a!important}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle.timelane-item-resize-handle-left{left:0!important;margin-left:1px}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-item-resize-handle.timelane-item-resize-handle-right{right:0!important}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation{background:#92a8d1;border-radius:2px;border:2px solid transparent;height:calc(100% - 1px);overflow:hidden;cursor:pointer;padding:0 4px;margin-left:1px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;container-type:size;container-name:timelane-allocation}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation .timelane-allocation-title{font-weight:700;transform-origin:top left;line-height:30px;white-space:nowrap}@container timelane-allocation (max-height: 30px){.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation .timelane-allocation-title{margin:0}}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item .timelane-allocation.timelane-allocation-selected{border:2px dashed rgba(0,0,0,.5)}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-item.dragging{opacity:0}.timelane .timelane-body .timelane-lane .timelane-drop-target .timelane-drop-preview{background:#00f;position:absolute;border-radius:2px;color:#fff}.timelane .timelane-body .timelane-lane.timelane-row-focused{background:var(--timelane-focused-color)}.timelane .timelane-aside{width:var(--timelane-aside-width);background:#fff}.timelane .timelane-aside .timelane-aside-lane-header{border-top:1px solid var(--timelane-border-color-normal);margin-top:-1px;padding:10px;overflow:hidden;position:relative;cursor:pointer}.timelane .timelane-aside .timelane-aside-lane-header.timelane-aside-lane-header-focused{background:var(--timelane-focused-color)}.timelane .timelane-aside .timelane-aside-lane-header:hover .timelane-aside-resource-menu{opacity:1}.timelane .timelane-aside .timelane-aside-lane-header .timelane-aside-resource-menu{position:absolute;top:5px;right:5px;opacity:0;transition:.15s}.timelane .timelane-aside .timelane-aside-lane-header .timelane-aside-resource-menu.timelane-aside-resource-menu-open{opacity:1}.timelane .timelane-background{position:relative;width:100%;height:100%}.timelane .timelane-background .timelane-background-inner{display:flex;flex-flow:row nowrap;height:100%}.timelane .timelane-background .timelane-background-inner .timelane-background-day-label{border-right:1px solid var(--timelane-border-color-light);overflow:hidden;font-size:.8em;height:100%;z-index:-100}.timelane .timelane-background .timelane-background-inner .timelane-background-day-label.timelane-background-day-label-sunday{border-right:1px solid var(--timelane-border-color-normal)}.timelane .timelane-background .timelane-background-inner .timelane-background-day-label.timelane-background-day-label-focused{background:var(--timelane-focused-color)}.timelane .timelane-background .timelane-background-inner .timelane-background-focused-day-position{position:absolute;height:100%;background:var(--timelane-focused-color);z-index:-101}.timelane-header-tooltip,.timelane-header-day-tooltip{font-size:2em}

package/dist/components/Timelane/Timelane.js

@@ -0,0 +1,53 @@
+import { jsx as o } from "react/jsx-runtime";
+import { TimelaneLane as T } from "../TimelaneLane/TimelaneLane.js";
+import { TimelaneBody as c } from "../TimelaneBody/TimelaneBody.js";
+import { TimelaneLayout as l } from "../TimelaneLayout/TimelaneLayout.js";
+import { TimelaneHeader as u } from "../TimelaneHeader/TimelaneHeader.js";
+import { TimelaneBackground as x } from "../TimelaneBackground/TimelaneBackground.js";
+import { TimelaneAside as y } from "../TimelaneAside/TimelaneAside.js";
+import { TimelaneSettingsProvider as h } from "../TimelaneSettingsProvider/TimelaneSettingsProvider.js";
+import { useTimelaneContext as L } from "../../hooks/useTimelaneContext.js";
+import './Timelane.css';/* empty css              */
+function i({
+  start: d,
+  end: p,
+  pixelsPerDay: f,
+  pixelsPerLane: g,
+  showMonths: r,
+  showWeeks: n,
+  showDays: a,
+  allowOverlaps: m,
+  enableItemResizing: t,
+  enableItemDragging: s,
+  children: v
+}) {
+  const { settings: e } = L();
+  return /* @__PURE__ */ o(
+    h,
+    {
+      settings: {
+        ...e,
+        start: d || e.start,
+        end: p || e.end,
+        pixelsPerDay: f || e.pixelsPerDay,
+        pixelsPerLane: g || e.pixelsPerLane,
+        showMonths: r !== void 0 ? r : e.showMonths,
+        showWeeks: n !== void 0 ? n : e.showWeeks,
+        showDays: a !== void 0 ? a : e.showDays,
+        allowOverlaps: m !== void 0 ? m : e.allowOverlaps,
+        enableItemDragging: s !== void 0 ? s : e.enableItemDragging,
+        enableItemResizing: t !== void 0 ? t : e.enableItemResizing
+      },
+      children: /* @__PURE__ */ o("div", { className: "timelane", children: /* @__PURE__ */ o(l, { children: v }) })
+    }
+  );
+}
+i.Header = u;
+i.Body = c;
+i.Background = x;
+i.Aside = y;
+i.Lane = T;
+i.Layout = l;
+export {
+  i as Timelane
+};

package/dist/components/TimelaneAllocation/TimelaneAllocation.js

@@ -0,0 +1,49 @@
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { useRef as d } from "react";
+const i = 30;
+function h({
+  name: o,
+  description: a = "",
+  isSelected: s = !1,
+  onClick: c = () => {
+  },
+  onContextMenu: r = () => {
+  }
+}) {
+  const t = d(null);
+  let l = 1;
+  if (t.current) {
+    const e = t.current.getBoundingClientRect().height;
+    e > 0 && e < i && (l = e / i);
+  }
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: `timelane-allocation ${s ? "timelane-allocation-selected" : ""}`,
+      onClick: c,
+      onContextMenu: (e) => {
+        e.preventDefault(), e.stopPropagation(), r(e);
+      },
+      ref: t,
+      style: {
+        background: "lightblue"
+      },
+      children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: "timelane-allocation-title",
+            style: {
+              transform: `scale(${l})`
+            },
+            children: o
+          }
+        ),
+        /* @__PURE__ */ n("div", { style: { fontSize: "small" }, children: a })
+      ]
+    }
+  );
+}
+export {
+  h as TimelaneAllocation
+};

package/dist/components/TimelaneAside/TimelaneAside.d.ts

@@ -2,6 +2,11 @@ import { MouseEvent, ReactElement } from 'react';
 import { Lane } from '../../types';
 export interface TimelaneAsideProps {
     lanes: Lane[];
+    /**
+     * the width in px
+     */
+    width?: number;
+    side?: "left" | "right";
     /**
      * deprecated
      */
@@ -22,4 +27,4 @@ export interface TimelaneAsideProps {
  *
  * It must be a child component of `<Timelane>`.
  */
-export declare function TimelaneAside({ lanes, focusedLane, setFocusedLane, onLaneHeaderClick, onLaneHeaderDoubleClick, onLaneHeaderContextMenu, renderLaneHeader, }: TimelaneAsideProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimelaneAside({ lanes, width, side, focusedLane, setFocusedLane, onLaneHeaderClick, onLaneHeaderDoubleClick, onLaneHeaderContextMenu, renderLaneHeader, }: TimelaneAsideProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/TimelaneAside/TimelaneAside.js

@@ -0,0 +1,60 @@
+import { jsx as t } from "react/jsx-runtime";
+import { TimelaneLayout as h } from "../TimelaneLayout/TimelaneLayout.js";
+import { useTimelaneContext as f } from "../../hooks/useTimelaneContext.js";
+function y({
+  lanes: i,
+  width: o = 100,
+  side: r = "left",
+  focusedLane: n,
+  setFocusedLane: s = () => {
+  },
+  onLaneHeaderClick: a = () => {
+  },
+  onLaneHeaderDoubleClick: l = () => {
+  },
+  onLaneHeaderContextMenu: m = () => {
+  },
+  renderLaneHeader: c = v
+}) {
+  const { settings: u } = f();
+  return /* @__PURE__ */ t(h.Aside, { side: r, children: /* @__PURE__ */ t("div", { className: "timelane-aside", style: { width: `${o}px` }, children: i && i.map((e) => /* @__PURE__ */ t(
+    p,
+    {
+      height: u.pixelsPerLane,
+      isFocused: n ? n.id === e.id : !1,
+      onClick: (d) => {
+        s(e), a(e, d);
+      },
+      onDoubleClick: (d) => l(e, d),
+      onContextMenu: (d) => m(e, d),
+      children: c(e)
+    },
+    e.id
+  )) }) });
+}
+function p({
+  height: i,
+  isFocused: o,
+  onClick: r,
+  onDoubleClick: n,
+  onContextMenu: s,
+  children: a
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: `timelane-aside-lane-header ${o ? "timelane-aside-lane-header-focused" : ""}`,
+      style: { height: `${i}px` },
+      onClick: r,
+      onDoubleClick: n,
+      onContextMenu: s,
+      children: a
+    }
+  );
+}
+function v(i) {
+  return /* @__PURE__ */ t("div", { children: i.id });
+}
+export {
+  y as TimelaneAside
+};

package/dist/components/TimelaneBackground/TimelaneBackground.js

@@ -0,0 +1,46 @@
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { dateToPixel as n } from "../utils.js";
+import { useTimelaneContext as m } from "../../hooks/useTimelaneContext.js";
+import { TimelaneLayout as d } from "../TimelaneLayout/TimelaneLayout.js";
+import { eachDayOfInterval as l } from "../../node_modules/date-fns/eachDayOfInterval.js";
+import { formatDate as s } from "../../node_modules/date-fns/format.js";
+import { isSunday as c } from "../../node_modules/date-fns/isSunday.js";
+function b({ focusedDay: t }) {
+  const { settings: a } = m();
+  return /* @__PURE__ */ e(d.Background, { children: /* @__PURE__ */ e("div", { className: "timelane-background", children: /* @__PURE__ */ o("div", { className: "timelane-background-inner", children: [
+    t && /* @__PURE__ */ e(
+      "div",
+      {
+        className: "timelane-background-focused-day-position",
+        style: {
+          width: `${a.pixelsPerDay}px`,
+          marginLeft: `${n(t, a.start, a) - a.pixelsPerDay / 2}px`
+        }
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        id: "timelane-background-date-anchor",
+        style: {
+          position: "absolute",
+          top: 0,
+          width: "1px",
+          height: "100%"
+        }
+      }
+    ),
+    l(a).map((i, r) => /* @__PURE__ */ e(
+      "div",
+      {
+        className: `timelane-background-day-label ${c(i) ? "timelane-background-day-label-sunday" : ""} `,
+        style: { width: `${a.pixelsPerDay}px` },
+        "data-day": s(i, "yyyy-MM-dd")
+      },
+      r
+    ))
+  ] }) }) });
+}
+export {
+  b as TimelaneBackground
+};

package/dist/components/TimelaneBody/TimelaneBody.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+import { TimelaneLayout as r } from "../TimelaneLayout/TimelaneLayout.js";
+import { TimelaneSelectionLayer as m } from "./TimelaneSelectionLayer.js";
+function l({
+  onSelect: o = () => {
+  },
+  children: i
+}) {
+  return /* @__PURE__ */ e(r.Body, { children: /* @__PURE__ */ e(m, { onSelect: o, children: /* @__PURE__ */ e("div", { className: "timelane-body", children: i }) }) });
+}
+export {
+  l as TimelaneBody
+};

package/dist/components/TimelaneBody/TimelaneSelectionLayer.js

@@ -0,0 +1,96 @@
+import { jsxs as R, jsx as M } from "react/jsx-runtime";
+import { useState as m, useRef as S, useEffect as y } from "react";
+import { doOverlap as a } from "../utils.js";
+import { monitorForElements as b } from "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.js";
+function q({
+  children: o,
+  onSelect: d
+}) {
+  const [f, c] = m([]), r = S(null), [n, h] = m(null), [s, p] = m(null);
+  y(() => b({
+    onDragStart: (e) => {
+      c([e.source.data.id]);
+    }
+  }), []), y(() => {
+    d(f);
+  }, [d, f]);
+  function x(e) {
+    !e.shiftKey && !e.ctrlKey && c([]), h({ x: e.clientX, y: e.clientY });
+  }
+  function w(e) {
+    if (n) {
+      const i = {
+        x: Math.min(e.clientX, n.x),
+        y: Math.min(e.clientY, n.y),
+        width: Math.abs(e.clientX - n.x),
+        height: Math.abs(e.clientY - n.y)
+      }, l = e.currentTarget.getBoundingClientRect();
+      p({
+        ...i,
+        x: i.x - l.left,
+        y: i.y - l.top
+      }), document.querySelectorAll(".timelane-drop-target").forEach((t) => {
+        a(t.getBoundingClientRect(), i) && t.querySelectorAll(".timelane-item").forEach((u) => {
+          a(u.getBoundingClientRect(), i) ? u.classList.add("timelane-item-marked") : u.classList.remove("timelane-item-marked");
+        });
+      }), (i.width > 5 || i.height > 5) && !r.current && (r.current = g, window.addEventListener("click", g, !0));
+    }
+  }
+  function v(e) {
+    if (n && s) {
+      e.stopPropagation();
+      const i = {
+        x: Math.min(e.clientX, n.x),
+        y: Math.min(e.clientY, n.y),
+        width: Math.abs(e.clientX - n.x),
+        height: Math.abs(e.clientY - n.y)
+      }, l = Array.from(
+        document.querySelectorAll(".timelane-drop-target")
+      ).filter((t) => a(t.getBoundingClientRect(), i)).map((t) => Array.from(t.querySelectorAll(".timelane-item"))).flatMap((t) => t).filter((t) => a(t.getBoundingClientRect(), i)).map((t) => t instanceof HTMLElement ? Number.parseInt(t.dataset.timelaneItemId || "-1") : -1).filter((t) => t > 0);
+      l.length > 0 && (e.shiftKey || e.ctrlKey ? c((t) => Array.from(/* @__PURE__ */ new Set([...t, ...l]))) : c(l)), document.querySelectorAll(".timelane-item-marked").forEach((t) => {
+        t.classList.remove("timelane-item-marked");
+      });
+    }
+    h(null), p(null), requestAnimationFrame(() => {
+      r.current && r.current !== null && (window.removeEventListener("click", r.current, !0), r.current = null);
+    });
+  }
+  return /* @__PURE__ */ R(
+    "div",
+    {
+      onMouseDown: x,
+      onMouseMove: w,
+      onMouseUp: v,
+      style: {
+        position: "relative"
+      },
+      children: [
+        s && /* @__PURE__ */ M(A, { rect: s }),
+        o
+      ]
+    }
+  );
+}
+const g = (o) => {
+  o.preventDefault(), o.stopPropagation();
+};
+function A({ rect: o }) {
+  return /* @__PURE__ */ M(
+    "div",
+    {
+      id: "mouse-selection-indicator",
+      style: {
+        border: "1px dashed blue",
+        position: "absolute",
+        top: `${o.y}px`,
+        left: `${o.x}px`,
+        width: `${o.width}px`,
+        height: `${o.height}px`,
+        zIndex: 1e6
+      }
+    }
+  );
+}
+export {
+  q as TimelaneSelectionLayer
+};

package/dist/components/TimelaneHeader/DaysHeader.js

@@ -0,0 +1,30 @@
+import { jsx as r } from "react/jsx-runtime";
+import { renderDayHeader as s } from "./renderingUtils.js";
+import { eachDayOfInterval as p } from "../../node_modules/date-fns/eachDayOfInterval.js";
+import { isSameDay as c } from "../../node_modules/date-fns/isSameDay.js";
+function x({
+  range: i,
+  pixels: l,
+  focusedDay: a,
+  setFocusedDay: m = () => {
+  },
+  render: t = s,
+  onDayClick: d = () => {
+  }
+}) {
+  return /* @__PURE__ */ r("div", { className: "timelane-header-days", children: p(i).map((e, o) => /* @__PURE__ */ r(
+    "div",
+    {
+      className: `timelane-header-day-label ${a && c(a, e) ? "timelane-header-day-label-focused" : ""}`,
+      style: { width: `${l.pixelsPerDay}px` },
+      onClick: (n) => {
+        d({ day: e, e: n }), m(e);
+      },
+      children: t(e)
+    },
+    o
+  )) });
+}
+export {
+  x as DaysHeader
+};

package/dist/components/TimelaneHeader/MonthsHeader.js

@@ -0,0 +1,38 @@
+import { jsx as n } from "react/jsx-runtime";
+import { renderMonthHeader as s } from "./renderingUtils.js";
+import { eachMonthOfInterval as c } from "../../node_modules/date-fns/eachMonthOfInterval.js";
+import { lastDayOfMonth as p } from "../../node_modules/date-fns/lastDayOfMonth.js";
+import { differenceInCalendarDays as f } from "../../node_modules/date-fns/differenceInCalendarDays.js";
+function b({
+  range: t,
+  pixels: r,
+  setFocusedDay: m = () => {
+  },
+  render: l = s,
+  onMonthClick: a = () => {
+  }
+}) {
+  return /* @__PURE__ */ n("div", { className: "timelane-header-months", children: c(t).map((e, d) => {
+    e < t.start && (e = t.start);
+    let o = p(e);
+    o > t.end && (o = t.end);
+    const i = f(o, e) + 1;
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        className: "timelane-header-month-label",
+        style: {
+          width: `${r.pixelsPerDay * i}px`
+        },
+        onClick: (h) => {
+          a({ firstDay: e, lastDay: o, e: h }), m(e);
+        },
+        children: l(e, o)
+      },
+      d
+    );
+  }) });
+}
+export {
+  b as MonthsHeader
+};

package/dist/components/TimelaneHeader/TimelaneHeader.js

@@ -0,0 +1,55 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { MonthsHeader as p } from "./MonthsHeader.js";
+import { WeeksHeader as h } from "./WeeksHeader.js";
+import { DaysHeader as f } from "./DaysHeader.js";
+import { useTimelaneContext as x } from "../../hooks/useTimelaneContext.js";
+import { TimelaneLayout as H } from "../TimelaneLayout/TimelaneLayout.js";
+function u({
+  focusedDay: o,
+  setFocusedDay: n = () => {
+  },
+  renderMonthHeader: i,
+  renderWeekHeader: m,
+  renderDayHeader: s,
+  onMonthClick: a,
+  onDayClick: t,
+  onWeekClick: d
+}) {
+  const { settings: e } = x();
+  return /* @__PURE__ */ r(H.Header, { children: /* @__PURE__ */ l("div", { className: "timelane-header", children: [
+    e.showMonths && /* @__PURE__ */ r(
+      p,
+      {
+        range: e,
+        pixels: e,
+        setFocusedDay: n,
+        render: i,
+        onMonthClick: a
+      }
+    ),
+    e.showWeeks && /* @__PURE__ */ r(
+      h,
+      {
+        range: e,
+        pixels: e,
+        setFocusedDay: n,
+        render: m,
+        onWeekClick: d
+      }
+    ),
+    e.showDays && /* @__PURE__ */ r(
+      f,
+      {
+        range: e,
+        pixels: e,
+        focusedDay: o,
+        setFocusedDay: n,
+        render: s,
+        onDayClick: t
+      }
+    )
+  ] }) });
+}
+export {
+  u as TimelaneHeader
+};

package/dist/components/TimelaneHeader/WeeksHeader.js

@@ -0,0 +1,39 @@
+import { jsx as n } from "react/jsx-runtime";
+import { renderWeekHeader as c } from "./renderingUtils.js";
+import { eachWeekOfInterval as s } from "../../node_modules/date-fns/eachWeekOfInterval.js";
+import { isSunday as k } from "../../node_modules/date-fns/isSunday.js";
+import { nextSunday as h } from "../../node_modules/date-fns/nextSunday.js";
+import { differenceInCalendarDays as u } from "../../node_modules/date-fns/differenceInCalendarDays.js";
+function W({
+  range: r,
+  pixels: d,
+  setFocusedDay: o = () => {
+  },
+  render: t = c,
+  onWeekClick: l = () => {
+  }
+}) {
+  return /* @__PURE__ */ n("div", { className: "timelane-header-weeks", children: s(r, { weekStartsOn: 1 }).map((e, a) => {
+    e < r.start && (e = r.start);
+    let m = k(e) ? e : h(e);
+    m > r.end && (m = r.end);
+    const i = u(m, e) + 1;
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        className: "timelane-header-week-label",
+        style: {
+          width: `${d.pixelsPerDay * i}px`
+        },
+        onClick: (p) => {
+          l({ firstDay: e, lastDay: m, e: p }), o(e);
+        },
+        children: t(e, m)
+      },
+      a
+    );
+  }) });
+}
+export {
+  W as WeeksHeader
+};

package/dist/components/TimelaneHeader/renderingUtils.js

@@ -0,0 +1,26 @@
+import { jsx as d, Fragment as t, jsxs as m } from "react/jsx-runtime";
+import { formatDate as r } from "../../node_modules/date-fns/format.js";
+import { differenceInCalendarDays as c } from "../../node_modules/date-fns/differenceInCalendarDays.js";
+function M(e, n) {
+  const o = c(n, e) + 1;
+  return /* @__PURE__ */ d(t, { children: o > 4 ? r(e, "LLLL yyyy") : /* @__PURE__ */ d(t, {}) });
+}
+function l(e, n) {
+  const o = c(n, e) + 1, i = `KW ${r(e, "w")} (${r(
+    e,
+    "MM-dd"
+  )} - ${r(n, "MM-dd")}`;
+  return /* @__PURE__ */ d("div", { title: i, children: o > 2 ? /* @__PURE__ */ m(t, { children: [
+    "KW ",
+    r(e, "w")
+  ] }) : /* @__PURE__ */ d(t, {}) });
+}
+function s(e) {
+  const n = `${r(e, "yyyy-MM-dd")}`;
+  return /* @__PURE__ */ d("div", { title: n, children: r(e, "d") });
+}
+export {
+  s as renderDayHeader,
+  M as renderMonthHeader,
+  l as renderWeekHeader
+};