@k2b/ui 0.29.0 → 0.30.0

package/dist/ssr/inputs/DatePicker.js

@@ -1,3 +1,4 @@
+import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
 import { ssrElement as _$ssrElement } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
@@ -15,28 +16,35 @@ var _tmpl$ = ["<i class=\"", "\" aria-hidden=\"true\"></i>"],
   _tmpl$8 = ["<div class=\"k2b-date-picker\"", ">", "", "<div id=\"", "\" class=\"k2b-date-popover\" popover=\"auto\" role=\"dialog\"", ">", "", "</div></div>"],
   _tmpl$9 = ["<aside class=\"k2b-date-presets\"", ">", "</aside>"],
   _tmpl$0 = ["<button type=\"button\">", "</button>"],
-  _tmpl$1 = ["<div class=\"k2b-date-weekdays\" aria-hidden=\"true\">", "</div>"],
-  _tmpl$10 = ["<div class=\"k2b-date-grid\" role=\"grid\">", "</div>"],
+  _tmpl$1 = ["<div class=\"k2b-date-weekdays\" aria-hidden=\"true\">", "", "</div>"],
+  _tmpl$10 = ["<div class=\"k2b-date-grid\" role=\"grid\">", "", "</div>"],
   _tmpl$11 = ["<section class=\"k2b-date-calendar\"", "><header class=\"k2b-date-calendar__header\"><button type=\"button\" class=\"k2b-date-calendar__nav\"", "><i class=\"ti ti-chevron-left\" aria-hidden=\"true\"></i></button><button type=\"button\" class=\"k2b-date-calendar__title\">", "</button><button type=\"button\" class=\"k2b-date-calendar__nav\"", "><i class=\"ti ti-chevron-right\" aria-hidden=\"true\"></i></button></header>", "</section>"],
   _tmpl$12 = ["<div class=\"k2b-date-months\" role=\"group\" aria-label=\"", "\">", "</div>"],
   _tmpl$13 = ["<button type=\"button\"", ">", "</button>"],
-  _tmpl$14 = ["<span>", "</span>"],
-  _tmpl$15 = ["<div class=\"k2b-date-week\" role=\"row\">", "</div>"],
-  _tmpl$16 = ["<button type=\"button\" role=\"gridcell\"", ">", "</button>"],
-  _tmpl$17 = ["<label class=\"k2b-date-time\">", "<span class=\"k2b-date-time__control\"><input type=\"text\" inputmode=\"numeric\"", " placeholder=\"09:00\"", "><i class=\"ti ti-clock\" aria-hidden=\"true\"></i></span></label>"],
-  _tmpl$18 = ["<div class=\"k2b-date-popover__body\">", "", "</div>"],
-  _tmpl$19 = ["<div class=\"k2b-date-actions\">", "<button type=\"button\" class=\"k2b-date-apply\"", ">", "</button></div>"],
-  _tmpl$20 = ["<span class=\"k2b-date-range-value\"><span>", "</span><i class=\"ti ti-arrow-narrow-right\" aria-hidden=\"true\"></i><span>", "</span></span>"],
-  _tmpl$21 = ["<span class=\"k2b-date-duration\"><i class=\"ti ti-hourglass-low\" aria-hidden=\"true\"></i>", "</span>"],
-  _tmpl$22 = ["<div class=\"k2b-date-range-times\">", "", "</div>"],
-  _tmpl$23 = ["<div class=\"k2b-date-durations\" role=\"group\"", ">", "</div>"];
+  _tmpl$14 = ["<span class=\"k2b-date-weekend\" style=\"", "\"></span>"],
+  _tmpl$15 = ["<span", ">", "</span>"],
+  _tmpl$16 = ["<span class=\"k2b-date-weekend\" aria-hidden=\"true\" style=\"", "\"></span>"],
+  _tmpl$17 = ["<div class=\"k2b-date-week\" role=\"row\">", "</div>"],
+  _tmpl$18 = ["<button type=\"button\" role=\"gridcell\"", ">", "</button>"],
+  _tmpl$19 = ["<span>", "</span>"],
+  _tmpl$20 = ["<label class=\"k2b-date-time\">", "<span class=\"k2b-date-time__control\"><input type=\"text\" inputmode=\"numeric\"", " placeholder=\"09:00\"", "><i class=\"ti ti-clock\" aria-hidden=\"true\"></i></span></label>"],
+  _tmpl$21 = ["<div class=\"k2b-date-popover__body\">", "", "</div>"],
+  _tmpl$22 = ["<button type=\"button\" class=\"k2b-date-optional-time__remove\"", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$23 = ["<div class=\"k2b-date-optional-time\"", ">", "</div>"],
+  _tmpl$24 = ["<div class=\"k2b-date-actions\">", "<button type=\"button\" class=\"k2b-date-apply\"", ">", "</button></div>"],
+  _tmpl$25 = ["<button type=\"button\" class=\"k2b-date-optional-time__add\"><i class=\"ti ti-clock-plus\" aria-hidden=\"true\"></i>", "</button>"],
+  _tmpl$26 = ["<span class=\"k2b-date-range-value\"><span>", "</span><i class=\"ti ti-arrow-narrow-right\" aria-hidden=\"true\"></i><span>", "</span></span>"],
+  _tmpl$27 = ["<span class=\"k2b-date-duration\"><i class=\"ti ti-hourglass-low\" aria-hidden=\"true\"></i>", "</span>"],
+  _tmpl$28 = ["<div class=\"k2b-date-range-times\">", "", "</div>"],
+  _tmpl$29 = ["<div class=\"k2b-date-durations\" role=\"group\"", ">", "</div>"];
 import { dates } from "@k2b/stdlib";
 import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
 import { createFieldMeta, Field, fieldControlAria, fieldDescribedBy } from "../internal/field";
 import { returnFocus, ringOnReturn } from "../internal/focus-return";
 import { useDateConfigLocale } from "../intl/locale";
 import { resolveUiMessages, useUiMessages } from "../intl/messages";
-import { dateKey, displayDate, filterTimeInput, formatDateOnlyRangeDuration, formatDateTimeValue, inRange, isCompleteTime, isRangeEdge, monthDate, monthNames, msUntilNextDay, normalizeTimeInput, orderedRange, parseDateValue, pickerContext, previewRange, resolveFocusDay, splitDateTime, toDateTimeValue, yearMonth } from "./date-picker";
+import { isWeekendKey } from "../intl/weekend";
+import { dateKey, displayDate, filterTimeInput, formatDateOnlyRangeDuration, formatDateTimeValue, inRange, isCompleteTime, isDateKey, isRangeEdge, monthDate, monthNames, msUntilNextDay, normalizeTimeInput, parseDateValue, pickerContext, pickRangeDay, previewRange, rangeAnchor, resolveFocusDay, splitDateTime, toDateTimeValue, weekendBands, yearMonth } from "./date-picker";
 import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
 const popoverIsOpen = popover => {
   if (!popover) return false;
@@ -277,6 +285,9 @@ function DatePickerPanel(props) {
     document.addEventListener("visibilitychange", refresh);
     onCleanup(() => document.removeEventListener("visibilitychange", refresh));
   });
+  // The weekend columns of the locale, read from the first week so they follow the grid's first day of the week.
+  const weekendColumns = createMemo(() => (dayRows()[0] ?? []).map(cell => isWeekendKey(cell.key, context().locale)));
+  const bands = createMemo(() => weekendBands(weekendColumns()));
   let calendar;
   // Days that belong to the visible month; the roving tabindex must land on one
   // of them or the grid becomes unreachable by keyboard after month navigation.
@@ -343,17 +354,27 @@ function DatePickerPanel(props) {
     },
     get children() {
       return [_$ssr(_tmpl$1, _$escape(_$createComponent(For, {
+        get each() {
+          return bands();
+        },
+        children: band => _$ssr(_tmpl$14, _$ssrStyleProperty("grid-column:", `${_$escape(band.start, true) + 1} / span ${_$escape(band.span, true)}`))
+      })), _$escape(_$createComponent(For, {
         get each() {
           return weekdays();
         },
-        children: day => _$ssr(_tmpl$14, _$escape(day))
+        children: (day, index) => _$ssr(_tmpl$15, _$ssrAttribute("data-weekend", weekendColumns()[index()] ? "true" : _$escape(undefined, true), false), _$escape(day))
       }))), _$ssr(_tmpl$10, _$escape(_$createComponent(For, {
+        get each() {
+          return bands();
+        },
+        children: band => _$ssr(_tmpl$16, _$ssrStyleProperty("grid-column:", `${_$escape(band.start, true) + 1} / span ${_$escape(band.span, true)}`) + _$ssrStyleProperty(";grid-row:", `1 / span ${_$escape(dayRows().length, true)}`))
+      })), _$escape(_$createComponent(For, {
         get each() {
           return dayRows();
         },
-        children: week => _$ssr(_tmpl$15, _$escape(_$createComponent(For, {
+        children: week => _$ssr(_tmpl$17, _$escape(_$createComponent(For, {
           each: week,
-          children: cell => {
+          children: (cell, cellIndex) => {
             const selected = () => props.selected?.() === cell.key;
             const range = () => props.range?.() ?? {
               start: null,
@@ -362,7 +383,7 @@ function DatePickerPanel(props) {
             const active = () => selected() || isRangeEdge(cell.key, range());
             const focusable = () => cell.key === defaultFocus();
             const today = () => cell.key === todayKey();
-            return _$ssr(_tmpl$16, _$ssrAttribute("data-date-day", _$escape(cell.key, true), false) + _$ssrAttribute("data-date-focus", focusable() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", cell.outside ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-in-range", inRange(cell.key, range()) && !active() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-current", today() ? "date" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", today() ? _$escape(todayLabel(cell.label), true) : _$escape(cell.label, true), false) + _$ssrAttribute("aria-selected", _$escape(active(), true), false) + _$ssrAttribute("tabindex", focusable() ? 0 : -1, false), _$escape(cell.number));
+            return _$ssr(_tmpl$18, _$ssrAttribute("data-date-day", _$escape(cell.key, true), false) + _$ssrAttribute("data-date-focus", focusable() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", cell.outside ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-weekend", weekendColumns()[cellIndex()] ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-in-range", inRange(cell.key, range()) && !active() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-current", today() ? "date" : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", today() ? _$escape(todayLabel(cell.label), true) : _$escape(cell.label, true), false) + _$ssrAttribute("aria-selected", _$escape(active(), true), false) + _$ssrAttribute("tabindex", focusable() ? 0 : -1, false), _$escape(cell.number));
           }
         })))
       })))];
@@ -371,12 +392,12 @@ function DatePickerPanel(props) {
 }
 function TimeInput(props) {
   const messages = useUiMessages();
-  return _$ssr(_tmpl$17, _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$20, _$escape(_$createComponent(Show, {
     get when() {
       return props.label;
     },
     get children() {
-      return _$ssr(_tmpl$14, _$escape(props.label));
+      return _$ssr(_tmpl$19, _$escape(props.label));
     }
   })), _$ssrAttribute("value", _$escape(props.time, true), false), _$ssrAttribute("aria-label", props.label ? _$escape(messages().timeLabel({
     label: props.label
@@ -399,7 +420,7 @@ export function DatePicker(props) {
     get wide() {
       return Boolean(props.presets?.length);
     },
-    children: close => _$ssr(_tmpl$18, _$escape(_$createComponent(PresetRail, {
+    children: close => _$ssr(_tmpl$21, _$escape(_$createComponent(PresetRail, {
       get presets() {
         return props.presets;
       },
@@ -427,19 +448,38 @@ export function DateTimePicker(props) {
   const value = () => resolveMaybeAccessor(props.value);
   const dateConfig = useDateConfigLocale(() => props.dateConfig);
   const parts = () => splitDateTime(value(), dateConfig());
+  const defaultTime = () => props.defaultTime ?? "09:00";
+  // Without `optionalTime` every value has a time; with it a date key has none.
+  const valueHasTime = () => !props.optionalTime || Boolean(value()) && !isDateKey(value());
   const [visibleMonth, setVisibleMonth] = createSignal(parseDateValue(parts().date, dateConfig()));
   const [draftDate, setDraftDate] = createSignal(parts().date);
-  const [draftTime, setDraftTime] = createSignal(parts().time || "09:00");
-  const valueLabel = () => formatDateTimeValue(value(), dateConfig());
+  const [draftTime, setDraftTime] = createSignal(parts().time || defaultTime());
+  const [withTime, setWithTime] = createSignal(valueHasTime());
+  const valueLabel = () => valueHasTime() ? formatDateTimeValue(value(), dateConfig()) : displayDate(value(), dateConfig());
+  let addTimeButton;
+  let timeField;
   const syncDraft = () => {
     const next = parts();
     setDraftDate(next.date);
-    setDraftTime(next.time || "09:00");
+    setDraftTime(next.time || defaultTime());
+    setWithTime(valueHasTime());
     setVisibleMonth(parseDateValue(next.date, dateConfig()));
   };
+  const canApply = () => Boolean(draftDate()) && (!withTime() || isCompleteTime(draftTime()));
+  const draftValue = () => withTime() ? toDateTimeValue(draftDate(), draftTime(), dateConfig()) : draftDate() || null;
+  const addTime = () => {
+    setWithTime(true);
+    queueMicrotask(() => timeField?.querySelector("input")?.focus());
+  };
+  const removeTime = () => {
+    setWithTime(false);
+    queueMicrotask(() => addTimeButton?.focus());
+  };
   return _$createComponent(PickerShell, {
     owner: props,
-    icon: "ti ti-calendar-time",
+    get icon() {
+      return props.optionalTime && !valueHasTime() ? "ti ti-calendar" : "ti ti-calendar-time";
+    },
     valueLabel: valueLabel,
     get valueContent() {
       return props.renderValue ? () => props.renderValue(value()) : undefined;
@@ -452,32 +492,67 @@ export function DateTimePicker(props) {
     get wide() {
       return Boolean(props.presets?.length);
     },
-    children: close => [_$ssr(_tmpl$18, _$escape(_$createComponent(PresetRail, {
-      get presets() {
-        return props.presets;
-      },
-      onSelect: value => {
+    children: close => {
+      const apply = () => {
+        if (!canApply()) return;
+        const next = draftValue();
         close();
-        commitFieldValue(props, value);
-      }
-    })), _$escape(_$createComponent(DatePickerPanel, {
-      visibleMonth: visibleMonth,
-      setVisibleMonth: setVisibleMonth,
-      selected: draftDate,
-      focusDate: draftDate,
-      onSelect: value => {
-        setDraftDate(value);
-        setVisibleMonth(parseDateValue(value, dateConfig()));
-      },
-      get dateConfig() {
-        return dateConfig();
-      }
-    }))), _$ssr(_tmpl$19, _$escape(_$createComponent(TimeInput, {
-      get time() {
-        return draftTime();
-      },
-      onChange: setDraftTime
-    })), _$ssrAttribute("disabled", !draftDate() || !isCompleteTime(draftTime()), true), _$escape(messages().apply))]
+        commitFieldValue(props, next);
+      };
+      return [_$ssr(_tmpl$21, _$escape(_$createComponent(PresetRail, {
+        get presets() {
+          return props.presets;
+        },
+        onSelect: value => {
+          close();
+          commitFieldValue(props, value);
+        }
+      })), _$escape(_$createComponent(DatePickerPanel, {
+        visibleMonth: visibleMonth,
+        setVisibleMonth: setVisibleMonth,
+        selected: draftDate,
+        focusDate: draftDate,
+        onSelect: value => {
+          setDraftDate(value);
+          setVisibleMonth(parseDateValue(value, dateConfig()));
+          // A date without a time is complete with the day, as in the date picker.
+          if (props.optionalTime && !withTime()) apply();
+        },
+        get dateConfig() {
+          return dateConfig();
+        }
+      }))), _$ssr(_tmpl$24, _$escape(_$createComponent(Show, {
+        get when() {
+          return props.optionalTime;
+        },
+        get fallback() {
+          return _$createComponent(TimeInput, {
+            get time() {
+              return draftTime();
+            },
+            onChange: setDraftTime
+          });
+        },
+        get children() {
+          return _$ssr(_tmpl$23, _$ssrAttribute("data-with-time", withTime() ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+            get when() {
+              return withTime();
+            },
+            get fallback() {
+              return _$ssr(_tmpl$25, _$escape(messages().addTime));
+            },
+            get children() {
+              return [_$createComponent(TimeInput, {
+                get time() {
+                  return draftTime();
+                },
+                onChange: setDraftTime
+              }), _$ssr(_tmpl$22, _$ssrAttribute("aria-label", _$escape(messages().removeTime, true), false) + _$ssrAttribute("title", _$escape(messages().removeTime, true), false))];
+            }
+          })));
+        }
+      })), _$ssrAttribute("disabled", !canApply(), true), _$escape(messages().apply))];
+    }
   });
 }
 export function DateRangePicker(props) {
@@ -500,16 +575,19 @@ export function DateRangePicker(props) {
     start: parts().start.date || null,
     end: parts().end.date || null
   });
+  // The day of the last click that started a one-day range; the next click on another day extends from it.
+  const [anchor, setAnchor] = createSignal(null);
   const [previewDate, setPreviewDate] = createSignal(null);
   const [startTime, setStartTime] = createSignal(parts().start.time || "09:00");
   const [endTime, setEndTime] = createSignal(parts().end.time || "10:00");
-  const displayRange = createMemo(() => previewRange(draftRange(), previewDate()));
+  const displayRange = createMemo(() => previewRange(draftRange(), anchor(), previewDate()));
   const syncDraft = () => {
     const next = parts();
     setDraftRange({
       start: next.start.date || null,
       end: next.end.date || null
     });
+    setAnchor(null);
     setPreviewDate(null);
     setStartTime(next.start.time || "09:00");
     setEndTime(next.end.time || "10:00");
@@ -522,18 +600,12 @@ export function DateRangePicker(props) {
   };
   const valueContent = () => {
     const format = withTime() ? formatDateTimeValue : displayDate;
-    return _$ssr(_tmpl$20, value().start ? _$escape(format(value().start, dateConfig())) : _$escape(messages().start), value().end ? _$escape(format(value().end, dateConfig())) : "End");
+    return _$ssr(_tmpl$26, value().start ? _$escape(format(value().start, dateConfig())) : _$escape(messages().start), value().end ? _$escape(format(value().end, dateConfig())) : "End");
   };
   const selectDate = value => {
-    const current = draftRange();
-    if (!current.start || current.end) {
-      setDraftRange({
-        start: value,
-        end: null
-      });
-    } else {
-      setDraftRange(orderedRange(current.start, value));
-    }
+    const next = pickRangeDay(draftRange(), anchor(), value);
+    setDraftRange(next.range);
+    setAnchor(next.anchor);
     setPreviewDate(null);
   };
   const applyDuration = minutes => {
@@ -598,14 +670,14 @@ export function DateRangePicker(props) {
         return durationLabel();
       },
       get children() {
-        return _$ssr(_tmpl$21, _$escape(durationLabel()));
+        return _$ssr(_tmpl$27, _$escape(durationLabel()));
       }
     }),
     onOpen: syncDraft,
     get wide() {
       return Boolean(props.datePresets?.length || props.presets?.length);
     },
-    children: close => [_$ssr(_tmpl$18, _$escape(_$createComponent(Show, {
+    children: close => [_$ssr(_tmpl$21, _$escape(_$createComponent(Show, {
       get when() {
         return props.datePresets?.length;
       },
@@ -643,10 +715,7 @@ export function DateRangePicker(props) {
       range: displayRange,
       focusDate: () => draftRange().start,
       onSelect: selectDate,
-      onDayPreview: value => {
-        const current = draftRange();
-        setPreviewDate(current.start && !current.end ? value : null);
-      },
+      onDayPreview: value => setPreviewDate(rangeAnchor(draftRange(), anchor()) ? value : null),
       get dateConfig() {
         return dateConfig();
       }
@@ -655,7 +724,7 @@ export function DateRangePicker(props) {
         return withTime();
       },
       get children() {
-        return _$ssr(_tmpl$22, _$escape(_$createComponent(TimeInput, {
+        return _$ssr(_tmpl$28, _$escape(_$createComponent(TimeInput, {
           get label() {
             return messages().start;
           },
@@ -673,12 +742,12 @@ export function DateRangePicker(props) {
           onChange: setEndTime
         })));
       }
-    }), _$ssr(_tmpl$19, _$escape(_$createComponent(Show, {
+    }), _$ssr(_tmpl$24, _$escape(_$createComponent(Show, {
       get when() {
         return _$memo(() => !!withTime())() && props.durationPresets?.length;
       },
       get children() {
-        return _$ssr(_tmpl$23, _$ssrAttribute("aria-label", _$escape(messages().durationPresets, true), false), _$escape(_$createComponent(For, {
+        return _$ssr(_tmpl$29, _$ssrAttribute("aria-label", _$escape(messages().durationPresets, true), false), _$escape(_$createComponent(For, {
           get each() {
             return props.durationPresets;
           },