@savvycal/calendar 0.2.0 → 0.3.0

package/dist/components/resource-grid-view/ResourceGridView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceGridView.d.ts","sourceRoot":"","sources":["../../../src/components/resource-grid-view/ResourceGridView.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAIV,qBAAqB,EAGtB,MAAM,kBAAkB,CAAC;AAa1B,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,MAAM,EACN,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,aAAa,EACb,QAAQ,EACR,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAe,EACf,cAAoB,EACpB,YAAY,EACZ,WAAW,EACX,mBAAmB,EACnB,qBAAqB,EACrB,YAAY,EACZ,iBAAqB,EACrB,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,WAAuB,EACvB,WAAe,GAChB,EAAE,qBAAqB,2CA0XvB"}
+{"version":3,"file":"ResourceGridView.d.ts","sourceRoot":"","sources":["../../../src/components/resource-grid-view/ResourceGridView.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAIV,qBAAqB,EAGtB,MAAM,kBAAkB,CAAC;AAa1B,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,MAAM,EACN,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,aAAa,EACb,QAAQ,EACR,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAe,EACf,cAAoB,EACpB,YAAY,EACZ,WAAW,EACX,mBAAmB,EACnB,qBAAqB,EACrB,YAAY,EACZ,iBAAqB,EACrB,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,WAAuB,EACvB,WAAe,GAChB,EAAE,qBAAqB,2CA+XvB"}

package/dist/components/resource-grid-view/ResourceGridView.js

@@ -1,226 +1,223 @@
-import { jsxs as W, jsx as n } from "react/jsx-runtime";
-import { useCallback as v, useRef as mt, useState as ut, useEffect as L, useMemo as f } from "react";
-import { cn as T } from "../../lib/utils.js";
-import { generateTimeSlots as pt, formatDateLabel as ft, formatTimeRange as U } from "../../lib/time.js";
-import { groupByResource as ht, computePositionedEvents as gt } from "../../lib/overlap.js";
-import { computeUnavailableBlocks as yt } from "../../lib/availability.js";
-import { resourceGridViewDefaults as wt } from "./defaults.js";
-import { GridHeader as Ht } from "./GridHeader.js";
+import { jsxs as L, jsx as n } from "react/jsx-runtime";
+import { useCallback as v, useRef as U, useState as ft, useEffect as V, useMemo as p } from "react";
+import { cn as $ } from "../../lib/utils.js";
+import { generateTimeSlots as pt, formatDateLabel as ht, formatTimeRange as z } from "../../lib/time.js";
+import { groupByResource as gt, computePositionedEvents as yt } from "../../lib/overlap.js";
+import { computeUnavailableBlocks as wt } from "../../lib/availability.js";
+import { resourceGridViewDefaults as Ht } from "./defaults.js";
+import { GridHeader as Rt } from "./GridHeader.js";
 import { TimeGutter as St } from "./TimeGutter.js";
-import { ResourceColumn as Rt } from "./ResourceColumn.js";
-import { SlotInteractionLayer as bt } from "./SlotInteractionLayer.js";
-import { SelectionOverlay as Ct } from "./SelectionOverlay.js";
-import { UnavailabilityOverlay as Dt } from "./UnavailabilityOverlay.js";
+import { ResourceColumn as bt } from "./ResourceColumn.js";
+import { SlotInteractionLayer as Ct } from "./SlotInteractionLayer.js";
+import { SelectionOverlay as Dt } from "./SelectionOverlay.js";
+import { UnavailabilityOverlay as Tt } from "./UnavailabilityOverlay.js";
 import { NowIndicator as vt } from "./NowIndicator.js";
-import { AllDayRow as Tt } from "./AllDayRow.js";
-import { useEffectiveHourHeight as $t } from "./useEffectiveHourHeight.js";
-import { useAnnouncer as xt } from "./useAnnouncer.js";
-function Pt({
+import { AllDayRow as $t } from "./AllDayRow.js";
+import { useEffectiveHourHeight as xt } from "./useEffectiveHourHeight.js";
+import { useAnnouncer as kt } from "./useAnnouncer.js";
+function qt({
   date: a,
   timeZone: l,
-  resources: r,
-  events: $,
-  availability: g,
-  unavailability: y,
-  timeAxis: H,
-  onEventClick: x,
-  snapDuration: k,
-  placeholderDuration: V,
-  selectedRange: u,
-  onSelect: m,
-  onSlotClick: z,
-  className: A,
-  classNames: N,
-  hourHeight: F = 60,
-  columnMinWidth: K = 120,
-  renderHeader: P,
+  resources: o,
+  events: x,
+  availability: y,
+  unavailability: w,
+  timeAxis: R,
+  onEventClick: k,
+  snapDuration: N,
+  placeholderDuration: A,
+  selectedRange: m,
+  onSelect: u,
+  onSlotClick: F,
+  className: K,
+  classNames: E,
+  hourHeight: P = 60,
+  columnMinWidth: q = 120,
+  renderHeader: J,
   renderEvent: S,
-  selectionAppearance: q,
-  dragPreviewAppearance: J,
-  selectionRef: Q,
-  selectionLingerMs: R = 0,
-  selectedEventId: E,
-  selectedEventRef: j,
-  renderCorner: X,
-  eventGap: Y,
-  eventLayout: _ = "columns",
-  stackOffset: Z = 8
+  selectionAppearance: Q,
+  dragPreviewAppearance: X,
+  selectionRef: Y,
+  selectionLingerMs: b = 0,
+  selectedEventId: j,
+  selectedEventRef: I,
+  renderCorner: _,
+  eventGap: Z,
+  eventLayout: tt = "columns",
+  stackOffset: et = 8
 }) {
-  const d = H?.startHour ?? 0, c = H?.endHour ?? 24, b = H?.intervalMinutes ?? 60, { effectiveHourHeight: s, rootRef: tt, headerRef: et, allDayRef: ot, headerHeight: I } = $t(F, c - d), i = v(
-    (t) => T(wt[t], N?.[t]),
-    [N]
-  ), w = mt(null), [rt, B] = ut(
+  const c = R?.startHour ?? 0, d = R?.endHour ?? 24, C = R?.intervalMinutes ?? 60, { effectiveHourHeight: s, rootRef: rt, headerRef: ot, allDayRef: it, headerHeight: B } = xt(P, d - c), i = v(
+    (t) => $(Ht[t], E?.[t]),
+    [E]
+  ), H = U(null), h = U(null), [lt, M] = ft(
     null
   );
-  L(() => {
-    if (u)
-      w.current = u;
-    else if (w.current && R > 0) {
-      const t = w.current;
-      w.current = null, B(t);
-      const e = setTimeout(
-        () => B(null),
-        R
-      );
-      return () => clearTimeout(e);
+  V(() => {
+    if (m)
+      h.current !== null && (clearTimeout(h.current), h.current = null), H.current = m;
+    else if (H.current && b > 0) {
+      const t = H.current;
+      H.current = null, M(t), h.current = setTimeout(() => {
+        h.current = null, M(null);
+      }, b);
     }
-  }, [u, R]);
-  const C = u ?? rt, D = f(
-    () => pt({ startHour: d, endHour: c, intervalMinutes: b }),
-    [d, c, b]
-  ), { allDayEvents: M, timedEvents: G } = f(() => {
+  }, [m, b]);
+  const D = m ?? lt, T = p(
+    () => pt({ startHour: c, endHour: d, intervalMinutes: C }),
+    [c, d, C]
+  ), { allDayEvents: G, timedEvents: O } = p(() => {
     const t = [], e = [];
-    for (const o of $)
-      o.allDay ? t.push(o) : e.push(o);
+    for (const r of x)
+      r.allDay ? t.push(r) : e.push(r);
     return { allDayEvents: t, timedEvents: e };
-  }, [$]), it = f(
-    () => ht(M),
-    [M]
-  ), lt = f(
-    () => gt(
-      G,
+  }, [x]), nt = p(
+    () => gt(G),
+    [G]
+  ), at = p(
+    () => yt(
+      O,
       l,
       a,
-      d,
       c,
+      d,
       s
     ),
-    [G, l, a, d, c, s]
-  ), nt = f(() => {
-    if (!g && !y)
+    [O, l, a, c, d, s]
+  ), ct = p(() => {
+    if (!y && !w)
       return /* @__PURE__ */ new Map();
     const t = /* @__PURE__ */ new Set([
-      ...Object.keys(g ?? {}),
-      ...Object.keys(y ?? {})
+      ...Object.keys(y ?? {}),
+      ...Object.keys(w ?? {})
     ]), e = /* @__PURE__ */ new Map();
-    for (const o of t) {
-      const p = yt(
-        g?.[o],
-        y?.[o],
+    for (const r of t) {
+      const f = wt(
+        y?.[r],
+        w?.[r],
         l,
         a,
-        d,
         c,
+        d,
         s
       );
-      p.length > 0 && e.set(o, p);
+      f.length > 0 && e.set(r, f);
     }
     return e;
   }, [
-    g,
     y,
+    w,
     l,
     a,
-    d,
     c,
+    d,
     s
-  ]), { message: at, announce: h } = xt(), dt = f(
-    () => `Schedule for ${ft(a)}`,
+  ]), { message: dt, announce: g } = kt(), st = p(
+    () => `Schedule for ${ht(a)}`,
     [a]
-  ), O = v(
+  ), W = v(
     (t) => {
-      if (m?.(null), x?.(t), t.allDay) {
+      if (u?.(null), k?.(t), t.allDay) {
         const e = [t.title, "all day"];
-        t.clientName && e.push(t.clientName), h(`Selected: ${e.join(", ")}`);
+        t.clientName && e.push(t.clientName), g(`Selected: ${e.join(", ")}`);
       } else {
         const e = [
           t.title,
-          U(t.startTime, t.endTime, l)
+          z(t.startTime, t.endTime, l)
         ];
         t.clientName && e.push(t.clientName);
-        const o = r.find((p) => p.id === t.resourceId);
-        o && e.push(o.name), h(`Selected: ${e.join(", ")}`);
+        const r = o.find((f) => f.id === t.resourceId);
+        r && e.push(r.name), g(`Selected: ${e.join(", ")}`);
       }
     },
-    [m, x, l, r, h]
-  ), ct = v(
+    [u, k, l, o, g]
+  ), ut = v(
     (t) => {
-      if (m?.(t), t) {
+      if (u?.(t), t) {
         const e = [
-          U(t.startTime, t.endTime, l)
-        ], o = r.find((p) => p.id === t.resourceId);
-        o && e.push(o.name), h(`Selected time: ${e.join(", ")}`);
+          z(t.startTime, t.endTime, l)
+        ], r = o.find((f) => f.id === t.resourceId);
+        r && e.push(r.name), g(`Selected time: ${e.join(", ")}`);
       }
     },
-    [m, l, r, h]
+    [u, l, o, g]
   );
-  L(() => {
-    if (!u || !m) return;
+  V(() => {
+    if (!m || !u) return;
     const t = (e) => {
-      e.key === "Escape" && m(null);
+      e.key === "Escape" && u(null);
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-  }, [u, m]);
-  const st = s * b / 60;
-  return /* @__PURE__ */ W("div", { ref: tt, className: T(i("root"), A), children: [
-    /* @__PURE__ */ W(
+  }, [m, u]);
+  const mt = s * C / 60;
+  return /* @__PURE__ */ L("div", { ref: rt, className: $(i("root"), K), children: [
+    /* @__PURE__ */ L(
       "div",
       {
         className: i("grid"),
         role: "region",
         "aria-roledescription": "calendar",
-        "aria-label": dt,
+        "aria-label": st,
         style: {
           display: "grid",
-          gridTemplateColumns: `max-content repeat(${r.length}, minmax(${K}px, 1fr))`,
-          gridTemplateRows: `auto auto repeat(${D.length}, ${st}px)`
+          gridTemplateColumns: `max-content repeat(${o.length}, minmax(${q}px, 1fr))`,
+          gridTemplateRows: `auto auto repeat(${T.length}, ${mt}px)`
         },
         children: [
           /* @__PURE__ */ n(
             "div",
             {
-              ref: et,
+              ref: ot,
               className: i("cornerCell"),
               style: { gridRow: 1, gridColumn: 1 },
-              children: X?.({ timeZone: l, date: a })
+              children: _?.({ timeZone: l, date: a })
             }
           ),
-          r.map((t, e) => /* @__PURE__ */ n(
-            Ht,
+          o.map((t, e) => /* @__PURE__ */ n(
+            Rt,
             {
               resource: t,
               column: e + 2,
               cls: i,
-              renderHeader: P
+              renderHeader: J
             },
             t.id
           )),
           /* @__PURE__ */ n(
             "div",
             {
-              ref: ot,
-              className: T(i("allDayCell"), "left-0 z-30"),
+              ref: it,
+              className: $(i("allDayCell"), "left-0 z-30"),
               style: {
                 gridRow: 2,
                 gridColumn: 1,
-                top: I
+                top: B
               }
             }
           ),
-          r.map((t, e) => /* @__PURE__ */ n(
+          o.map((t, e) => /* @__PURE__ */ n(
             "div",
             {
               className: i("allDayCell"),
               style: {
                 gridRow: 2,
                 gridColumn: e + 2,
-                top: I,
-                ...e === r.length - 1 ? { borderRightWidth: 0 } : {}
+                top: B,
+                ...e === o.length - 1 ? { borderRightWidth: 0 } : {}
               },
               children: /* @__PURE__ */ n(
-                Tt,
+                $t,
                 {
-                  events: it.get(t.id) ?? [],
+                  events: nt.get(t.id) ?? [],
                   cls: i,
-                  onEventClick: O,
-                  selectedEventId: E,
-                  selectedEventRef: j
+                  onEventClick: W,
+                  selectedEventId: j,
+                  selectedEventRef: I
                 }
               )
             },
             `allday-${t.id}`
           )),
-          D.map((t) => /* @__PURE__ */ n(
+          T.map((t) => /* @__PURE__ */ n(
             St,
             {
               label: t.label,
@@ -231,89 +228,89 @@ function Pt({
             },
             t.index
           )),
-          D.map(
-            (t) => r.map((e, o) => /* @__PURE__ */ n(
+          T.map(
+            (t) => o.map((e, r) => /* @__PURE__ */ n(
               "div",
               {
                 className: i(t.isHourStart ? "bodyCell" : "bodyCellMinor"),
                 style: {
                   gridRow: t.index + 3,
-                  gridColumn: o + 2,
+                  gridColumn: r + 2,
                   ...t.isHourStart ? {} : { borderTopStyle: "dotted" },
                   ...t.index === 0 ? { borderTopWidth: 0 } : {},
-                  ...o === r.length - 1 ? { borderRightWidth: 0 } : {}
+                  ...r === o.length - 1 ? { borderRightWidth: 0 } : {}
                 }
               },
               `${t.index}-${e.id}`
             ))
           ),
-          r.map((t, e) => {
-            const o = nt.get(t.id);
-            return o ? /* @__PURE__ */ n(
-              Dt,
+          o.map((t, e) => {
+            const r = ct.get(t.id);
+            return r ? /* @__PURE__ */ n(
+              Tt,
               {
-                blocks: o,
+                blocks: r,
                 column: e + 2,
                 cls: i
               },
               `unavail-${t.id}`
             ) : null;
           }),
-          k != null && r.map((t, e) => /* @__PURE__ */ n(
-            bt,
+          N != null && o.map((t, e) => /* @__PURE__ */ n(
+            Ct,
             {
               resource: t,
               column: e + 2,
               date: a,
               timeZone: l,
-              startHour: d,
-              endHour: c,
+              startHour: c,
+              endHour: d,
               hourHeight: s,
-              snapDuration: k,
-              placeholderDuration: V ?? 15,
+              snapDuration: N,
+              placeholderDuration: A ?? 15,
               cls: i,
-              onSlotClick: z,
-              onSelect: ct,
-              dragPreviewAppearance: J,
+              onSlotClick: F,
+              onSelect: ut,
+              dragPreviewAppearance: X,
               renderEvent: S
             },
             `slot-${t.id}`
           )),
-          r.map((t, e) => /* @__PURE__ */ n(
-            Rt,
+          o.map((t, e) => /* @__PURE__ */ n(
+            bt,
             {
               resource: t,
-              positionedEvents: lt.get(t.id) ?? [],
+              positionedEvents: at.get(t.id) ?? [],
               column: e + 2,
               timeZone: l,
               cls: i,
-              onEventClick: O,
+              onEventClick: W,
               renderEvent: S,
-              eventGap: Y,
-              eventLayout: _,
-              stackOffset: Z,
-              selectedEventId: E,
-              selectedEventRef: j
+              eventGap: Z,
+              eventLayout: tt,
+              stackOffset: et,
+              selectedEventId: j,
+              selectedEventRef: I
             },
             t.id
           )),
-          C != null && (() => {
-            const t = r.findIndex(
-              (e) => e.id === C.resourceId
+          D != null && (() => {
+            const t = o.findIndex(
+              (e) => e.id === D.resourceId
             );
             return t === -1 ? null : /* @__PURE__ */ n(
-              Ct,
+              Dt,
               {
-                selectedRange: C,
+                selectedRange: D,
                 column: t + 2,
-                resource: r[t],
+                resource: o[t],
                 viewDate: a,
                 timeZone: l,
-                startHour: d,
+                startHour: c,
                 hourHeight: s,
                 cls: i,
-                appearance: q,
-                selectionRef: Q,
+                appearance: Q,
+                selectionRef: Y,
                 renderEvent: S
               }
             );
@@ -323,8 +320,8 @@ function Pt({
             {
               date: a,
               timeZone: l,
-              startHour: d,
-              endHour: c,
+              startHour: c,
+              endHour: d,
               hourHeight: s,
               cls: i
             }
@@ -349,11 +346,11 @@ function Pt({
           whiteSpace: "nowrap",
           borderWidth: 0
         },
-        children: at
+        children: dt
       }
     )
   ] });
 }
 export {
-  Pt as ResourceGridView
+  qt as ResourceGridView
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@savvycal/calendar",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "license": "MIT",
   "repository": {