@k2b/ui 0.23.0 → 0.24.0

package/dist/browser/content/Calendar.js

@@ -53,7 +53,7 @@ var _tmpl$ = /*#__PURE__*/_$template(`<a>`),
   _tmpl$35 = /*#__PURE__*/_$template(`<i class="ti ti-zoom-in"aria-hidden=true>`),
   _tmpl$36 = /*#__PURE__*/_$template(`<div class=k2b-calendar-popover popover=auto role=dialog>`),
   _tmpl$37 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__all-day><div class=k2b-calendar-time-grid__all-day-label></div><!$><!/>`),
-  _tmpl$38 = /*#__PURE__*/_$template(`<div class="k2b-calendar-time-grid k2b-detail-trail"><div class=k2b-calendar-time-grid__days><div></div><!$><!/></div><!$><!/><div class=k2b-calendar-time-grid__scroll><div class=k2b-calendar-time-grid__grid><div class=k2b-calendar-time-grid__gutter></div><!$><!/>`),
+  _tmpl$38 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid><div class=k2b-calendar-time-grid__days><div class=k2b-calendar-time-grid__corner></div><!$><!/></div><!$><!/><div class="k2b-calendar-time-grid__scroll k2b-detail-trail"><div class=k2b-calendar-time-grid__grid><div class=k2b-calendar-time-grid__gutter></div><!$><!/>`),
   _tmpl$39 = /*#__PURE__*/_$template(`<span class=k2b-calendar-time-grid__day-label>`),
   _tmpl$40 = /*#__PURE__*/_$template(`<span class=k2b-calendar-time-grid__badge><!$><!/><!$><!/>`),
   _tmpl$41 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__all-day-cell><div class=k2b-calendar-time-grid__all-day-events><!$><!/><!$><!/>`),
@@ -1400,6 +1400,8 @@ const MonthView = props => {
   const focusCell = key => cells.get(key)?.focus({
     preventScroll: true
   });
+  /** Whether the focus is in the popover, or fell to the page as it hid: only then does a close return it. */
+  const focusInPopover = () => popoverElement?.contains(document.activeElement) || document.activeElement === document.body;
   const closePopover = (restoreFocus = true) => {
     if (!popover()) return;
     setPopover(null);
@@ -2317,8 +2319,7 @@ const MonthView = props => {
       // A late close of the popover that another opening already replaced keeps the new one. Focus returns to the
       // grid only from inside the popover, never from what a click outside it chose.
       if (event.newState !== "closed" || !popover() || event.currentTarget.matches(":popover-open")) return;
-      const inside = event.currentTarget.contains(document.activeElement) || document.activeElement === document.body;
-      closePopover(inside);
+      closePopover(focusInPopover());
     });
     _el$136.$$focusin = () => setCreateActive(true);
     var _ref$ = popoverElement;
@@ -2331,7 +2332,7 @@ const MonthView = props => {
       children: value => value.kind === "create" ? props.owner.renderQuickCreate?.(rangeOf(value.range), {
         create: value.create,
         close: () => {
-          if (popover() === value) closePopover();
+          if (popover() === value) closePopover(focusInPopover());
         }
       }) : dayList(value.dayKey)
     }));
@@ -2372,6 +2373,8 @@ const TimeGridView = props => {
   let scrollContainer;
   let timeGrid;
   let timeGutter;
+  let daysRow;
+  let allDayRow;
   let defaultHourMarker;
   let cancelInteraction;
   let suppressSlotClickUntil = 0;
@@ -2402,7 +2405,10 @@ const TimeGridView = props => {
     if (!timeGrid || !timeGutter) return null;
     const gridRect = timeGrid.getBoundingClientRect();
     const gutterRect = timeGutter.getBoundingClientRect();
-    const dayIndex = calendarDayIndexAtPoint(clientX, gutterRect.right, gridRect.right - gutterRect.right, props.days.length);
+    // The gutter stays in view while the days scroll sideways under it, so the days start one gutter after the grid.
+    if (clientX < gutterRect.right) return null;
+    const daysLeft = gridRect.left + gutterRect.width;
+    const dayIndex = calendarDayIndexAtPoint(clientX, daysLeft, gridRect.right - daysLeft, props.days.length);
     if (dayIndex === null) return null;
     const minute = Math.min(gridEndHour() * 60 + 45, calendarMinuteAtPoint(clientY, gridRect.top, gridRect.height, gridStartHour(), gridEndHour()));
     return zonedMinuteSlot(props.days[dayIndex], minute, dateConfig());
@@ -2528,12 +2534,28 @@ const TimeGridView = props => {
     }
     return [...groups.values()];
   };
-  // 12 rem per lane. The 40 rem grid is wider than one or two lanes, so only
-  // three or more make the day scroll, and one lane fits beside a tablet drawer.
-  const dayColumnMinWidth = layouts => {
-    if (!isDayView()) return undefined;
-    const lanes = Math.max(1, ...layouts.map(layout => layout.lanes));
-    return `${lanes * 12}rem`;
+  // A week shares 36 rem between its days; a single day takes 12 rem per overlapping lane. The 40 rem grid is wider
+  // than one or two lanes, so only three or more make the day scroll, and one lane fits beside a tablet drawer.
+  const columnTemplate = createMemo(() => {
+    let dayMin = "var(--k2b-calendar-day-min)";
+    if (isDayView()) {
+      const day = props.days[0];
+      const layouts = timedEventLayouts(eventsByDay().get(calendar.formatDateKey(day, dateConfig()))?.timed ?? []);
+      dayMin = `${Math.max(1, ...layouts.map(layout => layout.lanes)) * 12}rem`;
+    }
+    return `4rem repeat(${props.days.length}, minmax(${dayMin}, 1fr))`;
+  });
+  // The hours scroll sideways themselves; the day and all-day rows follow, also when focus scrolls one of them.
+  // A row's scroll event from our own write arrives a frame late; echoing it back would undo a smooth scroll or fling.
+  const followed = new WeakMap();
+  const followColumns = source => {
+    if (followed.get(source) === source.scrollLeft) return;
+    followed.delete(source);
+    for (const row of [scrollContainer, daysRow, allDayRow]) {
+      if (!row || row === source || row.scrollLeft === source.scrollLeft) continue;
+      row.scrollLeft = source.scrollLeft;
+      followed.set(row, row.scrollLeft);
+    }
   };
   const laneStyle = layoutItem => {
     if (isDayView()) {
@@ -2582,6 +2604,9 @@ const TimeGridView = props => {
       _el$148 = _el$147.firstChild,
       _el$149 = _el$148.nextSibling,
       [_el$150, _co$38] = _$getNextMarker(_el$149.nextSibling);
+    _el$138.addEventListener("scroll", event => followColumns(event.currentTarget));
+    var _ref$2 = daysRow;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$138) : daysRow = _el$138;
     _$insert(_el$138, _$createComponent(For, {
       get each() {
         return props.days;
@@ -2640,6 +2665,9 @@ const TimeGridView = props => {
           _el$143 = _el$142.firstChild,
           _el$144 = _el$143.nextSibling,
           [_el$145, _co$37] = _$getNextMarker(_el$144.nextSibling);
+        _el$142.addEventListener("scroll", event => followColumns(event.currentTarget));
+        var _ref$3 = allDayRow;
+        typeof _ref$3 === "function" ? _$use(_ref$3, _el$142) : allDayRow = _el$142;
         _$insert(_el$143, () => props.labels.allDay);
         _$insert(_el$142, _$createComponent(For, {
           get each() {
@@ -2707,7 +2735,7 @@ const TimeGridView = props => {
           }
         }), _el$145, _co$37);
         _$effect(_p$ => {
-          var _v$24 = `4rem repeat(${props.days.length}, minmax(0, 1fr))`,
+          var _v$24 = columnTemplate(),
             _v$25 = `${props.owner.allDayMaxHeightRem ?? 7}rem`;
           _v$24 !== _p$.e && _$setStyleProperty(_el$142, "grid-template-columns", _p$.e = _v$24);
           _v$25 !== _p$.t && _$setStyleProperty(_el$142, "max-height", _p$.t = _v$25);
@@ -2719,12 +2747,13 @@ const TimeGridView = props => {
         return _el$142;
       }
     }), _el$152, _co$39);
-    var _ref$2 = scrollContainer;
-    typeof _ref$2 === "function" ? _$use(_ref$2, _el$146) : scrollContainer = _el$146;
-    var _ref$3 = timeGrid;
-    typeof _ref$3 === "function" ? _$use(_ref$3, _el$147) : timeGrid = _el$147;
-    var _ref$4 = timeGutter;
-    typeof _ref$4 === "function" ? _$use(_ref$4, _el$148) : timeGutter = _el$148;
+    _el$146.addEventListener("scroll", event => followColumns(event.currentTarget));
+    var _ref$4 = scrollContainer;
+    typeof _ref$4 === "function" ? _$use(_ref$4, _el$146) : scrollContainer = _el$146;
+    var _ref$5 = timeGrid;
+    typeof _ref$5 === "function" ? _$use(_ref$5, _el$147) : timeGrid = _el$147;
+    var _ref$6 = timeGutter;
+    typeof _ref$6 === "function" ? _$use(_ref$6, _el$148) : timeGutter = _el$148;
     _$insert(_el$148, _$createComponent(For, {
       get each() {
         return hours();
@@ -2830,10 +2859,10 @@ const TimeGridView = props => {
                 _$insert(_el$187, () => formatTime(event.startDate, dateConfig()), _el$190, _co$50);
                 _$insert(_el$187, () => formatTime(event.endDate, dateConfig()), _el$192, _co$51);
                 _$effect(_p$ => {
-                  var _v$32 = `${layout.top}%`,
-                    _v$33 = `${layout.height}%`;
-                  _v$32 !== _p$.e && _$setStyleProperty(_el$184, "top", _p$.e = _v$32);
-                  _v$33 !== _p$.t && _$setStyleProperty(_el$184, "height", _p$.t = _v$33);
+                  var _v$30 = `${layout.top}%`,
+                    _v$31 = `${layout.height}%`;
+                  _v$30 !== _p$.e && _$setStyleProperty(_el$184, "top", _p$.e = _v$30);
+                  _v$31 !== _p$.t && _$setStyleProperty(_el$184, "height", _p$.t = _v$31);
                   return _p$;
                 }, {
                   e: undefined,
@@ -2923,16 +2952,16 @@ const TimeGridView = props => {
                   }
                 }), _el$201, _co$54);
                 _$effect(_p$ => {
-                  var _v$34 = `${layout.top}%`,
-                    _v$35 = `${layout.height}%`,
-                    _v$36 = position.left,
-                    _v$37 = position.width,
-                    _v$38 = String(20 + layoutItem.lane);
-                  _v$34 !== _p$.e && _$setStyleProperty(_el$195, "top", _p$.e = _v$34);
-                  _v$35 !== _p$.t && _$setStyleProperty(_el$195, "height", _p$.t = _v$35);
-                  _v$36 !== _p$.a && _$setStyleProperty(_el$195, "left", _p$.a = _v$36);
-                  _v$37 !== _p$.o && _$setStyleProperty(_el$195, "width", _p$.o = _v$37);
-                  _v$38 !== _p$.i && _$setStyleProperty(_el$195, "z-index", _p$.i = _v$38);
+                  var _v$32 = `${layout.top}%`,
+                    _v$33 = `${layout.height}%`,
+                    _v$34 = position.left,
+                    _v$35 = position.width,
+                    _v$36 = String(20 + layoutItem.lane);
+                  _v$32 !== _p$.e && _$setStyleProperty(_el$195, "top", _p$.e = _v$32);
+                  _v$33 !== _p$.t && _$setStyleProperty(_el$195, "height", _p$.t = _v$33);
+                  _v$34 !== _p$.a && _$setStyleProperty(_el$195, "left", _p$.a = _v$34);
+                  _v$35 !== _p$.o && _$setStyleProperty(_el$195, "width", _p$.o = _v$35);
+                  _v$36 !== _p$.i && _$setStyleProperty(_el$195, "z-index", _p$.i = _v$36);
                   return _p$;
                 }, {
                   e: undefined,
@@ -2965,16 +2994,16 @@ const TimeGridView = props => {
                 };
                 _$insert(_el$203, () => overflow.hiddenEvents.length, _el$206, _co$55);
                 _$effect(_p$ => {
-                  var _v$39 = `${layout.top}%`,
-                    _v$40 = `${layout.height}%`,
-                    _v$41 = hiddenTitle(),
-                    _v$42 = calendarMessages().hiddenOverlappingEvents({
+                  var _v$37 = `${layout.top}%`,
+                    _v$38 = `${layout.height}%`,
+                    _v$39 = hiddenTitle(),
+                    _v$40 = calendarMessages().hiddenOverlappingEvents({
                       count: overflow.hiddenEvents.length
                     });
-                  _v$39 !== _p$.e && _$setStyleProperty(_el$202, "top", _p$.e = _v$39);
-                  _v$40 !== _p$.t && _$setStyleProperty(_el$202, "height", _p$.t = _v$40);
-                  _v$41 !== _p$.a && _$setAttribute(_el$202, "title", _p$.a = _v$41);
-                  _v$42 !== _p$.o && _$setAttribute(_el$202, "aria-label", _p$.o = _v$42);
+                  _v$37 !== _p$.e && _$setStyleProperty(_el$202, "top", _p$.e = _v$37);
+                  _v$38 !== _p$.t && _$setStyleProperty(_el$202, "height", _p$.t = _v$38);
+                  _v$39 !== _p$.a && _$setAttribute(_el$202, "title", _p$.a = _v$39);
+                  _v$40 !== _p$.o && _$setAttribute(_el$202, "aria-label", _p$.o = _v$40);
                   return _p$;
                 }, {
                   e: undefined,
@@ -3021,24 +3050,15 @@ const TimeGridView = props => {
               })];
             }
           }), _el$182, _co$49);
-          _$effect(_p$ => {
-            var _v$30 = dayColumnMinWidth(layouts()),
-              _v$31 = `repeat(${hours().length}, minmax(4rem, 1fr))`;
-            _v$30 !== _p$.e && _$setStyleProperty(_el$171, "min-width", _p$.e = _v$30);
-            _v$31 !== _p$.t && _$setStyleProperty(_el$171, "grid-template-rows", _p$.t = _v$31);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
+          _$effect(_$p => _$setStyleProperty(_el$171, "grid-template-rows", `repeat(${hours().length}, minmax(4rem, 1fr))`));
           return _el$171;
         })();
       }
     }), _el$150, _co$38);
     _$effect(_p$ => {
       var _v$26 = isDayView() ? "day" : "week",
-        _v$27 = `4rem repeat(${props.days.length}, minmax(0, 1fr))`,
-        _v$28 = `4rem repeat(${props.days.length}, minmax(0, 1fr))`,
+        _v$27 = columnTemplate(),
+        _v$28 = columnTemplate(),
         _v$29 = `repeat(${hours().length}, minmax(4rem, 1fr))`;
       _v$26 !== _p$.e && _$setAttribute(_el$137, "data-view", _p$.e = _v$26);
       _v$27 !== _p$.t && _$setStyleProperty(_el$138, "grid-template-columns", _p$.t = _v$27);
@@ -3128,14 +3148,14 @@ const YearView = props => {
                 children: event => (() => {
                   var _el$220 = _$getNextElement(_tmpl$54);
                   _$effect(_p$ => {
-                    var _v$43 = event().colorHex ? undefined : event().color ?? "blue",
-                      _v$44 = day.isToday ? "true" : undefined,
-                      _v$45 = event().colorHex ? {
+                    var _v$41 = event().colorHex ? undefined : event().color ?? "blue",
+                      _v$42 = day.isToday ? "true" : undefined,
+                      _v$43 = event().colorHex ? {
                         "background-color": day.isToday ? "white" : event().colorHex
                       } : undefined;
-                    _v$43 !== _p$.e && _$setAttribute(_el$220, "data-color", _p$.e = _v$43);
-                    _v$44 !== _p$.t && _$setAttribute(_el$220, "data-today", _p$.t = _v$44);
-                    _p$.a = _$style(_el$220, _v$45, _p$.a);
+                    _v$41 !== _p$.e && _$setAttribute(_el$220, "data-color", _p$.e = _v$41);
+                    _v$42 !== _p$.t && _$setAttribute(_el$220, "data-today", _p$.t = _v$42);
+                    _p$.a = _$style(_el$220, _v$43, _p$.a);
                     return _p$;
                   }, {
                     e: undefined,
@@ -3460,8 +3480,8 @@ const CalendarRoot = props => {
       [_el$233, _co$61] = _$getNextMarker(_el$232.nextSibling),
       _el$234 = _el$233.nextSibling,
       [_el$235, _co$62] = _$getNextMarker(_el$234.nextSibling);
-    var _ref$5 = root;
-    typeof _ref$5 === "function" ? _$use(_ref$5, _el$231) : root = _el$231;
+    var _ref$7 = root;
+    typeof _ref$7 === "function" ? _$use(_ref$7, _el$231) : root = _el$231;
     _$insert(_el$231, _$createComponent(CalendarHeader, {
       get date() {
         return date();
@@ -3617,10 +3637,10 @@ const CalendarRoot = props => {
       }
     }), _el$235, _co$62);
     _$effect(_p$ => {
-      var _v$46 = `k2b-content-calendar ${props.class ?? ""}`,
-        _v$47 = props.navigationPending ? "true" : undefined;
-      _v$46 !== _p$.e && _$className(_el$231, _p$.e = _v$46);
-      _v$47 !== _p$.t && _$setAttribute(_el$231, "aria-busy", _p$.t = _v$47);
+      var _v$44 = `k2b-content-calendar ${props.class ?? ""}`,
+        _v$45 = props.navigationPending ? "true" : undefined;
+      _v$44 !== _p$.e && _$className(_el$231, _p$.e = _v$44);
+      _v$45 !== _p$.t && _$setAttribute(_el$231, "aria-busy", _p$.t = _v$45);
       return _p$;
     }, {
       e: undefined,