@k2b/ui 0.50.0 → 0.51.0

package/dist/ssr/inputs/PeriodPicker.js

@@ -0,0 +1,598 @@
+import { ssr as _$ssr } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = ["<button", " type=\"button\" class=\"k2b-period-picker__trigger\" aria-haspopup=\"dialog\"", "", "><i class=\"ti ti-calendar\" aria-hidden=\"true\"></i><span class=\"k2b-period-picker__value\"", "><span", ">", "</span>", "</span><i", " aria-hidden=\"true\"></i></button>"],
+  _tmpl$2 = ["<div", " class=\"k2b-period-picker__popover\" popover=\"auto\" role=\"dialog\"", ">", "</div>"],
+  _tmpl$3 = ["<span class=\"k2b-period-picker__detail\"> · ", "</span>"],
+  _tmpl$4 = ["<span aria-hidden=\"true\">", "</span>"],
+  _tmpl$5 = ["<button type=\"button\" role=\"option\" class=\"k2b-dropdown__item k2b-period-picker__option k2b-period-picker__custom\"", "><span class=\"k2b-dropdown__copy\"><span>", "</span></span><span class=\"k2b-period-picker__hint\">", "</span><i class=\"ti ti-chevron-right k2b-dropdown__check\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$6 = ["<div class=\"k2b-period-picker__list\" role=\"listbox\"", ">", "", "</div>"],
+  _tmpl$7 = ["<div class=\"k2b-period-picker__panel\"", ">", "", "</div>"],
+  _tmpl$8 = ["<button type=\"button\" role=\"option\" class=\"k2b-dropdown__item k2b-period-picker__option\"", "><span class=\"k2b-dropdown__copy\"><span>", "</span></span><span class=\"k2b-period-picker__hint\">", "</span><i class=\"ti ti-check k2b-dropdown__check\" aria-hidden=\"true\"", "></i></button>"],
+  _tmpl$9 = ["<div class=\"k2b-field k2b-period-picker__field\"", "><label class=\"k2b-field__label\"", ">", "</label><div class=\"k2b-input-shell\"><input", " class=\"k2b-input\" type=\"text\" inputmode=\"numeric\" autocomplete=\"off\" spellcheck=\"false\"", "></div><p class=\"k2b-period-picker__error\" id=\"", "\">", "</p></div>"],
+  _tmpl$0 = ["<button type=\"button\" class=\"k2b-period-picker__back\"><i class=\"ti ti-chevron-left\" aria-hidden=\"true\"></i>", "</button>"],
+  _tmpl$1 = "<i class=\"ti ti-hourglass-low\" aria-hidden=\"true\"></i>",
+  _tmpl$10 = ["<div class=\"k2b-period-picker__editor\" role=\"group\"", ">", "<div class=\"k2b-period-picker__fields\">", "", "</div><div class=\"k2b-period-picker__months\">", "", "</div><div class=\"k2b-period-picker__actions\"><span class=\"k2b-date-duration\" aria-live=\"polite\">", "", "</span><button type=\"button\" class=\"k2b-date-apply\"", ">", "</button></div></div>"];
+import { dates } from "@k2b/stdlib";
+import { batch, createComputed, createEffect, createMemo, createSignal, For, on, onCleanup, Show } from "solid-js";
+import { prefersMenuSheet } from "../actions/phone-sheet";
+import { createFieldMeta, Field, fieldDescribedBy } from "../internal/field";
+import { returnFocus, ringOnReturn } from "../internal/focus-return";
+import { useDateConfigLocale } from "../intl/locale";
+import { useUiMessages } from "../intl/messages";
+import { DatePickerPanel } from "./DatePicker";
+import { dateInputPattern, formatDateInput, parseDateInput } from "./date-input";
+import { resolveDateInputMessages } from "./date-input-messages";
+import { errorText } from "./date-input-status";
+import { parseDateValue, pickRangeDay, previewRange, rangeAnchor } from "./date-picker";
+import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
+import { formatPeriodDays, formatPeriodRange, periodContext, periodDayCount, widePeriodRangeSample } from "./period";
+import { builtInPresetLabel, usePeriodPickerMessages } from "./period-picker-messages";
+/** Two months side by side need room for the list and both calendars. */
+const TWO_MONTHS_QUERY = "(min-width: 56rem)";
+const presetLabel = (preset, t) => preset.label ?? builtInPresetLabel(t, preset.key) ?? preset.key;
+
+/** Places the popover under (or over) the trigger; it grows toward the side with room, right-aligned near the right edge. */
+const placePeriodPopover = (trigger, popover) => {
+  const margin = 8;
+  const gap = 4;
+  const rect = trigger.getBoundingClientRect();
+  const box = popover.getBoundingClientRect();
+  const width = Math.min(box.width, window.innerWidth - margin * 2);
+  const fromLeft = rect.left;
+  const fromRight = rect.right - width;
+  const left = fromLeft + width <= window.innerWidth - margin ? fromLeft : Math.max(margin, fromRight);
+  const roomBelow = window.innerHeight - rect.bottom - gap - margin;
+  const roomAbove = rect.top - gap - margin;
+  const above = box.height > roomBelow && roomAbove > roomBelow;
+  const top = above ? Math.max(margin, rect.top - box.height - gap) : Math.min(rect.bottom + gap, window.innerHeight - box.height - margin);
+  popover.style.left = `${Math.max(margin, Math.min(left, window.innerWidth - width - margin))}px`;
+  popover.style.top = `${Math.max(margin, top)}px`;
+};
+const popoverIsOpen = popover => {
+  try {
+    return Boolean(popover?.matches(":popover-open"));
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * PeriodPicker — one control for the period an evaluation or dashboard shows: presets such as "This month" plus a
+ * custom range, edited in the same popover (a bottom sheet on phones). The trigger shows the preset with its days or
+ * the custom days with their count, and keeps the width of its longest text so nothing beside it moves.
+ */
+export function PeriodPicker(props) {
+  const t = usePeriodPickerMessages();
+  const meta = createFieldMeta(props.id);
+  const dateConfig = useDateConfigLocale(() => props.dateConfig);
+  const locale = () => dateConfig().locale ?? "en";
+  const value = () => resolveMaybeAccessor(props.value);
+  const custom = () => props.custom ?? true;
+  const disabled = createMemo(() => Boolean(props.disabled || props.loading));
+  // Read again on every opening, so a picker left open past midnight shows the new day's presets next time.
+  const [clockTick, setClockTick] = createSignal(0);
+  const context = createMemo(() => {
+    clockTick();
+    return periodContext({
+      now: props.now,
+      timeZone: dateConfig().timeZone,
+      weekStartsOn: dateConfig().weekStartsOn ?? dateConfig().firstDayOfWeek
+    });
+  });
+  const since = date => t().since({
+    date
+  });
+  const presetText = preset => ({
+    label: presetLabel(preset, t()),
+    detail: formatPeriodDays(preset.resolve(context()), context().today, locale(), since)
+  });
+  const rangeText = range => ({
+    label: formatPeriodRange(range, locale()),
+    detail: t().days({
+      count: periodDayCount(range)
+    })
+  });
+  const selectedPreset = () => {
+    const current = value();
+    return current && "preset" in current ? props.presets.find(preset => preset.key === current.preset) : undefined;
+  };
+  const current = createMemo(() => {
+    const selected = value();
+    if (!selected) return undefined;
+    if ("preset" in selected) {
+      const preset = selectedPreset();
+      return preset ? presetText(preset) : undefined;
+    }
+    return rangeText(selected);
+  });
+  const joined = text => text.detail ? `${text.label} · ${text.detail}` : text.label;
+  // Every text the trigger can show shares one grid cell, so it keeps the widest one's width.
+  const widths = createMemo(() => [...props.presets.map(preset => joined(presetText(preset))), ...(custom() ? [joined(rangeText(widePeriodRangeSample(context().today)))] : []), t().choosePeriod]);
+  const [open, setOpen] = createSignal(false);
+  const [view, setView] = createSignal("list");
+  const [sheetOpen, setSheetOpen] = createSignal(false);
+  let trigger;
+  let popover;
+  let openedByKeyboard = false;
+  const popoverId = `${meta.controlId}-period`;
+  const sheetId = `${meta.controlId}-sheet`;
+  const valueId = `${meta.controlId}-value`;
+
+  // A trigger disabled while a change saves would drop keyboard focus on the page; it comes back once enabled.
+  let refocus = false;
+  createComputed(on(disabled, isDisabled => {
+    if (isDisabled) refocus = trigger !== undefined && document.activeElement === trigger;
+  }, {
+    defer: true
+  }));
+  createEffect(on(disabled, isDisabled => {
+    if (isDisabled || !refocus) return;
+    refocus = false;
+    const active = document.activeElement;
+    if (trigger?.isConnected && (active === null || active === document.body)) trigger.focus();
+  }, {
+    defer: true
+  }));
+  const place = () => {
+    if (trigger && popover && open()) placePeriodPopover(trigger, popover);
+  };
+  createEffect(() => {
+    if (!open()) return;
+    view();
+    queueMicrotask(place);
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    onCleanup(() => {
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+    });
+  });
+  const close = () => {
+    // Before hiding, so the popover does not return focus on its own.
+    if (popover?.contains(document.activeElement)) returnFocus(trigger, openedByKeyboard);
+    if (popoverIsOpen(popover)) popover?.hidePopover();
+    setOpen(false);
+  };
+  onCleanup(() => {
+    if (popoverIsOpen(popover)) popover?.hidePopover();
+  });
+  const pick = next => {
+    close();
+    if (sheetOpen()) return;
+    commitFieldValue(props, next);
+  };
+  const initialView = () => {
+    const selected = value();
+    return custom() && selected && !("preset" in selected) ? "custom" : "list";
+  };
+  const openSheet = async () => {
+    setSheetOpen(true);
+    const {
+      openDateSheet
+    } = await import("./date-sheet");
+    const result = await openDateSheet({
+      title: typeof props.label === "string" ? props.label : props["aria-label"] ?? t().period,
+      subtitle: current() ? joined(current()) : t().choosePeriod,
+      ariaLabel: typeof props.label === "string" ? props.label : props["aria-label"] ?? t().period,
+      id: sheetId,
+      locale: locale(),
+      content: closeSheet => _$createComponent(PeriodPanel, {
+        sheet: true,
+        get presets() {
+          return props.presets;
+        },
+        get custom() {
+          return custom();
+        },
+        value: value,
+        get initialView() {
+          return initialView();
+        },
+        context: context,
+        dateConfig: dateConfig,
+        presetText: presetText,
+        rangeText: rangeText,
+        get label() {
+          return props["aria-label"] ?? t().period;
+        },
+        onPick: closeSheet
+      })
+    });
+    setSheetOpen(false);
+    if (result) commitFieldValue(props, result);
+    trigger?.focus({
+      preventScroll: true
+    });
+  };
+  const show = () => {
+    if (disabled() || !popover) return;
+    setClockTick(tick => tick + 1);
+    openedByKeyboard = ringOnReturn(trigger);
+    if (prefersMenuSheet()) return void openSheet();
+    setView(initialView());
+    popover.showPopover();
+    setOpen(true);
+    queueMicrotask(() => {
+      place();
+      popover?.querySelector('[role="option"][tabindex="0"]')?.focus();
+    });
+  };
+  const name = () => props.label ? undefined : `${props["aria-label"] ?? t().period}: ${current() ? joined(current()) : t().choosePeriod}`;
+  return _$createComponent(Field, {
+    get ["class"]() {
+      return `k2b-period-picker ${props.class ?? ""}`;
+    },
+    get label() {
+      return props.label;
+    },
+    get description() {
+      return props.description;
+    },
+    get error() {
+      return props.error;
+    },
+    meta: meta,
+    get required() {
+      return props.required;
+    },
+    get disabled() {
+      return disabled();
+    },
+    get children() {
+      return [_$ssr(_tmpl$, _$ssrAttribute("id", _$escape(meta.controlId, true), false), _$ssrAttribute("aria-expanded", _$escape(open() || sheetOpen(), true), false) + _$ssrAttribute("aria-controls", sheetOpen() ? _$escape(sheetId, true) : _$escape(popoverId, true), false) + _$ssrAttribute("aria-label", _$escape(name(), true), false) + _$ssrAttribute("aria-labelledby", props.label ? `${_$escape(meta.labelId, true)} ${_$escape(valueId, true)}` : _$escape(undefined, true), false) + _$ssrAttribute("aria-describedby", _$escape(fieldDescribedBy(meta, props), true), false) + _$ssrAttribute("aria-invalid", resolveMaybeAccessor(props.error) ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-busy", props.loading ? "true" : _$escape(undefined, true), false), _$ssrAttribute("disabled", disabled(), true), _$ssrAttribute("data-placeholder", current() ? _$escape(undefined, true) : "true", false), _$ssrAttribute("id", _$escape(valueId, true), false), _$escape(_$createComponent(Show, {
+        get when() {
+          return current();
+        },
+        get fallback() {
+          return t().choosePeriod;
+        },
+        children: text => [text().label, _$createComponent(Show, {
+          get when() {
+            return text().detail;
+          },
+          get children() {
+            return _$ssr(_tmpl$3, _$escape(text().detail));
+          }
+        })]
+      })), _$escape(_$createComponent(For, {
+        get each() {
+          return widths();
+        },
+        children: text => _$ssr(_tmpl$4, _$escape(text))
+      })), _$ssrAttribute("class", props.loading ? "ti ti-loader-2 k2b-spin" : "ti ti-chevron-down", false)), _$ssr(_tmpl$2, _$ssrAttribute("id", _$escape(popoverId, true), false), _$ssrAttribute("aria-label", _$escape(props["aria-label"] ?? (typeof props.label === "string" ? props.label : t().period), true), false), _$escape(_$createComponent(Show, {
+        get when() {
+          return open();
+        },
+        get children() {
+          return _$createComponent(PeriodPanel, {
+            get presets() {
+              return props.presets;
+            },
+            get custom() {
+              return custom();
+            },
+            value: value,
+            get initialView() {
+              return view();
+            },
+            onViewChange: setView,
+            context: context,
+            dateConfig: dateConfig,
+            presetText: presetText,
+            rangeText: rangeText,
+            get label() {
+              return props["aria-label"] ?? t().period;
+            },
+            onPick: pick
+          });
+        }
+      })))];
+    }
+  });
+}
+function PeriodPanel(props) {
+  const t = usePeriodPickerMessages();
+  const [view, setViewSignal] = createSignal(props.initialView);
+  const setView = next => {
+    setViewSignal(next);
+    props.onViewChange?.(next);
+  };
+  const selected = () => props.value();
+  const explicit = () => {
+    const current = selected();
+    return current && !("preset" in current) ? current : undefined;
+  };
+  const isSelected = preset => {
+    const current = selected();
+    return Boolean(current && "preset" in current && current.preset === preset.key);
+  };
+  const optionCount = () => props.presets.length + (props.custom ? 1 : 0);
+  const initialActive = () => {
+    const index = props.presets.findIndex(isSelected);
+    if (index >= 0) return index;
+    return explicit() && props.custom ? props.presets.length : 0;
+  };
+  const [active, setActive] = createSignal(initialActive());
+  let list;
+  const focusOption = index => {
+    setActive(index);
+    queueMicrotask(() => list?.querySelector(`[data-option-index="${index}"]`)?.focus());
+  };
+  const onListKeyDown = event => {
+    const count = optionCount();
+    const moves = {
+      ArrowDown: (active() + 1) % count,
+      ArrowUp: (active() - 1 + count) % count,
+      Home: 0,
+      End: count - 1
+    };
+    const next = moves[event.key];
+    if (next === undefined) return;
+    event.preventDefault();
+    focusOption(next);
+  };
+  let panel;
+  const openCustom = () => {
+    setActive(props.presets.length);
+    setView("custom");
+    // In the sheet the list goes away with the focused option; focus continues on the calendar's day.
+    if (props.sheet) queueMicrotask(() => panel?.querySelector('[data-date-focus="true"]')?.focus());
+  };
+  return _$ssr(_tmpl$7, _$ssrAttribute("data-view", _$escape(view(), true), false) + _$ssrAttribute("data-sheet", props.sheet ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return !props.sheet || view() === "list";
+    },
+    get children() {
+      return _$ssr(_tmpl$6, _$ssrAttribute("aria-label", _$escape(props.label, true), false), _$escape(_$createComponent(For, {
+        get each() {
+          return props.presets;
+        },
+        children: (preset, index) => {
+          const text = () => props.presetText(preset);
+          return _$ssr(_tmpl$8, _$ssrAttribute("data-option-index", _$escape(index(), true), false) + _$ssrAttribute("aria-selected", isSelected(preset) && _$escape(view(), true) === "list", false) + _$ssrAttribute("tabindex", active() === index() ? 0 : -1, false), _$escape(text().label), _$escape(text().detail), _$ssrAttribute("data-hidden", isSelected(preset) && view() === "list" ? _$escape(undefined, true) : "true", false));
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.custom;
+        },
+        get children() {
+          return _$ssr(_tmpl$5, _$ssrAttribute("data-option-index", _$escape(props.presets.length, true), false) + _$ssrAttribute("aria-selected", _$escape(view() === "custom" || Boolean(explicit()), true), false) + _$ssrAttribute("tabindex", active() === props.presets.length ? 0 : -1, false), _$escape(t().custom), explicit() ? _$escape(props.rangeText(explicit()).label) : "");
+        }
+      })));
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return view() === "custom";
+    },
+    get children() {
+      return _$createComponent(RangeEditor, {
+        get initial() {
+          const current = explicit();
+          if (current) return current;
+          const preset = props.presets.find(isSelected);
+          const range = preset?.resolve(props.context());
+          return range?.start && range.end ? {
+            start: range.start,
+            end: range.end
+          } : null;
+        },
+        get today() {
+          return props.context().today;
+        },
+        get dateConfig() {
+          return props.dateConfig;
+        },
+        get rangeText() {
+          return props.rangeText;
+        },
+        get sheet() {
+          return props.sheet;
+        },
+        onBack: () => {
+          setView("list");
+          focusOption(props.presets.length);
+        },
+        onApply: range => props.onPick(range)
+      });
+    }
+  })));
+}
+function RangeEditor(props) {
+  const t = usePeriodPickerMessages();
+  const ui = useUiMessages();
+  const locale = () => props.dateConfig().locale ?? "en";
+  const inputT = () => resolveDateInputMessages(locale());
+  const config = () => ({
+    ...props.dateConfig(),
+    weekStartsOn: props.dateConfig().weekStartsOn ?? props.dateConfig().firstDayOfWeek ?? 1
+  });
+  const [draft, setDraft] = createSignal({
+    start: props.initial?.start ?? null,
+    end: props.initial?.end ?? null
+  });
+  const [anchor, setAnchor] = createSignal(null);
+  const [preview, setPreview] = createSignal(null);
+  const [startText, setStartText] = createSignal(props.initial ? formatDateInput(props.initial.start, locale()) : "");
+  const [endText, setEndText] = createSignal(props.initial ? formatDateInput(props.initial.end, locale()) : "");
+  const [startError, setStartError] = createSignal("");
+  const [endError, setEndError] = createSignal("");
+  // Follows the window: narrowing it below two months' room drops the second month, widening adds it.
+  const query = !props.sheet && typeof matchMedia === "function" ? matchMedia(TWO_MONTHS_QUERY) : undefined;
+  const [wide, setWide] = createSignal(Boolean(query?.matches));
+  if (query) {
+    const update = () => setWide(query.matches);
+    query.addEventListener("change", update);
+    onCleanup(() => query.removeEventListener("change", update));
+  }
+  const twoMonths = () => !props.sheet && wide();
+  // Months are anchored on their 1st: stepping from 31 March or 30 November never skips a month.
+  const monthOf = (key, offset = 0) => {
+    const year = Number(key.slice(0, 4));
+    const month = Number(key.slice(5, 7)) - 1 + offset;
+    return parseDateValue(`${year + Math.floor(month / 12)}-${String((month % 12 + 12) % 12 + 1).padStart(2, "0")}-01`, config());
+  };
+  const keyOf = date => dates.formatDateKey(date, config());
+  // The first visible month: the end's month, and the one before it when two months show.
+  const [first, setFirstMonth] = createSignal(monthOf(props.initial?.end ?? props.today, twoMonths() ? -1 : 0));
+  const setFirst = date => setFirstMonth(monthOf(keyOf(date)));
+  const second = createMemo(() => monthOf(keyOf(first()), 1));
+  const shown = createMemo(() => previewRange(draft(), anchor(), preview()));
+  let months;
+  const startId = createFieldMeta().controlId;
+  const endId = createFieldMeta().controlId;
+  const isShown = date => dates.isSameMonth(date, first(), config()) || twoMonths() && dates.isSameMonth(date, second(), config());
+  const fill = range => {
+    setStartText(range.start ? formatDateInput(range.start, locale()) : "");
+    setEndText(range.end ? formatDateInput(range.end, locale()) : "");
+    setStartError("");
+    setEndError("");
+  };
+  const pickDay = key => {
+    const next = pickRangeDay(draft(), anchor(), key);
+    batch(() => {
+      setDraft(next.range);
+      setAnchor(next.anchor);
+      setPreview(null);
+      fill(next.range);
+    });
+  };
+  /** Reads one typed half; returns the day, `null` for empty, or `undefined` after showing an error. */
+  const readText = (text, setError) => {
+    const result = parseDateInput(text, {
+      today: props.today,
+      locale: locale()
+    });
+    if (result.kind === "empty") return null;
+    if (result.kind === "error") {
+      setError(errorText(result.error, locale(), inputT(), props.today));
+      return undefined;
+    }
+    setError("");
+    return result.date;
+  };
+  const commitTyped = () => {
+    const start = readText(startText(), setStartError);
+    const end = readText(endText(), setEndError);
+    if (start === undefined || end === undefined) return undefined;
+    const range = {
+      start,
+      end
+    };
+    batch(() => {
+      setDraft(range);
+      setAnchor(null);
+    });
+    if (start && end && end < start) {
+      setEndError(inputT().endBeforeStart);
+      return undefined;
+    }
+    if (start && !end) setEndError(inputT().missingEnd);
+    if (end && !start) setStartError(inputT().missingStart);
+    const visible = end ?? start;
+    if (visible && !isShown(parseDateValue(visible, config()))) setFirstMonth(monthOf(visible, twoMonths() ? -1 : 0));
+    return start && end ? {
+      start,
+      end
+    } : undefined;
+  };
+  const complete = () => {
+    const range = draft();
+    return range.start && range.end && !startError() && !endError() ? {
+      start: range.start,
+      end: range.end
+    } : undefined;
+  };
+  const apply = () => {
+    const typed = commitTyped();
+    if (typed) props.onApply(typed);
+  };
+  const fieldKeyDown = event => {
+    if (event.key !== "Enter") return;
+    event.preventDefault();
+    apply();
+  };
+  const placeholder = () => dateInputPattern(locale(), {
+    day: inputT().dayLetters,
+    month: inputT().monthLetters,
+    year: inputT().yearLetters
+  });
+  const status = () => {
+    const range = shown();
+    return range.start && range.end ? props.rangeText({
+      start: range.start,
+      end: range.end
+    }).detail : "";
+  };
+  const field = fieldProps => _$ssr(_tmpl$9, _$ssrAttribute("data-invalid", fieldProps.error() ? "true" : _$escape(undefined, true), false), _$ssrAttribute("for", _$escape(fieldProps.id, true), false), _$escape(fieldProps.label), _$ssrAttribute("id", _$escape(fieldProps.id, true), false), _$ssrAttribute("placeholder", _$escape(placeholder(), true), false) + _$ssrAttribute("value", _$escape(fieldProps.text(), true), false) + _$ssrAttribute("aria-invalid", fieldProps.error() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-describedby", fieldProps.error() ? `${_$escape(fieldProps.id, true)}-error` : _$escape(undefined, true), false), `${_$escape(fieldProps.id, true)}-error`, _$escape(fieldProps.error()));
+  return _$ssr(_tmpl$10, _$ssrAttribute("aria-label", _$escape(t().custom, true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.sheet;
+    },
+    get children() {
+      return _$ssr(_tmpl$0, _$escape(t().backToPresets));
+    }
+  })), _$escape(field({
+    id: startId,
+    label: t().from,
+    text: startText,
+    setText: setStartText,
+    error: startError
+  })), _$escape(field({
+    id: endId,
+    label: t().to,
+    text: endText,
+    setText: setEndText,
+    error: endError
+  })), _$escape(_$createComponent(DatePickerPanel, {
+    visibleMonth: first,
+    setVisibleMonth: setFirst,
+    range: shown,
+    focusDate: () => draft().start,
+    onSelect: pickDay,
+    onDayPreview: key => setPreview(rangeAnchor(draft(), anchor()) ? key : null),
+    get dateConfig() {
+      return config();
+    },
+    get nav() {
+      return twoMonths() ? "previous" : "both";
+    },
+    get hideOutside() {
+      return twoMonths();
+    },
+    isShown: isShown,
+    focusRoot: () => months
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return twoMonths();
+    },
+    get children() {
+      return _$createComponent(DatePickerPanel, {
+        visibleMonth: second,
+        setVisibleMonth: date => setFirstMonth(monthOf(keyOf(date), -1)),
+        range: shown,
+        focusDate: () => draft().end,
+        onSelect: pickDay,
+        onDayPreview: key => setPreview(rangeAnchor(draft(), anchor()) ? key : null),
+        get dateConfig() {
+          return config();
+        },
+        nav: "next",
+        hideOutside: true,
+        isShown: isShown,
+        focusRoot: () => months
+      });
+    }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!shown().start)() && shown().end;
+    },
+    get children() {
+      return _$ssr(_tmpl$1);
+    }
+  })), _$escape(status()), _$ssrAttribute("disabled", !complete(), true), _$escape(ui().apply));
+}
+export default PeriodPicker;
+//# sourceMappingURL=PeriodPicker.js.map